/* Đèn Pha Lê: than chì + đồng thau, một họ chữ Be Vietnam Pro, phân cấp bằng độ đậm */
:root {
	--nen: #141416;
	--nen-toi: #0a0a0b;
	--nen-xen: #1b1b1e;
	--chi: rgba(241, 237, 230, .14);
	--chu: #f1ede6;
	--than: #bdb7ad;
	--dong: #c4a26a;
	--dong-sang: #d3b57f;
	--khung: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 109.4%; scroll-behavior: smooth; scroll-padding-top: 130px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--than); font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 300; line-height: 1.7; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s; }
a:hover { color: var(--dong-sang); }
h1, h2, h3 { margin: 0 0 .6em; color: var(--chu); font-weight: 200; line-height: 1.22; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 4.2vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
h3 { font-size: 1.15rem; font-weight: 400; letter-spacing: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--dong-sang); outline-offset: 3px; }

.khung { width: min(var(--khung), 100% - 80px); margin-inline: auto; }
.khung--hep { width: min(860px, 100% - 80px); }
.nhan { margin: 0 0 1.1em; color: var(--dong); font-size: .76rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.ghi { margin-top: 1em; font-size: .78rem; }
.bo-qua { position: absolute; left: -999px; }
.bo-qua:focus { left: 16px; top: 16px; z-index: 100; padding: 8px 14px; background: var(--dong); color: #000; }

.nut { display: inline-block; padding: .85em 1.9em; border: 1px solid var(--dong); background: transparent; color: var(--chu); font: inherit; font-size: .9rem; font-weight: 400; letter-spacing: .02em; cursor: pointer; transition: background .25s, color .25s; }
.nut:hover { background: var(--dong); color: #000; }
.nut--dac { background: var(--dong); color: #000; font-weight: 500; }
.nut--dac:hover { background: var(--dong-sang); color: #000; }
.lien-ket { display: inline-block; padding-bottom: .25em; border-bottom: 1px solid var(--dong); color: var(--chu); font-size: .9rem; font-weight: 400; }

/* Đầu trang */
.dau { position: sticky; top: 0; z-index: 50; background: var(--nen-toi); border-bottom: 1px solid var(--chi); transition: background .3s; }
.home .dau { position: fixed; inset: 0 0 auto; background: linear-gradient(color-mix(in srgb, var(--nen-toi) 78%, transparent), transparent); border-bottom-color: transparent; }
.home .dau--cuon, .home .dau--mo { background: var(--nen-toi); border-bottom-color: var(--chi); }
.dau__tren { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: min(var(--khung), 100% - 80px); margin-inline: auto; padding: 20px 0 14px; transition: padding .3s; }
.dau--cuon .dau__tren { padding: 12px 0 8px; }
.dau__tim, .dau__tel { color: var(--chu); font-size: .86rem; font-weight: 400; }
.dau__tel { justify-self: end; }
.dau__mo { display: none; padding: 0; border: 0; background: none; color: var(--chu); font: inherit; font-size: .86rem; cursor: pointer; }
.logo { display: block; text-align: center; color: var(--chu); }
.logo__ten { display: block; font-size: 1.1rem; font-weight: 300; letter-spacing: .24em; text-transform: uppercase; }
.dau__menu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px clamp(18px, 2.8vw, 42px); padding-bottom: 16px; font-size: .86rem; font-weight: 400; }
.dau__menu a { color: var(--chu); }
.dau__menu a:hover, .dau__menu .current-menu-item a { color: var(--dong-sang); }
.dau--cuon .dau__menu ul { padding-bottom: 10px; }

/* Mở đầu trang chủ */
.mo-dau { position: relative; display: flex; align-items: center; min-height: 100svh; overflow: hidden; background: var(--nen-toi); }
.mo-dau__anh { position: absolute; inset: 128px 0 0 38%; }
.mo-dau__anh img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.mo-dau__anh::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--nen-toi) 0%, color-mix(in srgb, var(--nen-toi) 72%, transparent) 24%, transparent 58%), linear-gradient(0deg, var(--nen-toi) 0%, transparent 22%), linear-gradient(180deg, var(--nen-toi) 0%, transparent 12%); }
.mo-dau__chu { position: relative; width: min(var(--khung), 100% - 80px); margin-inline: auto; padding-top: 110px; }
.mo-dau__chu > * { max-width: 620px; }
.mo-dau__dan { margin-bottom: 2em; font-size: 1.05rem; }
.mo-dau__nut { display: flex; flex-wrap: wrap; gap: 14px; }

.so-lieu { background: var(--nen-toi); border-block: 1px solid var(--chi); }
.so-lieu__luoi { display: grid; grid-template-columns: repeat(3, 1fr); }
.so-lieu p { display: flex; flex-direction: column; margin: 0; padding: 30px 28px; border-left: 1px solid var(--chi); }
.so-lieu p:first-child { border-left: 0; padding-left: 0; }
.so-lieu strong { color: var(--chu); font-size: 1.5rem; font-weight: 200; }
.so-lieu span { font-size: .86rem; }

/* Khối chung */
.khoi { padding: clamp(64px, 8vw, 120px) 0; }
.khoi--toi { background: var(--nen-toi); }
.khoi--sat { padding-top: 20px; }
.khoi__dau { margin-bottom: clamp(32px, 4vw, 56px); }
.khoi__dau h2 { margin-bottom: 0; }
.khoi__dau--ngang { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* Danh mục */
.dm-luoi { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 320px; gap: 14px; }
.dm { position: relative; display: block; overflow: hidden; background: var(--nen-xen); }
.dm img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease, opacity .4s; opacity: .86; }
.dm:hover img { transform: scale(1.04); opacity: 1; }
.dm::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--nen-toi) 78%, transparent), transparent 46%); }
.dm__ten { position: absolute; left: 24px; bottom: 20px; z-index: 1; color: var(--chu); font-size: 1.3rem; font-weight: 300; }

/* Lưới sản phẩm */
.luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 22px; }
.the a { display: block; }
.the__anh { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 16px; background: var(--nen-xen); }
.the__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.the a:hover .the__anh img { transform: scale(1.04); }
.the__ten { margin-bottom: .25em; font-size: 1rem; font-weight: 400; line-height: 1.4; }
.the__phu { margin: 0; font-size: .84rem; }

/* Khối đôi */
.doi { display: grid; grid-template-columns: 1fr 1fr; background: var(--nen); }
.doi__anh { min-height: 560px; }
.doi__anh img { width: 100%; height: 100%; object-fit: cover; }
.doi__chu { align-self: center; max-width: 620px; padding: clamp(40px, 6vw, 90px); }
.ds-gach { margin: 1.5em 0 2em; }
.ds-gach li { padding: .8em 0; border-top: 1px solid var(--chi); color: var(--chu); font-weight: 300; }
.ds-gach li:last-child { border-bottom: 1px solid var(--chi); }

/* Quy trình */
.buoc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: b; }
.buoc li { padding: 26px 28px 0 0; border-top: 1px solid var(--chi); counter-increment: b; }
.buoc li::before { content: '0' counter(b); display: block; margin-bottom: 1em; color: var(--dong); font-size: 1.5rem; font-weight: 200; }
.buoc p { margin: 0; font-size: .92rem; }

/* Hỏi đáp */
.faq__muc { border-top: 1px solid var(--chi); }
.faq__muc:last-child { border-bottom: 1px solid var(--chi); }
.faq__muc summary { display: flex; justify-content: space-between; gap: 20px; padding: 1.1em 0; color: var(--chu); font-weight: 400; cursor: pointer; list-style: none; }
.faq__muc summary::-webkit-details-marker { display: none; }
.faq__muc summary::after { content: '+'; color: var(--dong); font-size: 1.3rem; font-weight: 200; line-height: 1.2; }
.faq__muc[open] summary::after { content: '–'; }
.faq__muc p { padding-bottom: 1em; }

/* Cẩm nang */
.ds-bai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.bai { padding-top: 22px; border-top: 1px solid var(--chi); }
.bai h2, .bai h3 { font-size: 1.15rem; font-weight: 400; line-height: 1.4; }
.bai p { margin: 0; font-size: .92rem; }

/* Nhận báo giá */
.keu-goi { padding: clamp(64px, 8vw, 110px) 0; background: var(--nen-xen); }
.keu-goi__luoi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.keu-goi__lien-he { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
.form p { margin: 0; }
.form__bay { position: absolute; left: -9999px; }
.form__o label { display: block; margin-bottom: .4em; color: var(--chu); font-size: .84rem; font-weight: 400; }
.form__o--rong, .form__gui, .form__bao { grid-column: 1 / -1; }
.form input:not([type=hidden]), .form textarea { width: 100%; padding: .75em .9em; border: 1px solid var(--chi); background: var(--nen-toi); color: var(--chu); font: inherit; border-radius: 0; }
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--dong); }
.form__gui { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form__gui small { flex: 1 1 220px; font-size: .78rem; line-height: 1.5; }
.form__gui small a { text-decoration: underline; }
.form__bao { padding: .8em 1em; border: 1px solid var(--dong); color: var(--chu); }

/* Tiêu đề trang */
.tieu-de { padding: clamp(36px, 5vw, 70px) 0 clamp(20px, 3vw, 36px); }
.tieu-de__dan { max-width: 780px; font-size: 1.05rem; }
.tieu-de__ngay { font-size: .84rem; }
.tieu-de__ngay a { text-decoration: underline; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 1.6em; font-size: .8rem; }
.crumb li + li::before { content: '/'; margin-right: 10px; color: var(--dong); }
.loc { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 1.6em; padding-top: 1.1em; border-top: 1px solid var(--chi); font-size: .9rem; }
.loc a[aria-current] { color: var(--dong-sang); }
.nav-links { display: flex; justify-content: center; gap: 18px; margin-top: 50px; }
.nav-links .current { color: var(--dong-sang); }

/* Chi tiết sản phẩm */
.sp { padding: clamp(24px, 3vw, 44px) 0 clamp(50px, 6vw, 90px); }
.sp__luoi { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
.sp__chinh { margin: 0; background: var(--nen-xen); }
.sp__chinh img { width: 100%; max-height: 780px; object-fit: contain; }
.sp__nho { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sp__nho button { width: 84px; height: 84px; padding: 0; border: 1px solid var(--chi); background: none; cursor: pointer; }
.sp__nho img { width: 100%; height: 100%; object-fit: cover; }
.sp__ghi { margin: .7em 0 0; font-size: .76rem; }
.sp__chu { position: sticky; top: 140px; }
.sp__ma { color: var(--dong); font-size: .84rem; font-weight: 400; }
.sp__dan { font-size: 1.05rem; }
.sp__gia { display: flex; align-items: baseline; justify-content: space-between; margin: 1.6em 0; padding: 1em 0; border-block: 1px solid var(--chi); }
.sp__gia dt { font-size: .86rem; }
.sp__gia dd { margin: 0; color: var(--chu); font-size: 1.4rem; font-weight: 200; }
.sp__nut { display: flex; flex-wrap: wrap; gap: 12px; }
.sp__phu { margin-top: 1.4em; font-size: .9rem; }
.sp-mo-ta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); }
.sp-mo-ta h2 { font-size: 1.6rem; }
.bang th, .bang td { padding: .72em 0; border-bottom: 1px solid var(--chi); text-align: left; vertical-align: top; font-size: .92rem; }
.bang th { width: 42%; padding-right: 20px; font-weight: 300; }
.bang td { color: var(--chu); font-weight: 400; }

/* Thân bài */
.than-bai h2 { margin-top: 1.6em; font-size: 1.7rem; }
.than-bai h2:first-child { margin-top: 0; }
.than-bai h3 { margin-top: 1.4em; font-size: 1.2rem; }
.than-bai a { color: var(--dong-sang); text-decoration: underline; }
.than-bai ul, .than-bai ol { margin: 0 0 1em 1.2em; list-style: disc; }
.than-bai li { margin-bottom: .4em; }
.than-bai table { margin: 1.4em 0; }
.than-bai th, .than-bai td { padding: .7em .8em .7em 0; border-bottom: 1px solid var(--chi); text-align: left; font-size: .92rem; }
.than-bai th { color: var(--chu); font-weight: 400; }

/* Chân trang */
.chan { padding: clamp(50px, 6vw, 80px) 0 24px; background: var(--nen-toi); font-size: .9rem; }
.chan__luoi { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 40px; }
.chan__ten { color: var(--chu); font-size: 1.05rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; }
.chan li { margin-bottom: .45em; }
.chan address p { margin-bottom: .45em; }
.chan__cuoi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 30px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--chi); font-size: .78rem; }
.chan__cuoi p { margin: 0; }
.thanh-goi { display: none; }

/* Hiện dần: site.js mới bật lớp này, JS lỗi thì nội dung vẫn hiện đủ */
.co-hieu-ung .hien-dan { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.co-hieu-ung .hien-dan.da-hien { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.co-hieu-ung .hien-dan { opacity: 1; transform: none; transition: none; }
	.the__anh img, .dm img { transition: none; }
}

@media (max-width: 1080px) {
	.luoi { grid-template-columns: repeat(3, 1fr); }
	.chan__luoi { grid-template-columns: 1fr 1fr; }
	.buoc { grid-template-columns: 1fr 1fr; row-gap: 34px; }
	.sp-mo-ta { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
	html { scroll-padding-top: 90px; }
	.khung, .khung--hep, .mo-dau__chu, .dau__tren { width: calc(100% - 32px); }
	.dau__tren { grid-template-columns: 56px 1fr 56px; padding: 12px 0; gap: 6px; }
	.dau__mo { display: block; justify-self: start; }
	.dau__tim, .dau__tel { display: none; }
	.logo { grid-column: 2; }
	.logo__ten { font-size: .8rem; letter-spacing: .14em; }
	.dau__menu { display: none; padding: 0 16px 14px; }
	.dau--mo .dau__menu { display: block; }
	.dau__menu ul { flex-direction: column; gap: 0; padding: 0; font-size: 1rem; }
	.dau__menu li { padding: .7em 0; border-top: 1px solid var(--chi); }
	.mo-dau { display: block; min-height: 0; padding-top: 62px; }
	.mo-dau__anh { position: relative; inset: auto; height: 50svh; min-height: 300px; }
	.mo-dau__anh img { object-position: 55% 20%; }
	.mo-dau__anh::after { background: linear-gradient(0deg, var(--nen-toi) 0%, transparent 34%); }
	.mo-dau__chu { padding: 8px 0 40px; }
	.so-lieu__luoi { grid-template-columns: 1fr; }
	.so-lieu p, .so-lieu p:first-child { padding: 16px 0; border-left: 0; border-top: 1px solid var(--chi); }
	.so-lieu p:first-child { border-top: 0; }
	.dm-luoi { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: 10px; }
	.dm__ten { left: 14px; bottom: 12px; font-size: 1.05rem; }
	.luoi { grid-template-columns: 1fr 1fr; gap: 30px 12px; }
	.doi, .sp__luoi, .keu-goi__luoi, .ds-bai { grid-template-columns: 1fr; }
	.doi__anh { min-height: 320px; }
	.doi__chu { max-width: none; padding: 44px 16px; }
	.sp__chu { position: static; }
	.form { grid-template-columns: 1fr; }
	.khoi__dau--ngang { flex-direction: column; align-items: flex-start; }
	body { padding-bottom: 54px; }
	.thanh-goi { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; background: var(--nen-toi); border-top: 1px solid var(--chi); }
	.thanh-goi a { padding: 15px 8px; color: var(--chu); font-size: .9rem; font-weight: 400; text-align: center; }
	.thanh-goi a:last-child { background: var(--dong); color: #000; font-weight: 500; }
}

@media (max-width: 480px) {
	.buoc { grid-template-columns: 1fr; }
	.chan__luoi { grid-template-columns: 1fr; }
}