:root{
  --serif:'Playfair Display','Times New Roman',serif;
  --sans:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Bảng màu: mực đêm, ngà, vàng đồng cổ. Ba màu, không hơn. */
  --night:#12161B;
  --night-2:#1A2028;
  --ink:#20272F;
  --ivory:#F7F3ED;
  --paper:#FFFFFF;
  --gold:#B08D5B;
  --gold-lt:#D8BC8E;
  --mute:#7E8894;
  --mute-lt:#A9B2BC;
  --hair:rgba(176,141,91,.24);
  --hair-d:rgba(255,255,255,.10);
  --hair-l:rgba(32,39,47,.11);

  --e:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,54px);

  /* Bo góc — bốn bậc, dùng nhất quán toàn trang.
     Nguyên tắc đồng tâm: khung con nằm trong khung cha thì
     bán kính con = bán kính cha trừ khoảng cách giữa hai viền.
     Bo quá tay là mất chất trang trọng; đây là mức vừa đủ để
     góc không sắc mà vẫn giữ được nét nghiêm cẩn của thiệp in. */
  --r-xs:3px;    /* khung trang trí bên trong thiệp thu nhỏ */
  --r-sm:7px;    /* thiệp thu nhỏ, ô ảnh                    */
  --r-md:11px;   /* thẻ bước, khối hỏi đáp                  */
  --r-lg:14px;   /* thẻ bảng giá, khung lớn                 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.75;
  letter-spacing:.004em; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; overflow-x:hidden}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
:focus-visible{outline:1.5px solid var(--gold); outline-offset:4px}
img{max-width:100%; display:block}

.wrap{max-width:1180px; margin-inline:auto; padding-inline:var(--gut)}

/* Thanh điều hướng cố định cao 76px. Không có dòng này thì bấm menu
   nhảy tới phần nào là tiêu đề phần đó chui hẳn xuống dưới thanh. */
section[id], div[id]{scroll-margin-top:92px}
.narrow{max-width:760px; margin-inline:auto}
section{padding:clamp(64px,11vw,132px) 0}

/* ── chữ ─────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; line-height:1.28}
/* text-wrap:balance chia đều độ dài các dòng, không để một chữ
   rơi lẻ xuống dòng cuối. Bắt buộc với tiêu đề căn giữa.
   Giãn dòng nới hơn bản trước: chữ Việt cỡ lớn có dấu chồng hai
   tầng, 1.1 và 1.22 là quá chặt ở cỡ 38px trở lên. */
h1{font-size:clamp(35px,8vw,74px); line-height:1.16; letter-spacing:-.008em;
  text-wrap:balance}
h2{font-size:clamp(27px,5.2vw,44px); line-height:1.3; letter-spacing:-.004em;
  text-wrap:balance}
h3{font-size:clamp(20px,3.4vw,26px); line-height:1.34; text-wrap:balance}
p{margin:0}
.kick{font-size:10.5px; font-weight:400; letter-spacing:.36em; text-transform:uppercase;
  line-height:1.6; color:var(--gold)}
.lede{font-size:clamp(16px,2.1vw,18.5px); line-height:1.85; color:var(--mute);
  font-weight:200; text-wrap:balance}
.on-dark{color:var(--ivory)}
.on-dark .lede{color:var(--mute-lt)}

/* đường chỉ vàng — mô típ lặp lại của cả trang */
.rule{display:flex; align-items:center; justify-content:center; gap:12px; margin:20px 0}
.rule i{height:1px; width:min(84px,18vw); background:linear-gradient(90deg,transparent,var(--gold))}
.rule i+i{background:linear-gradient(90deg,var(--gold),transparent)}
.rule b{width:4px; height:4px; rotate:45deg; background:var(--gold); flex:none}

/* ── nút ─────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 30px; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:400; border:1px solid transparent;
  transition:background .4s var(--e), color .4s var(--e), border-color .4s var(--e)}
.btn.fill{background:var(--gold); color:#1A1409}
.btn.fill:hover{background:var(--gold-lt)}
.btn.line{border-color:var(--hair); color:var(--ink)}
.btn.line:hover{border-color:var(--gold); background:rgba(176,141,91,.07)}
.btn.line.inv{color:var(--ivory); border-color:var(--hair-d)}
.btn.line.inv:hover{border-color:var(--gold-lt); background:rgba(216,188,142,.08)}

/* Liên kết bỏ qua — chỉ hiện khi người dùng nhấn Tab. Bắt buộc
   để người dùng bàn phím không phải đi hết thanh điều hướng. */
.skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:#1A1409; padding:12px 20px; font-size:14px}
.skip:focus{left:12px; top:12px}

/* ── thanh điều hướng ────────────────────────────── */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; transition:background .5s var(--e), border-color .5s var(--e)}
.nav .in{display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:76px; border-bottom:1px solid transparent; transition:border-color .5s var(--e)}
.nav.solid{background:rgba(18,22,27,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.nav.solid .in{border-bottom-color:var(--hair-d)}
.brand{font-family:var(--serif); font-size:20px; color:var(--ivory); letter-spacing:.01em; white-space:nowrap}
.brand span{color:var(--gold-lt)}
.nav menu{display:none; margin:0; padding:0; list-style:none; gap:34px; font-size:13px;
  letter-spacing:.08em; color:var(--mute-lt)}
.nav menu a{position:relative; padding-bottom:3px}
.nav menu a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-lt); transition:width .45s var(--e)}
.nav menu a:hover::after{width:100%}
.nav .btn{min-height:42px; padding:0 20px; font-size:11px}
@media(min-width:940px){ .nav menu{display:flex} }

/* ── HERO ────────────────────────────────────────── */
.hero{position:relative; min-height:100svh; display:grid; place-items:center;
  background:var(--night); color:var(--ivory); overflow:hidden; text-align:center;
  padding:120px 0 118px}   /* chừa chỗ cho chỉ dẫn cuộn phía dưới */
.hero::before{content:''; position:absolute; inset:0;
  background:
    radial-gradient(72% 46% at 50% 12%, rgba(176,141,91,.20), transparent 68%),
    radial-gradient(58% 40% at 50% 100%, rgba(176,141,91,.10), transparent 70%)}
.hero::after{content:''; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7px)}
.hero .in{position:relative; z-index:2}
.hero h1{margin-top:22px}
.hero h1 em{font-style:italic; color:var(--gold-lt)}
.hero .lede{margin:26px auto 0; max-width:32ch}
.hero .acts{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:38px}
.hero .fine{margin-top:22px; font-size:12.5px; letter-spacing:.08em; color:var(--mute);
  max-width:26ch; margin-inline:auto; line-height:1.75; text-wrap:balance}

.scroll{position:absolute; left:50%; bottom:28px; translate:-50% 0; z-index:2;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--mute);
  display:grid; justify-items:center; gap:10px}
.scroll i{width:1px; height:40px; background:linear-gradient(180deg,var(--gold),transparent);
  animation:drop 2.6s var(--e) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:top}
  56%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

/* ── thẻ thiệp thu nhỏ (dùng lại nhiều nơi) ──────── */
.mini{aspect-ratio:3/4.2; border-radius:var(--r-sm); display:grid; place-items:center;
  text-align:center; padding:8% 11%; position:relative; overflow:hidden;
  font-family:var(--serif)}
/* Viền mảnh ăn theo màu chữ của từng mẫu, nên mẫu nào cũng có mép rõ.
   Dùng lớp phủ thay vì border trực tiếp để chỉnh được độ mờ. */
.mini::after{content:''; position:absolute; inset:0; pointer-events:none;
  border:1px solid currentColor; border-radius:inherit; opacity:.18}
.mini .fr{position:absolute; inset:7%; border:1px solid currentColor; opacity:.42;
  border-radius:var(--r-xs)}
.mini .top{font-family:var(--sans); font-size:8px; letter-spacing:.3em;
  text-transform:uppercase; opacity:.85; line-height:1.6}
.mini .nm{font-size:clamp(19px,3.1vw,26px); line-height:1.24; margin:9px 0 7px}
.mini .nm em{font-style:italic; padding:0 2px}
.mini .dt{font-family:var(--sans); font-size:8.5px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.82; line-height:1.6}
.mini .orn{width:30px; height:1px; background:currentColor; opacity:.58; margin:11px auto}

.m-trieu{background:linear-gradient(168deg,#EFF6F5,#DCEBEA); color:#256670}
.m-gam{background:linear-gradient(168deg,#F4ECDD,#E9DCC4); color:#96374E}
.m-duong-ve{background:linear-gradient(168deg,#F4EFE3,#EAE2D0); color:#8F3722}
.m-dem-sao{background:linear-gradient(168deg,#0E1626,#16223A); color:#F0DFA9}
.m-hoi-xuan{background:linear-gradient(168deg,#F5F3EA,#E6E9DD); color:#9C5B52}
.m-man{background:linear-gradient(168deg,#0F0F10,#17171A); color:#D8B37A}
.m-lua-va-sen{background:linear-gradient(168deg,#1A1210,#100A09); color:#E8CF7A}
.m-mau-don{background:linear-gradient(168deg,#FBF6F3,#F2E7E2); color:#A85A63}
.m-ether{background:linear-gradient(168deg,#0B0D12,#131722); color:#9BE7DF}
.m-son-son{background:linear-gradient(168deg,#F2E9DC,#D6C3A8); color:#8C1F14}
.m-tinh{background:linear-gradient(168deg,#F2EDE2,#E6DFD0); color:#6B5522}
.m-chuyen-bay{background:linear-gradient(168deg,#0E2036,#16304C); color:#C6A15B}

/* ── lookbook cuộn ngang ─────────────────────────── */
.book{margin-top:44px; display:flex; gap:clamp(14px,2.4vw,26px); overflow-x:auto;
  padding:0 var(--gut) 10px; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none}
.book::-webkit-scrollbar{display:none}
.look{flex:none; width:clamp(212px,54vw,286px); scroll-snap-align:center}
.look.is-coming-soon{opacity:.6}
.look .mini{box-shadow:
  0 1px 2px rgba(18,22,27,.06),
  0 8px 16px -8px rgba(18,22,27,.18),
  0 34px 52px -28px rgba(18,22,27,.55)}
.look h4{font-size:18px; margin-top:16px}
.look .mood{font-family:var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); line-height:1.7; margin-top:3px}
.look .go{font-family:var(--sans); font-size:12.5px; color:var(--mute); margin-top:7px;
  display:inline-flex; align-items:center; gap:6px}
.look .go:hover{color:var(--gold)}
/* Chỉ dẫn thao tác, không phải nội dung — nhỏ lại và lùi về sau.
   Nhưng nâng độ đậm lên 400: ở cỡ 10px, weight 300 làm dấu tiếng Việt
   trong VUỐT và ĐỂ mảnh tới mức gần như biến mất. */
.swipe{text-align:center; font-size:10px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute); opacity:.72; margin-top:22px;
  display:flex; align-items:center; justify-content:center; gap:9px}
.swipe i{width:16px; height:1px; background:currentColor; display:block;
  animation:swipeArrow 2.8s var(--e) infinite}
@keyframes swipeArrow{
  0%,100%{transform:translateX(-3px); opacity:.35}
  50%    {transform:translateX(3px);  opacity:1}}

/* ── khối biên tập lệch ──────────────────────────── */
.ed{display:grid; gap:clamp(26px,4vw,54px); align-items:center}
@media(min-width:880px){
  .ed{grid-template-columns:1fr 1fr}
  .ed.flip .txt{order:2}
}
.ed .art{position:relative}
.ed .art .mini{max-width:330px; margin-inline:auto;
  box-shadow:
    0 1px 3px rgba(18,22,27,.07),
    0 10px 20px -10px rgba(18,22,27,.20),
    0 46px 68px -34px rgba(18,22,27,.6)}
.ed h2{margin-top:14px}
.ed .lede{margin-top:16px}
.ed + .ed{margin-top:clamp(58px,9vw,102px)}

/* ── danh sách tính năng kiểu biên tập ───────────── */
.feats{margin-top:40px; border-top:1px solid var(--hair-d)}
.feat{display:grid; gap:6px 26px; padding:24px 0; border-bottom:1px solid var(--hair-d)}
@media(min-width:760px){ .feat{grid-template-columns:56px 1fr 1.1fr; align-items:baseline} }
.feat .no{font-family:var(--serif); font-size:19px; color:var(--gold)}
.feat h3{font-size:21px}
.feat p{font-size:14.5px; line-height:1.8; color:var(--mute-lt)}

/* ── quy trình ───────────────────────────────────── */
.steps{margin-top:44px; display:grid; gap:12px}
@media(min-width:820px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{background:var(--paper); padding:30px 24px 34px; position:relative;
  border-radius:var(--r-md)}
.step .no{font-family:var(--serif); font-size:34px; color:var(--hair); line-height:1}
.step h3{font-size:19px; margin:12px 0 7px}
.step p{font-size:14px; line-height:1.75; color:var(--mute)}

/* ── bảng giá ────────────────────────────────────── */
.tiers{margin-top:46px; display:grid; gap:16px}
@media(min-width:900px){ .tiers{grid-template-columns:repeat(3,1fr); align-items:start} }
.tier{background:var(--paper); padding:36px 30px 32px; border:1px solid var(--hair-l);
  position:relative; border-radius:var(--r-lg); overflow:hidden}
.tier.hi{border-color:var(--gold); padding-top:44px;
  box-shadow:0 30px 60px -40px rgba(176,141,91,.85)}
.tier .flag{position:absolute; top:0; left:0; right:0; text-align:center;
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; line-height:1;
  padding:9px 0; background:var(--gold); color:#1A1409}
.tier .nm{font-family:var(--serif); font-size:25px}
/* Giá trần — gạch ngang, nhỏ và mờ, đặt TRÊN giá bán.
   Đặt trên chứ không đặt cạnh: mắt đọc từ trên xuống nên thấy giá
   cũ trước, giá mới sau, cảm nhận được mức giảm mà không cần bảng
   so sánh. Đặt cạnh nhau là ngôn ngữ của sàn thương mại điện tử. */
.tier .was{font-size:15px; color:var(--mute); margin-top:9px; line-height:1.5;
  text-decoration:line-through; text-decoration-thickness:1px;
  text-underline-offset:2px; opacity:.8;
  font-variant-numeric:lining-nums tabular-nums}
.tier .was:empty{display:none}
.tier .amt{font-family:var(--serif); font-size:42px; line-height:1.15; margin:2px 0 2px;
  font-variant-numeric:lining-nums tabular-nums}
.tier .save{display:inline-block; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; line-height:1.6; margin-left:9px; vertical-align:middle;
  padding:2px 9px; border-radius:999px; background:rgba(176,141,91,.14);
  color:var(--gold); font-family:var(--sans)}
.tier .save:empty{display:none}
.tier .amt sup{font-size:16px; vertical-align:super; color:var(--mute); margin-left:2px}
.tier .sub{font-size:13px; color:var(--mute); letter-spacing:.04em}
.tier ul{list-style:none; margin:26px 0 30px; padding:0; font-size:14.5px}
.tier li{padding:9px 0; border-top:1px solid var(--hair-l); color:var(--mute); line-height:1.65}
.tier li:first-child{border-top:0}
.tier .btn{width:100%}
.cmp{margin-top:26px; text-align:center; font-size:14px; color:var(--mute);
  max-width:46ch; margin-inline:auto; line-height:1.8}

/* ── hỏi đáp ─────────────────────────────────────── */
.qa{margin-top:38px; background:var(--paper); border:1px solid var(--hair-l);
  border-radius:var(--r-md); overflow:hidden; padding:0 22px}
.qa details{border-bottom:1px solid var(--hair-l)}
.qa details:last-child{border-bottom:0}
.qa summary{list-style:none; cursor:pointer; padding:21px 0; display:flex;
  align-items:baseline; gap:18px; font-family:var(--serif); font-size:19px}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1}
.qa summary i{font-family:var(--sans); font-size:18px; color:var(--gold); flex:none;
  transition:rotate .4s var(--e); line-height:1}
.qa details[open] summary i{rotate:45deg}
.qa .ans{padding:0 0 22px; font-size:15px; line-height:1.85; color:var(--mute); max-width:62ch}

/* ── kết ─────────────────────────────────────────── */
.fin{background:var(--night); color:var(--ivory); text-align:center; position:relative; overflow:hidden}
.fin::before{content:''; position:absolute; inset:0;
  background:radial-gradient(64% 52% at 50% 50%, rgba(176,141,91,.17), transparent 70%)}
.fin .in{position:relative; z-index:2}
.fin h2{max-width:17ch; margin-inline:auto}

footer{background:var(--night-2); color:var(--mute); padding:44px 0 52px; font-size:13px}
footer .in{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
footer a:hover{color:var(--gold-lt)}

/* ── hiện dần ────────────────────────────────────── */
.rv{opacity:0; transform:translateY(22px); transition:opacity 1s var(--e), transform 1s var(--e)}
.rv.in{opacity:1; transform:none}
/* Màn hình thấp (iPhone SE dựng ngang, cửa sổ nhỏ): bỏ chỉ dẫn cuộn.
   Ở đó nó vừa thừa vừa dễ chạm vào nội dung phía trên. */
@media (max-height:680px){
  .scroll{display:none}
  .hero{padding-bottom:72px}
}

/* Tinh chỉnh cho điện thoại: lề trang rộng thêm một chút để chữ
   không dính mép, và câu dẫn hẹp lại cho dễ đọc. */
@media (max-width:420px){
  :root{--gut:22px}
  .lede{font-size:15.5px; line-height:1.8}
  .hero .acts .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ── bộ sưu tập: lưới ba cột trên máy tính ────────
   Dải cuộn ngang giữ nguyên cho điện thoại. Từ 900px trở lên
   máy tính không vuốt được và không có nút mũi tên, nên tám
   trong mười hai mẫu không có đường nào tới. Chuyển sang lưới
   cuộn dọc: mười hai mẫu thành bốn hàng, thấy hết.
   overflow:visible để bóng đổ của .mini không bị cắt.
   max-width khớp .wrap vì .book nằm ngoài .wrap, có lề riêng. */
@media (min-width:900px){
  .book{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(30px,3.2vw,46px) clamp(22px,2.6vw,36px);
    overflow:visible;
    scroll-snap-type:none;
    max-width:1180px;
    margin-inline:auto;
    padding:0 var(--gut);
  }
  .look{width:auto}
  /* Chỉ dẫn "vuốt ngang" là sai trên máy tính — làm theo không
     có gì xảy ra. Chỉ ẩn ở đây, điện thoại vẫn thấy. */
  .swipe{display:none}
}

/* ── bộ sưu tập: đóng khung giấy (chỉ máy tính) ───
   Mười hai mẫu trải từ #DCEBEA tới #0B0D12 — gần hết dải sáng tối.
   Trong lưới, ô nhạt chìm vào nền ngà còn ô tối nhảy ra như khối
   đặc. Không nền đơn nào phục vụ được cả hai đầu: đổi nền tối thì
   vấn đề đảo chiều chứ không mất.
   Cách xử: cho mỗi ô một tấm giấy giống hệt nhau — cùng lề, cùng
   bo góc, cùng bóng. Mắt bắt được hằng số ấy trước, rồi mới thấy
   màu bên trong, nên mười hai màu thành một bộ.
   Giấy #FDFCFA ngả kem chứ không trắng tinh: trắng tinh cạnh nền
   ngà #F7F3ED trông lạnh. Lề mảnh 10-13px để tấm thiệp giữ được
   chỗ — lề dày đẩy khu này thành lưới sản phẩm.
   CHỈ áp dụng từ 900px: ở điện thoại các ô vuốt qua từng cái một,
   không đứng cạnh nhau, nên không có sự lộn xộn cần đóng khung. */
@media (min-width:900px){
  .look{
    background:#FDFCFA;
    padding:clamp(10px,1.1vw,13px);
    border-radius:9px;
    box-shadow:
      0 1px 2px rgba(18,22,27,.04),
      0 8px 18px -12px rgba(18,22,27,.16),
      0 28px 46px -34px rgba(18,22,27,.22);
    transition:transform .5s var(--e), box-shadow .5s var(--e);
  }
  /* Thiệp thu nhỏ giờ nằm trên giấy chứ không trên nền trang, nên
     bóng đổ nhẹ hẳn đi — bóng cũ dựng cho nền ngà, đặt trên giấy
     sáng sẽ thành vệt xám. */
  .look .mini{
    box-shadow:
      0 1px 2px rgba(18,22,27,.08),
      0 5px 12px -7px rgba(18,22,27,.14);
  }
  .look h4{margin-top:14px}
  .look:hover{
    transform:translateY(-3px);
    box-shadow:
      0 1px 3px rgba(18,22,27,.05),
      0 14px 28px -14px rgba(18,22,27,.20),
      0 40px 64px -40px rgba(18,22,27,.28);
  }
}

/* ── bộ sưu tập: khung giấy trên điện thoại ───────
   Cùng tấm giấy như máy tính, lề mảnh hơn: 8px thay vì 10-13px.
   Ở ô rộng ~210px thì 8px mỗi bên chỉ lấy khoảng 4% chiều ngang
   tấm thiệp — đủ thấy mép giấy mà không làm thiệp chật.
   Ngoài việc thống nhất với máy tính, mép giấy còn cho mắt một mốc
   để bám khi vuốt: não nhận ra hết một tấm sang tấm khác dễ hơn là
   khi chỉ có màu nền đổi đột ngột. */
@media (max-width:899px){
  .look{
    background:#FDFCFA;
    padding:8px;
    border-radius:9px;
    box-shadow:
      0 1px 2px rgba(18,22,27,.04),
      0 8px 18px -12px rgba(18,22,27,.16),
      0 28px 46px -34px rgba(18,22,27,.22);
  }
  .look .mini{
    box-shadow:
      0 1px 2px rgba(18,22,27,.08),
      0 5px 12px -7px rgba(18,22,27,.14);
  }
  .look h4{margin-top:12px}
}