/* KINKAY — stylesheet dùng chung cho CÁC TRANG CON (subpage).
   12/08/2026 (đợt A-B-C).

   Vì sao tách file thay vì inline như index.html:
   trang chủ có <style> inline vì nó là MỘT trang. Từ đợt B trở đi site có thêm 9 trang con
   (4 trang dịch vụ, before-after, đối tác, faq, EN, quà tặng). Inline 9 lần nghĩa là mỗi lần
   đổi màu nút phải sửa 9 chỗ — kiểu gì cũng lệch. File này là nguồn duy nhất.

   CSP: style-src 'self' cho phép file css cùng domain, không cần sửa gì thêm.
   Trang chủ KHÔNG dùng file này (giữ nguyên inline) để không rủi ro đụng vào trang mạnh nhất.

   Biến màu và font copy nguyên từ index.html — phải khớp, nếu không hai nửa site sẽ lệch tông.
*/
:root{
  --cream:#FAF7F2; --espresso:#2C1810; --gold:#C4A882; --taupe:#8B6B52;
  --sand:#E8DDD0; --ink:#1A0F08; --paper:#FDFAF6;
  /* 13/08/2026 — --gold-ink: bản gold ĐẬM HƠN, dùng cho CHỮ nằm trên nền sáng.
     Đo được: gold #C4A882 trên nền cream chỉ đạt 2.12:1, dưới chuẩn WCAG AA (4.5:1) rất xa —
     mà đó lại đúng là màu của mọi dòng eyebrow nhỏ in hoa giãn chữ, tức là loại chữ khó đọc nhất.
     #876334 đạt 5.09:1 trên cream và 5.22:1 trên paper, vẫn nằm trong họ vàng-đồng của thương hiệu.
     --gold GIỮ NGUYÊN cho chữ trên nền tối (7.44:1 trên espresso) và cho mọi mảng nền, viền, nút. */
  --gold-ink:#876334;
  --display:'Playfair Display','Times New Roman',serif;
  --body:'Be Vietnam Pro',-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-weight:300;background:var(--cream);color:var(--espresso);line-height:1.7}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:500}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
.eyebrow{font-size:11.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold-ink);font-weight:400}
.section{padding:88px 0}
.section.tight{padding:60px 0}
.section-head{text-align:center;margin-bottom:52px}
.section-head h2{font-size:clamp(27px,3.8vw,40px);letter-spacing:.04em;margin-top:12px}
.section-head p{max-width:60ch;margin:16px auto 0;color:var(--taupe);font-size:15px}
.alt{background:var(--paper)}
/* nav dính trên đầu (position:sticky) nên link neo #form, #gia... phải chừa chỗ,
   không thì tiêu đề section bị thanh nav che mất một nửa. */
section[id],header[id]{scroll-margin-top:84px}
.dark{background:var(--espresso);color:var(--sand)}
.dark h2,.dark h3{color:var(--sand)}
.dark p{color:rgba(232,221,208,.82)}
/* Chỉ .dark (nền espresso) mới quay lại gold sáng. .strip nền --sand là nền SÁNG,
   eyebrow ở đó phải giữ --gold-ink như mặc định. */
.dark .eyebrow{color:var(--gold)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* WORDMARK */
.wordmark{display:inline-block;text-align:center;line-height:1;font-family:var(--display)}
.wordmark .wm-name{font-size:1em;letter-spacing:.4em;text-indent:.4em;white-space:nowrap}
.wordmark .wm-rule{display:block;width:72%;height:1px;background:var(--gold);margin:.42em auto .38em}
.wordmark .wm-sub{font-size:.26em;letter-spacing:.5em;text-indent:.5em;text-transform:uppercase;
  white-space:nowrap;color:var(--gold);font-family:var(--body);font-weight:300}

/* ==========================================================================
   NAV — thiết kế lại 12/08/2026 (đợt D).

   BỐI CẢNH: trước đó nav là của một trang one-page (6 mục trỏ tới các neo trên
   trang chủ), trong khi site đã có 13 trang. Trang chủ và trang con lại có hai
   bộ menu KHÁC NHAU, nên khách nhảy qua lại là mất phương hướng.

   Giờ: MỘT nav duy nhất, giống hệt trên mọi trang.
     Dịch vụ ▾ · Portfolio ▾ · Về Kay · Học 1:1 · Blog · [Đặt lịch]
   Hai menu xổ chứa toàn bộ trang còn lại, kèm giá — vì giá là thứ khách hỏi đầu tiên.

   BẪY ĐÃ SỬA (nguyên nhân vụ vỡ giao diện 12/08): trước đây khai `nav{...}` bằng
   selector THẺ TRẦN, nên mọi thẻ <nav> trong trang — kể cả dải link trong footer —
   đều ăn `position:fixed;top:0`. Giới hạn xuống `body>nav` để chuyện đó không lặp lại.
   ========================================================================== */

/* ribbon Masterclass — phễu riêng, tách khỏi hero để không tranh nút đặt lịch */
.topbar{background:var(--espresso);color:var(--gold);text-align:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:7px 16px}
.topbar a{border-bottom:1px solid rgba(196,168,130,.45);padding-bottom:2px}
.topbar a:hover{color:var(--sand);border-bottom-color:var(--sand)}

body>nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:15px 30px;background:rgba(250,247,242,.97);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(44,24,16,.1)}
body>nav .brand{font-family:var(--display);font-size:19px;letter-spacing:.32em;text-indent:.32em;color:var(--espresso)}
body>nav ul{display:flex;gap:4px;list-style:none;align-items:center}
body>nav ul>li{position:relative}
body>nav ul a,body>nav .sub-t{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--espresso);transition:color .25s;padding:9px 13px;background:none;border:none;
  font-family:inherit;font-weight:400;cursor:pointer;white-space:nowrap}
body>nav ul a:hover,body>nav .sub-t:hover{color:var(--gold)}
.sub-t .cv{display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);transition:transform .25s}
.has-sub[data-open="1"] .sub-t .cv{transform:rotate(-135deg)}

/* menu xổ */
.navsub{position:absolute;top:100%;left:0;min-width:290px;background:var(--paper);
  border:1px solid rgba(44,24,16,.14);box-shadow:0 14px 34px rgba(44,24,16,.13);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s}
.has-sub[data-open="1"] .navsub{opacity:1;visibility:visible;transform:none}
/* 13/08/2026: menu xổ nằm sát mép phải (mục "Về Kay") tràn khỏi màn hình 48px và
   đẻ ra thanh cuộn ngang trên MỌI trang. JS đo rồi gắn .flip để neo về bên phải.
   max-width là lưới an toàn cho màn hẹp, phòng khi JS chưa kịp chạy. */
.has-sub.flip .navsub{left:auto;right:0}
.navsub{max-width:calc(100vw - 32px)}
.navsub a{display:flex!important;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 14px!important;text-transform:none!important;letter-spacing:0!important;
  font-size:14.5px!important;transition:background .2s,color .2s}
.navsub a:hover{background:var(--cream)}
.navsub a b{font-weight:400}
.navsub a i{font-style:normal;font-size:12px;color:var(--taupe);white-space:nowrap}
.navsub a:hover i{color:var(--gold-ink)}
.navsub .navsub-more{border-top:1px solid rgba(44,24,16,.12);margin-top:5px;padding-top:12px!important;
  font-size:12.5px!important;color:var(--taupe)}

/* nút Đặt lịch trên nav — hộp duy nhất được phép tồn tại ở đây */
.nav-book{background:var(--gold);color:var(--ink)!important;padding:10px 20px!important;border-radius:2px;
  transition:background .28s,color .28s;letter-spacing:.1em!important}
.nav-book:hover{background:var(--espresso);color:var(--sand)!important}

.burger{display:none;background:none;border:none;font-size:22px;color:var(--espresso);cursor:pointer;line-height:1}

@media(max-width:980px){
  body>nav{padding:13px 18px}
  body>nav ul{position:fixed;top:0;right:-100%;height:100vh;width:80vw;max-width:340px;
    background:var(--ink);flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:0;padding:88px 22px 30px;transition:right .35s;z-index:55;overflow-y:auto}
  body>nav ul.open{right:0}
  body>nav ul a,body>nav .sub-t{color:var(--cream)!important;font-size:14px;padding:14px 2px;
    letter-spacing:.12em;width:100%;text-align:left}
  body>nav ul>li{border-bottom:1px solid rgba(232,221,208,.14)}
  /* menu xổ trên mobile là accordion, không phải hộp bay */
  .navsub{position:static;min-width:0;background:none;border:none;box-shadow:none;padding:0;
    display:none;opacity:1;visibility:visible;transform:none}
  .has-sub[data-open="1"] .navsub{display:block}
  .navsub a{padding:11px 14px!important;font-size:14px!important;color:rgba(232,221,208,.8)!important}
  .navsub a:hover{background:rgba(250,247,242,.06)}
  .navsub a i{color:var(--gold)}
  .navsub a:hover i{color:var(--gold)}
  .navsub .navsub-more{border-top-color:rgba(232,221,208,.16)}
  .nav-book{display:inline-block;margin-top:18px;text-align:center}
  body>nav ul>li:last-child{border-bottom:none}
  .burger{display:block;z-index:60}
}

/* PAGE HERO — gọn, chữ là chính. Không dùng ảnh nền full-bleed để trang con tải nhanh. */
.phero{padding:70px 0 56px;text-align:center;background:var(--paper);border-bottom:1px solid rgba(44,24,16,.08)}
.phero h1{font-size:clamp(30px,5vw,50px);line-height:1.18;letter-spacing:.02em;margin:14px auto 0;max-width:17ch}
.phero .lede{max-width:62ch;margin:20px auto 0;color:var(--taupe);font-size:16px}
.phero .pbtns{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.crumb{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.crumb a:hover{color:var(--gold-ink)}
.crumb .sep{padding:0 8px;opacity:.5}

/* ==========================================================================
   NÚT — ba cấp, thiết kế lại 12/08/2026 (đợt D).

   VẤN ĐỀ CŨ: trong một khung hình có tới 4-5 khối hộp cùng trọng lượng (nút nav,
   nút EN, nút chính, nút phụ, pill Masterclass). Không có cấp bậc thì mắt không
   biết bấm đâu, và tổng thể trông rẻ.

   LUẬT: mỗi màn hình CHỈ MỘT nút cấp 1. Cái thứ hai phải là chữ, không phải hộp.
     .btn        cấp 1 — hộp đặc, hành động chính
     .btn-ghost  cấp 2 — CHỮ có gạch chân mảnh (trước đây là hộp — đổi ở đây thì
                 toàn bộ trang con tự nâng cấp theo, không phải sửa 10 file HTML)
     .btn-line   cấp 3 — viền mảnh, chỉ dùng cho hành động phụ cuối section

   Letter-spacing giảm từ .2em xuống .14em: chữ giãn quá rộng trên nút nhỏ là thứ
   làm nút trông kéo dãn và thiếu tinh.
   ========================================================================== */
.btn{display:inline-block;background:var(--gold);color:var(--ink);padding:15px 34px;border-radius:2px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:none;cursor:pointer;
  font-family:inherit;font-weight:400;line-height:1.2;
  transition:background .28s,color .28s,transform .28s}
.btn:hover{background:var(--espresso);color:var(--sand);transform:translateY(-1px)}

.btn-ghost{background:none;color:var(--taupe);border:none;border-radius:0;padding:15px 2px;
  border-bottom:1px solid rgba(196,168,130,.75);letter-spacing:.08em;text-transform:none;
  font-size:14px;transition:color .25s,border-color .25s}
.btn-ghost:hover{background:none;color:var(--espresso);border-bottom-color:var(--espresso);transform:none}

.btn-line{display:inline-block;border:1px solid rgba(196,168,130,.6);color:var(--taupe);
  padding:11px 24px;border-radius:2px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .28s,color .28s,border-color .28s}
.btn-line:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.dark .btn-line{color:var(--sand)}
.dark .btn-line:hover{color:var(--ink)}
.dark .btn-ghost{color:var(--sand)}
.dark .btn-ghost:hover{color:#fff;border-bottom-color:#fff}

/* CARD GRID dùng chung */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Nền thẻ phải NGƯỢC với nền section, nếu không thẻ tàng hình chỉ còn viền.
   Đây đúng loại lỗi đã xảy ra 10/08 (giá espresso trên nền espresso) — lần đó DOM có đủ chữ
   nhưng mắt không thấy gì. Nên ở đây khai luôn cả hai chiều thay vì để mặc định một màu. */
.card{background:var(--paper);border:1px solid rgba(44,24,16,.14);padding:30px 26px;transition:transform .3s,border-color .3s}
.alt .card{background:var(--cream)}
.alt .pitem{background:var(--cream)}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card h3{font-size:21px;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--taupe)}
.card .price{margin-top:14px;padding-top:12px;border-top:1px solid rgba(44,24,16,.12);
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe)}
.card .price b{color:var(--espresso);font-weight:500}
.dark .card{background:rgba(250,247,242,.05);border-color:rgba(232,221,208,.2)}
.dark .card p{color:rgba(232,221,208,.78)}
.dark .card .price{border-top-color:rgba(232,221,208,.22);color:var(--gold)}

/* BẢNG GIÁ */
.ptable{width:100%;border-collapse:collapse;font-size:15px}
.ptable th,.ptable td{text-align:left;padding:16px 12px;border-bottom:1px solid rgba(44,24,16,.12);vertical-align:top}
.ptable th{font-family:var(--body);font-weight:400;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe)}
.ptable td.num{white-space:nowrap;font-weight:400;color:var(--espresso)}
.ptable tr:last-child td{border-bottom:none}
.ptable .sub{display:block;font-size:13px;color:var(--taupe);margin-top:4px}
@media(max-width:620px){
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%}
  .ptable thead{display:none}
  .ptable tr{border-bottom:1px solid rgba(44,24,16,.12);padding:14px 0}
  .ptable td{border:none;padding:3px 0}
  .ptable td.num{color:var(--taupe);font-size:14px}
}

/* QUY TRÌNH (numbered steps) */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.step{padding:34px 26px;background:var(--cream);border-top:2px solid var(--gold)}
.step .num{font-family:var(--display);font-size:34px;color:var(--gold-ink);line-height:1}
.step h3{font-size:19px;margin:10px 0 8px}
.step p{font-size:14.5px;color:var(--taupe)}
.alt .step{background:var(--paper)}

/* TIMELINE dọc — dùng cho quy trình bridal nhiều mốc */
.tl{max-width:720px;margin:0 auto;border-left:1px solid rgba(196,168,130,.55);padding-left:26px}
.tl .tli{position:relative;padding-bottom:30px}
.tl .tli:last-child{padding-bottom:0}
.tl .tli::before{content:"";position:absolute;left:-32px;top:8px;width:11px;height:11px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--cream)}
.alt .tl .tli::before{box-shadow:0 0 0 4px var(--paper)}
.tl .when{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.tl h3{font-size:19px;margin:5px 0 6px}
.tl p{font-size:14.5px;color:var(--taupe)}

/* FAQ — dùng <details> để không cần JS, và Google đọc được nội dung trong HTML thô */
.faq{max-width:820px;margin:0 auto;border-top:1px solid rgba(44,24,16,.14)}
.faq details{border-bottom:1px solid rgba(44,24,16,.14)}
.faq summary{cursor:pointer;padding:20px 34px 20px 2px;font-family:var(--display);font-size:18.5px;
  line-height:1.45;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:19px;font-size:22px;color:var(--gold-ink);
  font-family:var(--body);font-weight:300;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 34px 22px 2px;font-size:15px;color:var(--taupe)}
.faq .ans p+p{margin-top:12px}
.faq .ans a{border-bottom:1px solid var(--gold)}

/* TESTIMONIAL có ảnh + tên */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.tq{background:var(--paper);border-top:2px solid var(--gold);padding:34px 28px 26px;position:relative}
.tq::before{content:"”";position:absolute;top:8px;right:20px;font-family:var(--display);
  font-size:56px;color:var(--gold);opacity:.42;line-height:1}
.tq p{font-size:15.5px;line-height:1.7;font-style:italic;font-family:var(--display)}
.tq .by{display:flex;align-items:center;gap:12px;margin-top:20px}
.tq .by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.tq .by .nm{font-size:14px;color:var(--espresso)}
.tq .by .oc{font-size:12px;color:var(--taupe);letter-spacing:.06em}
.tq .shot{margin-top:18px;border:1px solid rgba(44,24,16,.14);max-width:100%}

/* ĐỐI TÁC */
.plist{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.pitem{border:1px solid rgba(44,24,16,.14);padding:22px 22px;background:var(--paper)}
.pitem .cat{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.pitem h3{font-size:18px;margin:7px 0 6px}
.pitem p{font-size:13.5px;color:var(--taupe)}
.pitem .lk{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--taupe);
  border-bottom:1px solid rgba(196,168,130,.6);padding-bottom:1px}
.pitem .lk:hover{color:var(--espresso)}

/* FORM đặt lịch */
.lead-form{max-width:720px;margin:0 auto;text-align:left}
.ff{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.full{grid-column:1/-1}
.fld label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.fld input,.fld select,.fld textarea{font-family:inherit;font-size:15px;font-weight:300;color:var(--espresso);
  background:var(--paper);border:1px solid rgba(44,24,16,.2);border-radius:2px;padding:12px 13px;
  transition:border-color .22s;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold)}
.fld textarea{resize:vertical;min-height:84px}
.fld .req{color:var(--gold-ink)}
.form-actions{margin-top:22px;text-align:center}
.form-note{font-size:12.5px;color:var(--taupe);margin-top:14px;text-align:center}
.form-msg{margin-top:16px;padding:15px 18px;border:1px solid var(--gold);background:var(--paper);
  font-size:14.5px;line-height:1.65;display:none}
.form-msg.on{display:block}
.form-msg b{font-weight:500}
.form-err{border-color:#b4483c;color:#8f3025}
.dark .fld input,.dark .fld select,.dark .fld textarea{background:rgba(250,247,242,.06);
  border-color:rgba(232,221,208,.28);color:var(--sand)}
.dark .fld label{color:rgba(232,221,208,.7)}
@media(max-width:620px){.ff{grid-template-columns:1fr}}

/* GALLERY lưới ảnh đơn giản */
.ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.ggrid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}

/* BEFORE / AFTER — copy từ trang chủ để hai nơi hiển thị giống nhau */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,320px));gap:18px;
  justify-content:center;max-width:1000px;margin:0 auto}
.ba-w{margin:0}
.ba{position:relative;overflow:hidden;border:1px solid rgba(44,24,16,.18);background:var(--paper)}
.ba img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;-webkit-user-drag:none;user-select:none}
.ba .ba-top{position:absolute;inset:0;height:100%;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba .ba-bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#FAF7F2;
  box-shadow:0 0 8px rgba(0,0,0,.4);pointer-events:none}
.ba .ba-knob{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:34px;height:34px;
  border-radius:50%;background:#FAF7F2;color:var(--espresso);display:flex;align-items:center;justify-content:center;
  font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none}
.ba .ba-lbl{position:absolute;bottom:10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(26,15,8,.55);color:#FAF7F2;padding:4px 9px;pointer-events:none}
.ba .ba-lbl.b{left:10px}.ba .ba-lbl.a{right:10px}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:none}
.ba-cap{font-size:12.5px;color:var(--taupe);padding:10px 2px 0;text-align:center}
.ba-empty{text-align:center;color:var(--taupe);font-size:15px;max-width:52ch;margin:0 auto}

/* VIDEO nhúng dọc (TikTok/Reels tự host) */
.vrow{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.vcell{flex:0 0 230px}
.vcell video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:2px;background:var(--espresso)}
.vcell .vcap{font-size:12.5px;color:var(--taupe);text-align:center;padding-top:8px}
@media(max-width:620px){.vcell{flex:0 0 44vw}}

/* CTA dải */
.strip{background:var(--sand);text-align:center;padding:66px 20px}
.strip h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:12px}
.strip p{color:var(--taupe);max-width:52ch;margin:0 auto 26px;font-size:15px}
.strip .hint{font-size:12.5px;margin-top:14px;margin-bottom:0}

/* LIST tick */
.ticks{list-style:none;display:grid;gap:11px;max-width:640px;margin:0 auto}
.ticks li{display:flex;gap:12px;font-size:15px;color:var(--taupe);align-items:flex-start}
.ticks li::before{content:"✦";color:var(--gold-ink);flex:0 0 auto;font-size:12px;line-height:1.7}
.dark .ticks li{color:rgba(232,221,208,.82)}

/* ==========================================================================
   FOOTER — xếp cột, 12/08/2026 (đợt D).
   Trước đó là MỘT dòng 13 link chạy ngang, cắt hai hàng, không nhóm gì cả —
   đúng nghĩa "nồi lẩu". Giờ chia theo ý định của người đọc.
   ========================================================================== */
.fwrap{max-width:1100px;margin:0 auto;padding:0 20px;display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;text-align:left}
.fcol h4{font-family:var(--body);font-weight:400;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.fcol a{display:block;font-size:13px;line-height:2.15;color:rgba(232,221,208,.72);transition:color .22s}
.fcol a:hover{color:var(--sand)}
.fbrand .wordmark{font-size:24px;color:var(--sand);margin-bottom:14px}
.fbrand p{font-size:13px;line-height:1.8;color:rgba(232,221,208,.6);max-width:30ch}
.fbrand .fch{margin-top:16px}
.fbrand .fch a{display:block;font-size:13px;line-height:2.1;color:rgba(232,221,208,.72)}
.fbrand .fch a:hover{color:var(--sand)}
.fbase{max-width:1100px;margin:44px auto 0;padding:22px 20px 0;
  border-top:1px solid rgba(232,221,208,.14);text-align:center}
@media(max-width:860px){
  .fwrap{grid-template-columns:1fr 1fr;gap:28px}
  .fbrand{grid-column:1/-1}
}
@media(max-width:520px){.fwrap{grid-template-columns:1fr}}

/* FOOTER */
footer{background:var(--ink);color:var(--taupe);text-align:center;padding:52px 20px 60px}
footer .wordmark{font-size:26px;color:var(--sand);margin-bottom:18px}
footer .fline{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase}
footer .foot-owner{margin-top:16px;font-size:11px;letter-spacing:.06em;line-height:1.9;
  max-width:640px;margin-left:auto;margin-right:auto}
footer .foot-links{margin-top:12px;font-size:11.5px;letter-spacing:.12em}
footer .foot-links a{border-bottom:1px solid rgba(139,107,82,.5);padding-bottom:2px}
footer .foot-links a:hover{color:var(--sand);border-bottom-color:var(--sand)}
footer .foot-links .sep{padding:0 10px;opacity:.6}
footer .foot-nav{margin-top:20px;font-size:12px;line-height:2.1;letter-spacing:.06em;
  max-width:760px;margin-left:auto;margin-right:auto}
footer .foot-nav a{opacity:.85}
footer .foot-nav a:hover{color:var(--sand);opacity:1}
footer .foot-nav .sep{padding:0 8px;opacity:.45}