/* ============================================================
   TRAO LỘC — quatet.traoloc.com
   Hệ thiết kế "Sơn mài & Gấm"
   Nền sơn mài đỏ sẫm · chi tiết vàng lá · giấy dó ngà
   Mobile-first. Không build, không thư viện ngoài.
   ============================================================ */

:root{
  /* --- sơn mài --- */
  --lacquer:#55090D;
  --lacquer-2:#6A1116;
  --lacquer-deep:#37060A;
  --red:#9E1219;
  --red-btn:#C0242B;
  --red-btn-2:#A31A20;
  --red-wash:#FBEDEA;

  /* --- vàng lá --- */
  --gold:#A8862F;
  --gold-lt:#E3C57E;
  --gold-br:#F0DCA6;
  --gold-pale:#FBF1D8;

  /* --- giấy dó --- */
  --paper:#FDFAF4;
  --paper-2:#F6EDDC;
  --paper-3:#EFE2CB;
  --white:#FFFFFF;

  /* --- mực --- */
  --ink:#1F1310;
  --ink-2:#48362C;
  --ink-3:#6B5849;
  --ink-4:#96806B;

  --line:#E4D6BC;
  --line-2:#EFE5D3;
  --line-dark:rgba(227,197,126,.26);

  --ring:0 0 0 3px rgba(168,134,47,.42);
  --lift:0 1px 2px rgba(85,9,13,.05), 0 18px 40px -26px rgba(85,9,13,.42);
  --lift-2:0 2px 4px rgba(85,9,13,.06), 0 30px 60px -30px rgba(85,9,13,.55);

  --wrap:1180px;
  --gut:20px;

  /* con dấu hoa mai — dùng làm dấu phân khu */
  --seal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23A8862F' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z'/%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z' transform='rotate(72 32 32)'/%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z' transform='rotate(144 32 32)'/%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z' transform='rotate(216 32 32)'/%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z' transform='rotate(288 32 32)'/%3E%3Ccircle cx='32' cy='32' r='3.4' fill='%23A8862F' stroke='none'/%3E%3C/svg%3E");
  --seal-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23E3C57E' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z'/%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z' transform='rotate(72 32 32)'/%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z' transform='rotate(144 32 32)'/%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z' transform='rotate(216 32 32)'/%3E%3Cpath d='M32 31.2C25.6 25.8 25.6 14.8 32 9.4c6.4 5.4 6.4 16.4 0 21.8Z' transform='rotate(288 32 32)'/%3E%3Ccircle cx='32' cy='32' r='3.4' fill='%23E3C57E' stroke='none'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:var(--red); text-decoration:none}
a:hover{color:var(--red-btn)}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:2px}

h1,h2,h3{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700; margin:0; line-height:1.1; letter-spacing:-.012em; text-wrap:balance;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.nowrap{white-space:nowrap}

/* mắt xích nhỏ: nhãn chữ hoa */
.eb{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--gold); display:inline-block;
}
.rule{display:inline-block; width:26px; height:1px; background:currentColor; opacity:.7; vertical-align:middle; margin-right:10px}

/* điểm nhấn trong câu — gạch chân vàng lá */
.hl{
  font-style:normal; font-weight:600; color:inherit;
  background:linear-gradient(transparent 62%, rgba(227,197,126,.55) 62%, rgba(227,197,126,.55) 92%, transparent 92%);
  padding-inline:1px;
}
.sec-dark .hl{background:linear-gradient(transparent 62%, rgba(227,197,126,.3) 62%, rgba(227,197,126,.3) 92%, transparent 92%); color:var(--gold-br)}

/* ============================================================
   NÚT
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1.2; letter-spacing:.01em;
  padding:16px 26px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; text-align:center; min-height:52px; width:100%;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn-primary{
  background:var(--red-btn); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(240,220,166,.55), 0 10px 26px -14px rgba(85,9,13,.6);
}
.btn-primary:hover{background:var(--red-btn-2); color:#fff; transform:translateY(-1px)}
.btn-gold{background:var(--gold-lt); color:var(--lacquer); font-weight:700}
.btn-gold:hover{background:var(--gold-br); color:var(--lacquer); transform:translateY(-1px)}
.btn-ghost-gold{background:transparent; color:var(--gold-lt); border-color:rgba(227,197,126,.45)}
.btn-ghost-gold:hover{background:rgba(227,197,126,.1); color:var(--gold-br); border-color:var(--gold-lt)}
.btn-outline{background:transparent; color:var(--red); border-color:rgba(158,18,25,.45)}
.btn-outline:hover{background:var(--red); color:#fff; border-color:var(--red)}
.btn-lg{font-size:16.5px; padding:19px 32px; min-height:60px}
@media (min-width:760px){ .btn{width:auto} }

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; background:var(--lacquer); overflow:hidden; padding-bottom:40px}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-br) 28%,var(--gold) 52%,var(--gold-br) 78%,var(--gold) 100%);
}
.hero-lattice{position:absolute; inset:0; opacity:.13; pointer-events:none}

.topbar{position:relative; padding-top:16px; display:flex; align-items:center; gap:14px}
.nav{display:none}
.topbar-call{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(227,197,126,.42); padding:9px 14px; border-radius:2px;
  color:var(--paper); font-size:13.5px; font-weight:600; min-height:44px;
}
.topbar-call:hover{color:var(--gold-br); background:rgba(227,197,126,.1)}
.topbar-call svg{stroke:var(--gold-lt); flex:0 0 auto}
.topbar-cta{
  display:none; background:var(--red-btn); color:#fff; font-size:13.5px; font-weight:600;
  padding:11px 22px; border-radius:2px; min-height:44px; align-items:center;
  box-shadow:inset 0 0 0 1px rgba(240,220,166,.5);
}
.topbar-cta:hover{color:#fff; background:var(--red-btn-2)}

@media (min-width:1000px){
  .topbar{padding-top:26px; gap:36px}
  .nav{display:flex; gap:28px}
  .nav a{font-size:14.5px; color:#EBD9CB; letter-spacing:.01em; position:relative; padding-block:4px}
  .nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold-lt); transition:right .2s ease}
  .nav a:hover{color:var(--gold-br)} .nav a:hover::after{right:0}
  .topbar-cta{display:inline-flex}
}

.hero-grid{position:relative; padding-top:36px; display:grid; gap:32px}
.hero-eyebrow{color:var(--gold-lt); margin:0 0 16px}
.hero h1{font-size:clamp(40px,11vw,68px); color:var(--paper); line-height:1.04}
.hero h1 em{
  display:block; color:var(--gold-lt); font-style:italic; font-weight:700;
}
.hero-sub{margin:20px 0 0; font-size:17px; line-height:1.62; color:#E8D3C6; max-width:36em}
.hero-actions{display:flex; flex-direction:column; gap:11px; margin-top:28px}

/* dải số liệu dưới hero */
.hero-meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:0; margin-top:30px;
  border-top:1px solid var(--line-dark); padding-top:24px;
}
.hero-stat{display:flex; flex-direction:column; padding-right:12px; min-width:0}
.hero-stat + .hero-stat{padding-left:12px; border-left:1px solid var(--line-dark)}
.stat-num{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:28px; line-height:1;
  color:var(--gold-lt); font-variant-numeric:tabular-nums; display:block; white-space:nowrap;
}
.stat-lbl{font-size:11.5px; color:#BFA08C; margin-top:6px; display:block; letter-spacing:.04em}
.hero-offer{
  grid-column:1/-1; margin:20px 0 0; font-size:13.5px; color:var(--paper); font-weight:600; line-height:1.5;
  background:rgba(227,197,126,.09); border-left:2px solid var(--gold-lt); padding:12px 16px;
}
.hero-offer span{display:block; font-weight:400; color:#C4A692; margin-top:2px}

/* khung ảnh hero — viền vàng kép + góc trang trí */
.hero-figure{position:relative; margin:0; padding:11px; border:1px solid var(--gold); background:rgba(227,197,126,.05)}
.hero-figure::before{
  content:""; position:absolute; inset:4px; border:1px solid rgba(227,197,126,.32); pointer-events:none;
}
.hero-figure img{width:100%; aspect-ratio:1/1; object-fit:cover}
.hero-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gold-lt); color:var(--lacquer); white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.14em; padding:8px 18px; border-radius:1px;
}

@media (min-width:1000px){
  .hero{padding-bottom:88px}
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:center; padding-top:70px}
  .hero-actions{flex-direction:row; gap:14px; margin-top:36px}
  .hero-meta{margin-top:40px; padding-top:28px}
  .hero-stat{padding-right:26px}
  .hero-stat + .hero-stat{padding-left:26px}
  .stat-num{font-size:42px}
  .hero-offer{grid-column:1/-1; margin:24px 0 0}
  .hero-figure{padding:14px}
  .hero-badge{left:auto; right:20px; transform:none}
}

/* ============================================================
   DẢI CAM KẾT — băng vàng
   ============================================================ */
.trust{
  background:linear-gradient(180deg,var(--gold-pale) 0%,var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
}
.trust ul{
  list-style:none; margin:0; padding:22px 0; display:grid; gap:14px 0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.trust li{
  display:flex; align-items:center; gap:10px; padding-right:12px;
  font-size:12.5px; font-weight:600; line-height:1.35; color:var(--ink-2);
}
.trust li:last-child{grid-column:1/-1}
.trust svg{stroke:var(--red); flex:0 0 auto}

@media (min-width:1000px){
  .trust ul{grid-template-columns:repeat(5,minmax(0,1fr)); padding:0; gap:0}
  .trust li{padding:26px 20px; font-size:13.5px; position:relative; justify-content:center; text-align:left}
  .trust li + li::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:14px; height:14px; background:var(--seal); background-size:contain; opacity:.55;
  }
  .trust li:last-child{grid-column:auto}
}

/* ============================================================
   KHUNG KHU VỰC
   ============================================================ */
.sec{padding-block:52px; position:relative}
.sec-tint{background:var(--paper-2); border-block:1px solid var(--line)}
.sec-dark{background:var(--lacquer); color:#EFE0D5; position:relative; overflow:hidden}
.sec-dark::before,.sec-dark::after{
  content:""; position:absolute; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-br) 40%,var(--gold) 100%); opacity:.85;
}
.sec-dark::before{top:0} .sec-dark::after{bottom:0}
.sec-dark h2,.sec-dark h3{color:var(--paper)}
.sec-dark h2 em{color:var(--gold-lt); font-style:italic}
.sec-dark p{color:#E4D0C3}
.sec-dark .eb{color:var(--gold-lt)}

/* nền hoa mai rất nhạt cho khu bộ sưu tập */
.sec-mai::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.032;
  background-image:var(--seal); background-size:118px 118px; background-position:center top;
}
.sec-mai > *{position:relative}

/* đầu khu vực */
.sec-head{margin-bottom:30px; max-width:66ch}
.sec-head .eb{display:block; margin-bottom:14px}
.sec-head h2{font-size:clamp(29px,6.6vw,44px)}
.sec-head h2 em{font-style:italic; color:var(--red)}
.sec-dark .sec-head h2 em,.sec-dark h2 em{font-style:italic; color:var(--gold-lt)}
.sec-head .lead{margin:14px 0 0; font-size:17px; color:var(--ink-3); line-height:1.62}
.sec-dark .sec-head .lead{color:#E4D0C3}

.sec-head.center{max-width:none; text-align:center}
.sec-head.center .lead{max-width:60ch; margin-inline:auto}
.sec-head.center .eb{position:relative; padding-bottom:20px}
.sec-head.center .eb::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:22px; height:22px; background:var(--seal); background-size:contain;
}
.sec-dark .sec-head.center .eb::after{background-image:var(--seal-gold)}

@media (min-width:760px){ .sec{padding-block:76px} .sec-head{margin-bottom:42px} }

/* ============================================================
   BỘ LỌC CHỌN NHANH
   ============================================================ */
.filter{
  background:var(--white); border:1px solid var(--gold); padding:26px 22px 28px;
  box-shadow:var(--lift-2); position:relative;
}
.filter::before{content:""; position:absolute; inset:5px; border:1px solid var(--line); pointer-events:none}
.filter > *{position:relative}
.filter h2{font-size:clamp(26px,6.4vw,36px)}
.filter-hint{font-size:15px; color:var(--ink-3); margin:8px 0 0}
.filter-q{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--gold); display:block; margin:24px 0 11px;
}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  font-family:inherit; font-size:14px; line-height:1.2; padding:13px 18px; min-height:46px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:2px; cursor:pointer; transition:all .15s ease;
}
.chip:hover{border-color:var(--gold); background:var(--gold-pale)}
.chip[aria-pressed="true"]{
  background:var(--red); border-color:var(--red); color:#fff; font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(240,220,166,.4);
}

.filter-result{
  margin-top:28px; padding:20px; background:var(--lacquer); color:var(--paper);
  display:flex; flex-direction:column; gap:7px; border-left:3px solid var(--gold-lt);
}
.filter-result .eb{color:var(--gold-lt)}
.filter-result-name{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:25px; line-height:1.2; color:var(--gold-br)}
.filter-result-desc{font-size:14px; color:#E4D0C3; line-height:1.55}
.filter-result-cta{display:flex; flex-direction:column; gap:9px; margin-top:14px}

@media (min-width:760px){
  .filter{padding:40px 46px 44px}
  .filter-rows{display:flex; flex-direction:column; gap:20px; margin-top:28px}
  .filter-row{display:flex; align-items:center; gap:24px}
  .filter-q{width:168px; flex:0 0 auto; margin:0}
  .filter-result{flex-direction:row; align-items:center; gap:26px; padding:24px 28px}
  .filter-result-text{display:flex; flex-direction:column; gap:6px}
  .filter-result-cta{margin:0 0 0 auto; flex:0 0 auto; width:196px}
  .filter-result-name{font-size:28px}
}

/* ============================================================
   BỐN NHÓM CHỦ ĐỀ
   ============================================================ */
.themes{display:grid; gap:18px}
.theme{
  background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.theme:hover{box-shadow:var(--lift); transform:translateY(-3px); border-color:var(--gold)}
.theme-band{height:4px}
.theme-a .theme-band{background:linear-gradient(90deg,#6E7F4A,#8FA162)}
.theme-b .theme-band{background:linear-gradient(90deg,var(--gold),var(--gold-lt))}
.theme-c .theme-band{background:linear-gradient(90deg,var(--red),#C8434A)}
.theme-d .theme-band{background:linear-gradient(90deg,var(--lacquer),var(--lacquer-2))}
.theme-c{border-color:var(--gold); box-shadow:var(--lift)}

.theme-media{position:relative; overflow:hidden}
.theme-media img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s ease}
.theme:hover .theme-media img{transform:scale(1.045)}
.theme-flag{
  position:absolute; top:12px; right:12px; background:var(--lacquer); color:var(--gold-br);
  font-size:9.5px; letter-spacing:.13em; font-weight:700; padding:6px 11px;
  box-shadow:inset 0 0 0 1px rgba(227,197,126,.4);
}

.theme-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1 1 auto}
.theme-body .eb{font-size:9.5px; letter-spacing:.18em; color:var(--ink-4)}
.theme-body h3{font-size:28px; margin-top:9px}
.theme-price{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:18px;
  color:var(--red); margin-top:7px; display:block; font-variant-numeric:tabular-nums;
}
.theme-for{
  margin:15px 0 0; padding:12px 0; font-size:12.5px; color:var(--ink-3); line-height:1.5;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.theme-list{list-style:none; margin:15px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.theme-list li{font-size:13.5px; line-height:1.45; color:var(--ink-2); padding-left:16px; position:relative}
.theme-list li::before{
  content:""; position:absolute; left:0; top:6px; width:8px; height:8px;
  background:var(--seal); background-size:contain; opacity:.9;
}
.theme-list li strong{color:var(--ink); font-weight:600}
.theme-note{
  font-size:12.5px; color:var(--ink-3); line-height:1.5; margin:15px 0 0;
  padding:11px 13px; background:var(--paper-2); border-left:2px solid var(--gold);
}
.theme-count{
  display:block; font-size:11.5px; color:var(--ink-4); margin-top:14px;
  padding-top:12px; border-top:1px solid var(--line-2); letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.theme-cta{margin-top:auto; padding-top:15px}

@media (min-width:640px){ .themes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .themes{grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px} }

/* ============================================================
   TUỲ BIẾN THEO NGÂN SÁCH
   ============================================================ */
.custom{
  margin-top:34px; background:var(--lacquer); color:var(--paper);
  padding:30px 26px 32px; border-top:3px solid var(--gold-lt); position:relative;
}
.custom::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:var(--seal-gold); background-size:132px 132px;
}
.custom > *{position:relative}
.custom .eb{color:var(--gold-lt)}
.custom h3{
  font-size:29px; line-height:1.18; color:var(--paper); margin:9px 0 16px; letter-spacing:-.012em;
}
.custom h3 em{font-style:italic; color:var(--gold-br)}
.custom h3 .hl{background:linear-gradient(transparent 64%, rgba(168,134,47,.42) 64%, rgba(168,134,47,.42) 94%, transparent 94%)}
.custom p{font-size:15px; line-height:1.68; color:#E8D6C9; margin:0 0 13px}
.custom p:last-child{margin-bottom:0}
.custom p strong{color:var(--gold-br)}
.custom-cta{margin-top:24px; display:flex; flex-direction:column; gap:11px; align-items:flex-start}
.custom-cta .btn{width:100%}
.custom-note{font-size:12.5px; color:var(--gold-lt); letter-spacing:.02em}

@media (min-width:900px){
  .custom{
    display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:44px; align-items:center;
    padding:38px 44px 40px;
  }
  .custom h3{font-size:34px}
  .custom-cta{margin-top:0; align-items:stretch}
  .custom-note{text-align:center}
}

/* ============================================================
   CHỌN THEO NGÂN SÁCH
   ============================================================ */
.bands{display:grid; gap:16px}
.band{
  border:1px solid var(--line); background:var(--white); padding:26px 24px 28px; position:relative;
  display:flex; flex-direction:column;
}
.band-best{border:1px solid var(--gold); box-shadow:var(--lift)}
.band-best::before{content:""; position:absolute; inset:5px; border:1px solid var(--line); pointer-events:none}
.band > *{position:relative}
.band-flag{
  position:absolute; top:-11px; left:24px; background:var(--gold); color:#fff;
  font-size:9.5px; letter-spacing:.13em; font-weight:700; padding:5px 13px;
}
.band-cap{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--gold); display:block; margin-bottom:7px;
}
.band h3{font-size:31px}
.band-count{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:19px;
  color:var(--red); margin-top:7px; display:block; font-variant-numeric:tabular-nums;
}
.band dl{margin:20px 0 22px; padding-top:19px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:11px}
.band .row{display:flex; gap:14px}
.band dt{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); width:88px; flex:0 0 auto; margin:0; padding-top:2px; font-weight:600}
.band dd{font-size:14px; line-height:1.5; margin:0; color:var(--ink-2)}
.band > .btn{margin-top:auto; width:100%; min-height:48px}
.bands-note{
  margin-top:26px; font-size:14px; line-height:1.6; color:var(--ink-3);
  max-width:760px; padding-left:16px; border-left:2px solid var(--gold-lt);
}

@media (min-width:900px){
  .bands{grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
  .band{padding:32px}
  .band-flag{left:32px}
  .bands-note{margin-inline:auto; text-align:left}
}

/* ============================================================
   BẢNG
   ============================================================ */
.tablewrap{
  overflow-x:auto; border:1px solid var(--line); background:var(--white);
  -webkit-overflow-scrolling:touch; box-shadow:var(--lift);
}
table{border-collapse:collapse; width:100%; min-width:580px; font-size:14.5px}
thead th{
  background:var(--lacquer); color:var(--gold-br); text-align:left; padding:14px 18px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; white-space:nowrap;
}
tbody td{padding:14px 18px; border-bottom:1px solid var(--line-2); vertical-align:top; color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--paper)}
tbody tr.hl-row{background:var(--gold-pale)}
tbody tr.hl-row td{font-weight:600; color:var(--ink)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
td.num{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:16px; color:var(--red)}
.scroll-hint{font-size:12.5px; color:var(--ink-4); margin:10px 0 0}
@media (min-width:760px){ .scroll-hint{display:none} }

.callout{
  margin-top:20px; padding:16px 20px; background:var(--white);
  border:1px solid var(--gold); border-left-width:3px; font-size:14.5px; line-height:1.55; color:var(--ink-2);
}
.callout strong{font-weight:600; color:var(--ink)}

@media (min-width:1000px){
  .disc-grid{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,2fr); gap:56px; align-items:start}
  .disc-grid .sec-head{margin-bottom:0}
}

/* ============================================================
   NĂNG LỰC
   ============================================================ */
.cap-stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:30px;
  background:var(--line-dark); border:1px solid var(--line-dark);
}
.cap-stats div{background:var(--lacquer); padding:22px 20px; display:flex; flex-direction:column; gap:6px}
.cap-stats b{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:34px; line-height:1;
  color:var(--gold-lt); font-variant-numeric:tabular-nums;
}
.cap-stats span{font-size:12px; color:#C9AB97; line-height:1.45}

.cap-figure{border:1px solid var(--gold); padding:9px; margin-top:26px; position:relative}
.cap-figure::before{content:""; position:absolute; inset:3px; border:1px solid rgba(227,197,126,.28); pointer-events:none}
.cap-figure img{width:100%; aspect-ratio:3/2; object-fit:cover}
.cap-subfigs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:13px}
.cap-subfigs figure{margin:0; border:1px solid rgba(227,197,126,.45); padding:7px}
.cap-subfigs img{width:100%; aspect-ratio:4/3; object-fit:cover}

@media (min-width:1000px){
  .cap-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:64px; align-items:center}
  .cap-figure{margin-top:0}
  .cap-stats b{font-size:42px} .cap-stats span{font-size:13px} .cap-stats div{padding:26px 26px}
}

/* ============================================================
   IN LOGO
   ============================================================ */
.logo-compare{display:grid; gap:16px; margin-top:4px}
.logo-compare figure{margin:0; border:1px solid var(--line); background:var(--white); padding:9px; box-shadow:var(--lift)}
.logo-compare img{width:100%; aspect-ratio:4/3; object-fit:cover}
.logo-compare figcaption{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--ink-4); padding:12px 2px 3px; text-align:center;
}
.opts{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:11px}
.opts li{font-size:14.5px; line-height:1.5; padding-left:28px; position:relative; color:var(--ink-2)}
.opts li::before{
  content:""; position:absolute; left:0; top:5px; width:15px; height:9px;
  border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg);
}
@media (min-width:640px){ .logo-compare{grid-template-columns:repeat(2,minmax(0,1fr))} .opts{grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ============================================================
   QUY TRÌNH
   ============================================================ */
.steps{counter-reset:s; display:grid; gap:0; border:1px solid var(--line); background:var(--white)}
.step{
  padding:20px 20px; border-bottom:1px solid var(--line-2);
  display:flex; gap:17px; align-items:flex-start;
}
.step:last-child{border-bottom:0}
.step b{
  font-family:'Playfair Display',Georgia,serif; font-size:27px; font-weight:700; line-height:1;
  width:36px; flex:0 0 auto; color:var(--gold); font-variant-numeric:tabular-nums;
}
.step-5 b{color:var(--red)}
.step-t{font-size:15.5px; font-weight:600; display:block; color:var(--ink)}
.step-d{font-size:13px; color:var(--ink-3); line-height:1.5; display:block; margin-top:4px}

@media (min-width:1000px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .step{flex-direction:column; gap:10px; border-bottom:0; border-right:1px solid var(--line-2); padding:28px 24px}
  .step:last-child{border-right:0}
  .step b{font-size:34px; width:auto}
}

/* ============================================================
   LỊCH ĐẶT HÀNG
   ============================================================ */
.deadlines{display:grid; gap:16px}
.deadline{
  border:1px solid var(--line); background:var(--white); padding:24px 24px 26px;
  display:flex; flex-direction:column; gap:8px; position:relative;
}
.deadline .eb{font-size:10.5px}
.deadline h3{font-size:27px}
.deadline p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.deadline-best{border:1px solid var(--gold); background:var(--gold-pale); box-shadow:var(--lift)}
.deadline-best::before{content:""; position:absolute; inset:5px; border:1px solid rgba(168,134,47,.3); pointer-events:none}
.deadline-best > *{position:relative}
.deadline-late{border-left:3px solid var(--red)}
@media (min-width:900px){ .deadlines{grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px} .deadline{padding:30px} }

/* ============================================================
   HỒ SƠ PHÁP LÝ
   ============================================================ */
.proof{display:grid; gap:18px}
.proof figure{margin:0; border:1px solid var(--line); background:var(--white); padding:9px; box-shadow:var(--lift)}
.proof img{width:100%; aspect-ratio:4/3; object-fit:cover}
.proof figcaption{font-size:13px; color:var(--ink-3); padding:12px 4px 3px; line-height:1.5}
.proof figcaption strong{color:var(--red); font-weight:600}
@media (min-width:760px){ .proof{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px} }

/* ============================================================
   CÂU HỎI THƯỜNG GẶP
   ============================================================ */
.faq{border:1px solid var(--line); background:var(--white)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none; cursor:pointer; padding:19px 52px 19px 20px; position:relative;
  font-size:15.5px; font-weight:600; line-height:1.45; min-height:58px; display:flex; align-items:center;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary{color:var(--red)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg); border-color:var(--red)}
.faq summary:hover{background:var(--gold-pale)}
.faq-a{padding:0 20px 20px; font-size:14.5px; line-height:1.65; color:var(--ink-2)}
.faq-a p{margin:0 0 .7em} .faq-a p:last-child{margin-bottom:0}

/* ============================================================
   FORM
   ============================================================ */
.formsec{background:var(--lacquer); padding-block:54px; position:relative; overflow:hidden}
.formsec::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-br) 40%,var(--gold) 100%);
}
.formsec h2{font-size:clamp(29px,7.2vw,46px); color:var(--paper)}
.formsec .eb{color:var(--gold-lt)}
.formsec .lead{margin:16px 0 0; font-size:16.5px; line-height:1.62; color:#E4D0C3}
.form-usp{list-style:none; margin:30px 0 0; padding:24px 0 0; border-top:1px solid var(--line-dark); display:flex; flex-direction:column; gap:13px}
.form-usp li{display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:#EBD9CB; line-height:1.45}
.form-usp svg{stroke:var(--gold-lt); flex:0 0 auto; margin-top:3px}

.formcard{
  background:var(--paper); border:1px solid var(--gold); padding:26px 22px 28px; margin-top:30px; position:relative;
}
.formcard::before{content:""; position:absolute; inset:5px; border:1px solid var(--line); pointer-events:none}
.formcard > *{position:relative}

.field{display:flex; flex-direction:column; gap:7px; margin-bottom:17px}
.field label{font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--ink-3)}
.req{color:var(--red)}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:2px; padding:14px; width:100%; min-height:52px;
  appearance:none; -webkit-appearance:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:80px; resize:vertical; line-height:1.5}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A8862F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold); box-shadow:var(--ring)}
.field input::placeholder,.field textarea::placeholder{color:#AB9884}
.field.err input,.field.err select{border-color:var(--red)}
.field-err{font-size:12.5px; color:var(--red); display:none}
.field.err .field-err{display:block}

.field-group{display:flex; flex-direction:column; gap:10px; margin-bottom:17px}
.field-group > span{font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--ink-3)}
.checks{display:flex; flex-wrap:wrap; gap:9px}
.checks input{position:absolute; opacity:0; width:1px; height:1px}
.checks label{
  font-size:13.5px; line-height:1.2; padding:12px 16px; min-height:46px; display:inline-flex; align-items:center;
  border:1px solid var(--line); background:var(--white); border-radius:2px; cursor:pointer; transition:all .15s ease;
}
.checks label:hover{border-color:var(--gold); background:var(--gold-pale)}
.checks input:checked + label{background:var(--red); border-color:var(--red); color:#fff; font-weight:500}
.checks input:focus-visible + label{box-shadow:var(--ring)}

.picked-wrap{margin-bottom:17px; padding:15px 16px; background:var(--gold-pale); border:1px solid var(--line)}
.picked-wrap > span{font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--ink-3); display:block; margin-bottom:10px}
.picked-list{display:flex; flex-wrap:wrap; gap:9px}
.picked-empty{font-size:13px; color:var(--ink-3); line-height:1.5}
.picked-chip{
  display:inline-flex; align-items:center; gap:9px; background:var(--white);
  border:1px solid var(--gold); border-radius:2px; padding:8px 8px 8px 14px; font-size:13px;
}
.picked-chip b{font-weight:600}
.picked-chip .p{color:var(--red); font-variant-numeric:tabular-nums; font-weight:600}
.picked-chip button{
  width:26px; height:26px; border:0; background:transparent; color:var(--ink-4);
  cursor:pointer; font-size:18px; line-height:1; border-radius:2px; flex:0 0 auto;
}
.picked-chip button:hover{background:var(--red-wash); color:var(--red)}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{font-size:12.5px; color:var(--ink-3); text-align:center; margin:15px 0 0; line-height:1.5}
.form-note strong{color:var(--red); font-weight:600}
.form-status{margin-top:14px; font-size:14px; line-height:1.5; padding:12px 15px; display:none}
.form-status.show{display:block}
.form-status.bad{background:var(--red-wash); border-left:3px solid var(--red); color:#7A0F14}
.btn[aria-busy="true"]{opacity:.7; pointer-events:none}

@media (min-width:1000px){
  .formsec{padding-block:86px}
  .form-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:64px; align-items:start}
  .formcard{margin-top:0; padding:40px 42px 42px}
  .field-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:17px}
  .field-2 .field{margin-bottom:0}
}

/* ============================================================
   LOGO
   ============================================================ */
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-foot{margin-bottom:18px}
.brand-mark{width:40px; height:40px; flex:0 0 auto; color:var(--gold-lt)}
.brand-text{display:flex; flex-direction:column; gap:3px}
.brand-name{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:24px; line-height:1;
  color:var(--gold-lt); letter-spacing:.09em;
}
.brand-sub{font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:#C2A276; font-weight:600; line-height:1}
@media (min-width:1000px){ .brand-mark{width:46px; height:46px} .brand-name{font-size:28px} .brand-sub{font-size:8.5px} }

/* ============================================================
   CHÂN TRANG
   ============================================================ */
.site-footer{background:var(--lacquer-deep); padding:44px 0 26px; color:#C9AB97; position:relative}
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-br) 40%,var(--gold) 100%); opacity:.8;
}
.foot-grid{display:flex; flex-direction:column; gap:28px}
.foot-col-brand{flex:1 1 auto}
.site-footer address{font-style:normal; font-size:13px; line-height:1.7}
.site-footer h4{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin:0 0 12px; font-weight:600; font-family:inherit;
}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13.5px}
.site-footer a{color:#D6BBA9} .site-footer a:hover{color:var(--gold-br)}
.foot-bottom{
  margin-top:32px; padding-top:20px; border-top:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:7px; font-size:12px; color:#9A7C6B;
}
@media (min-width:760px){ .foot-grid{flex-direction:row; gap:58px} .foot-bottom{flex-direction:row; gap:26px} }

/* ============================================================
   THANH CỐ ĐỊNH TRÊN ĐIỆN THOẠI
   ============================================================ */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--paper);
  border-top:1px solid var(--gold); padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns:54px 54px 1fr; gap:10px;
  box-shadow:0 -10px 28px -16px rgba(85,9,13,.45);
}
.stickybar a:not(.btn){display:flex; align-items:center; justify-content:center; height:50px; border:1px solid var(--line); background:var(--white); border-radius:2px}
.stickybar a:not(.btn):hover{border-color:var(--gold); background:var(--gold-pale)}
.stickybar a svg{stroke:var(--red)}
.stickybar .btn{min-height:50px; padding:0 16px; font-size:15px}
body{padding-bottom:80px}
@media (min-width:1000px){ .stickybar{display:none} body{padding-bottom:0} }

/* ============================================================
   BẢNG DANH MỤC MẪU HỘP
   ============================================================ */
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center}
.modal-scrim{position:absolute; inset:0; background:rgba(31,8,10,.76); backdrop-filter:blur(4px)}
.modal-panel{
  position:relative; background:var(--paper); width:100%; max-width:1160px; max-height:100dvh;
  display:flex; flex-direction:column; border:1px solid var(--gold); box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
}
.modal-head{
  position:sticky; top:0; z-index:2; background:var(--lacquer); color:var(--paper);
  padding:18px 58px 18px 20px; border-bottom:2px solid var(--gold);
}
.modal-head .eb{color:var(--gold-lt); display:block; margin-bottom:6px}
.modal-head h2{font-size:30px; color:var(--paper)}
.modal-head p{margin:8px 0 0; font-size:14px; color:#E4D0C3; line-height:1.5; max-width:62ch}
.modal-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:2px;
  background:transparent; border:1px solid rgba(227,197,126,.45); color:var(--gold-lt);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-close:hover{background:rgba(227,197,126,.14)}
.modal-body{padding:22px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch}
.modal-foot{
  position:sticky; bottom:0; background:var(--gold-pale); border-top:1px solid var(--gold);
  padding:13px 20px calc(13px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.modal-foot .count{font-size:14px; color:var(--ink-3)}
.modal-foot .count b{color:var(--red); font-weight:700}
.modal-foot .btn{margin-left:auto; width:auto}
body.modal-open{overflow:hidden}

@media (min-width:760px){
  .modal{padding:26px 20px; align-items:center}
  .modal-panel{max-height:calc(100dvh - 52px)}
  .modal-head{padding:24px 66px 24px 30px}
  .modal-head h2{font-size:38px}
  .modal-body{padding:28px 30px}
  .modal-foot{padding:15px 30px}
}

.pgrid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.pcard{
  background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.pcard:hover{border-color:var(--gold); box-shadow:var(--lift)}
.pcard img{width:100%; aspect-ratio:1/1; object-fit:cover}
.pcard-body{padding:17px 17px 19px; display:flex; flex-direction:column; flex:1 1 auto}
.modal-note{
  margin:26px 0 0; padding:16px 18px; background:var(--paper-2);
  border-left:3px solid var(--gold-lt); font-size:13.5px; line-height:1.62; color:var(--ink-2);
}
.pcard-group{
  font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  color:var(--gold); display:block; margin-bottom:5px;
}
.pcard h3{font-size:23px}
.pcard .price{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:20px; color:var(--red);
  margin-top:5px; display:block; font-variant-numeric:tabular-nums;
}
.pcard ul{list-style:none; margin:14px 0 0; padding:13px 0 0; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:6px}
.pcard li{font-size:12.5px; line-height:1.45; color:var(--ink-2); padding-left:14px; position:relative}
.pcard li::before{content:""; position:absolute; left:0; top:6px; width:6px; height:6px; background:var(--seal); background-size:contain; opacity:.85}
.pcard .btn{margin-top:auto; width:100%; min-height:46px; font-size:14px; padding:12px 16px}
.pcard.is-picked{border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset}

/* ============================================================
   TRANG CẢM ƠN
   ============================================================ */
.ty{min-height:84vh; display:flex; align-items:center; background:var(--lacquer); position:relative; overflow:hidden; padding-block:60px}
.ty-card{position:relative; max-width:660px; margin:0 auto; text-align:center}
.ty-mark{
  width:78px; height:78px; margin:0 auto 26px; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.ty-mark::before{content:""; position:absolute; inset:4px; border:1px solid rgba(227,197,126,.3)}
.ty h1{font-size:clamp(34px,8.5vw,54px); color:var(--paper)}
.ty p{color:#E4D0C3; font-size:16.5px; line-height:1.65; margin:20px 0 0}
.ty-next{margin:34px 0 0; padding:24px; background:rgba(253,250,244,.06); border:1px solid rgba(227,197,126,.32); text-align:left}
.ty-next h2{font-size:23px; color:var(--gold-lt)}
.ty-next ol{margin:16px 0 0; padding-left:20px; color:#EBD9CB; font-size:14.5px; line-height:1.6; display:flex; flex-direction:column; gap:9px}
.ty-next li::marker{color:var(--gold)}
.ty-actions{display:flex; flex-direction:column; gap:11px; margin-top:28px}
@media (min-width:640px){ .ty-actions{flex-direction:row; justify-content:center} }