/* ============================================================
   V5 — "SÁNG RỰC" · Inner Harmony
   Tông sáng nền vàng be theo họp 08/09 (anh Lâm + chị Khanh)
   Nạp SAU styles.css. Tái hiện bộ thành phần V4 trên nền sáng.
   Token hoá để swap brand kit mới (logo xanh-vàng + font Bí Nhi).
   ============================================================ */
:root{
  /* ---- TOKEN BRAND (swap khi có brand kit mới) ---- */
  --bg:#efecdc;             /* nền vàng be chủ đạo */
  --bg-soft:#f6f3e7;        /* băng section nhạt hơn */
  --card:#ffffff;           /* thẻ */
  --card-warm:#fbf9f0;
  --ink:#0c344d;            /* chữ chính: navy */
  --ink-soft:rgba(12,52,77,0.8);
  --ink-mute:rgba(12,52,77,0.58);
  --line:rgba(12,52,77,0.14);
  --line-soft:rgba(12,52,77,0.07);
  --teal:#0b7784;
  --teal-deep:#074a52;
  --turquoise:#71d3c7;
  --gold:#d3b070;
  --gold-deep:#b8934f;
  --terracotta:#9c6145;
  --navy:#0c344d;
  --serif:'Playfair Display',Georgia,serif;   /* chốt 25/09/2026: Playfair + Montserrat (brand font Rottaries/Gotham không có tiếng Việt) */
  --sans:'Montserrat',system-ui,sans-serif;
  /* token tương thích các trang V4 chuyển sang */
  --panel:#f3efe0;
  --panel-solid:#ffffff;
  --navy-panel:#0c344d;
  --ground:#efecdc;
  --cream:#efecdc;
  --cream-warm:#e5e0c8;
  --sage:#71d3c7;
  --sage-pale:#dff2ee;
  --gold-soft:#e0c694;
  --terracotta-deep:#6e4530;
  --v5-ease:cubic-bezier(0.22,1,0.36,1);
}
html{background:#e7e3cf;}
body{background:var(--bg);color:var(--ink-soft);font-family:var(--sans);}
::selection{background:var(--gold);color:var(--navy);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* ============ THANH TIỆN ÍCH + NAV 8 TAB (chữ lớn) ============ */
.topbar{
  background:var(--navy);color:rgba(245,240,230,0.85);
  font-size:12.5px;letter-spacing:0.03em;
}
.topbar .wrap{display:flex;justify-content:space-between;gap:14px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;}
.topbar a{color:rgba(245,240,230,0.85);}
.topbar a:hover{color:#fff;}
.topbar .left,.topbar .right{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
@media(max-width:720px){.topbar .right{display:none;}}

.navwrap{position:sticky;top:0;z-index:60;background:rgba(239,236,220,0.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.kinh{
  max-width:1240px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;height:84px;
  background:transparent;border:none;border-radius:0;box-shadow:none;
}
.kinh .logo img{height:52px !important;width:auto !important;}
/* [CHỜ: logo xanh-vàng mới — thay assets/logo-v2.png khi chị Khanh gửi] */
.kinh nav{display:flex;gap:22px;align-items:center;}
.kinh nav a,.kinh nav .has-sub > a{
  font-size:16.5px;font-weight:600;letter-spacing:0.02em;color:var(--ink);
  white-space:nowrap;transition:color .2s;padding:6px 0;
}
.kinh nav a:hover,.kinh nav .has-sub > a:hover{color:var(--teal);}
.kinh nav a[aria-current="page"]{color:var(--teal);border-bottom:2px solid var(--gold);}
.kinh .has-sub{position:relative;}
.kinh .has-sub .caret{font-size:10px;opacity:0.6;}
.kinh .submenu{
  position:absolute;top:calc(100% + 10px);left:-16px;min-width:260px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 6px 14px rgba(12,52,77,0.06),0 24px 48px -18px rgba(12,52,77,0.18);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s var(--v5-ease),transform .2s var(--v5-ease),visibility .2s;
}
.kinh .has-sub:hover .submenu,.kinh .has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none;}
.kinh .submenu a{display:block;padding:11px 16px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--ink);white-space:normal;}
.kinh .submenu a small{display:block;font-size:12px;color:var(--ink-mute);font-weight:400;margin-top:1px;}
.kinh .submenu a:hover{background:var(--bg-soft);}
.btn-cap{
  display:inline-flex;align-items:center;gap:12px;
  font-size:15.5px;font-weight:700;letter-spacing:0.02em;
  border-radius:999px;padding:0.55rem 0.55rem 0.55rem 1.5rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .3s var(--v5-ease),background .3s,border-color .3s,box-shadow .3s;
}
.btn-cap .vong{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:16px;transition:transform .3s var(--v5-ease);}
.btn-cap:hover .vong{transform:translate(2px,-2px) scale(1.07);}
.btn-main{background-color:var(--teal);background-image:linear-gradient(135deg,#0e8a98,#0b7784);color:#fff !important;box-shadow:0 12px 28px -12px rgba(11,119,132,0.5);}
.btn-main .vong{background:rgba(255,255,255,0.18);color:#fff;}
.btn-main:hover{transform:translateY(-2px);}
.btn-cap.gold{background-color:var(--gold);background-image:linear-gradient(135deg,#e2c48a,#c9a55f);color:#3d2c12 !important;box-shadow:0 14px 30px -12px rgba(184,147,79,0.45);}
.btn-cap.gold .vong{background:rgba(61,44,18,0.14);color:#3d2c12;}
.btn-sub{border-color:var(--line);color:var(--ink) !important;background:#fff;}
.btn-sub .vong{border:1px solid var(--line);color:var(--ink);}
.btn-sub:hover{border-color:var(--ink);}
.kinh .btn-cap{padding:0.5rem 0.5rem 0.5rem 1.35rem !important;font-size:13.5px !important;white-space:nowrap;}
.kinh .btn-cap .vong{width:34px !important;height:34px !important;}
.cta-full{display:inline;}.cta-short{display:none;}
@media(max-width:1320px){.kinh nav a,.kinh nav .has-sub > a{font-size:15px;}}
@media(max-width:1150px){.kinh nav{display:none;}.kinh{height:72px;}}
@media(max-width:480px){.cta-full{display:none;}.cta-short{display:inline;}}

/* ============ NHÃN PILL (sáng) ============ */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;
  color:var(--teal);border:1px solid rgba(11,119,132,0.3);border-radius:999px;padding:8px 18px;
  background:rgba(255,255,255,0.6);
}
.pill::before{content:"";width:10px;height:10px;background:var(--gold);flex:none;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);} /* ngôi sao 4 cánh (theo logo) */
.pill.gold{color:var(--gold-deep);border-color:rgba(184,147,79,0.4);}
.pill.gold::before{background:var(--teal);}
@media(max-width:560px){.pill{border-radius:14px;letter-spacing:0.14em;line-height:1.6;}}
/* eyebrow class cũ: tô đậm đủ tương phản trên nền sáng */
.eyebrow{color:var(--gold-deep);}

/* chống tràn ngang: con của grid được phép co + form 1 cột ở màn hẹp */
.tabpanel > *,[class*="vwrap"] > *,.homeform > *{min-width:0;}
@media(max-width:600px){
  .form-row{grid-template-columns:1fr !important;}
  #newsletter-form{flex-wrap:wrap;}
  #newsletter-form input{min-width:0;flex:1 1 100%;}
  #newsletter-form .btn{flex:1 1 100%;}
}

/* ============ THẺ (sáng, viền mềm) ============ */
.the{
  position:relative;border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(12,52,77,0.04),0 22px 44px -26px rgba(12,52,77,0.16);
}
.the::before{content:"";position:absolute;inset:5px;border-radius:11px;border:1px solid var(--line-soft);pointer-events:none;}

/* ============ CHƯƠNG MỞ TRANG (sáng, chữ lớn) ============ */
.page-hero,.post-head{
  background:linear-gradient(180deg,#f6f3e7 0%,var(--bg) 100%) !important;
  position:relative;overflow:hidden;
  padding-top:64px !important;padding-bottom:56px !important;
}
.page-hero::after,.post-head::after{
  content:"";position:absolute;right:-180px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(113,211,199,0.25),transparent 65%);pointer-events:none;
}
.page-hero > .wrap,.post-head > .wrap{position:relative;z-index:2;}
.page-hero h1,.post-head h1{color:var(--navy) !important;font-size:clamp(32px,4.2vw,58px) !important;line-height:1.1 !important;}
.page-hero h1 em{color:var(--terracotta) !important;}
.page-hero .lead{color:var(--ink-soft) !important;font-size:18px !important;line-height:1.8 !important;max-width:58ch;}
.crumbs,.crumbs a{color:var(--ink-mute) !important;}
.crumbs a:hover{color:var(--teal) !important;}
.post-byline{color:var(--ink-mute) !important;}
.post-byline a{color:var(--teal) !important;}

/* ============ TAB + BẢNG SPEC (sáng) ============ */
.tablist{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.tablist button{
  font-family:inherit;font-size:16.5px;font-weight:700;letter-spacing:0.02em;
  color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:13px 24px;cursor:pointer;transition:all .25s;
}
.tablist button:hover{border-color:var(--ink);color:var(--ink);}
.tablist button[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:#fff;}
.tabpanel{display:none;}
.tabpanel.active{display:grid;grid-template-columns:1.15fr 0.85fr;gap:0;align-items:stretch;}
@media(max-width:860px){.tabpanel.active{grid-template-columns:1fr;}}
.tabpanel.active.tp-single{grid-template-columns:1fr;}
.tp-main{padding:40px 44px;}
.tp-main h3{font-family:var(--serif);font-size:clamp(25px,2.7vw,33px);font-weight:600;color:var(--navy) !important;margin:0 0 8px;}
.tp-cat{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;color:var(--terracotta);margin-bottom:14px;}
.tp-main p{margin:0 0 20px;font-size:17px;line-height:1.75;color:var(--ink-soft);}
.tp-side{border-left:1px solid var(--line-soft);padding:40px 44px;display:flex;flex-direction:column;background:var(--card-warm);border-radius:0 16px 16px 0;}
@media(max-width:860px){.tp-side{border-left:none;border-top:1px solid var(--line-soft);border-radius:0 0 16px 16px;}}
.spec{list-style:none;margin:0 0 24px;padding:0;}
.spec li{display:flex;justify-content:space-between;gap:16px;font-size:16px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
.spec li::before{content:none !important;}
.spec li:last-child{border-bottom:none;}
.spec .k{color:var(--ink-mute);letter-spacing:0.03em;flex:none;}
.spec .v{color:var(--ink);font-weight:600;text-align:right;}
.tp-side .btn-cap{margin-top:auto;align-self:flex-start;}

/* ============ HÀNG NÉN ============ */
.core-line{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.core-cell{background:#fff;padding:28px 26px;display:flex;gap:16px;align-items:baseline;}
.core-cell .letter{font-family:var(--serif);font-style:italic;font-size:44px;color:var(--gold-deep);font-weight:500;line-height:1;flex:none;}
.core-cell h3{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--navy) !important;margin:0;}
.core-cell p{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-mute);}
@media(max-width:900px){.core-line{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.core-line{grid-template-columns:1fr;}}
.core-line.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.core-line.cols-3{grid-template-columns:1fr;}}

/* ============ CAROUSEL NGANG ============ */
.harrows{display:flex;gap:10px;}
.harrows button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:17.5px;cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s;}
.harrows button:hover{background:var(--teal);border-color:var(--teal);color:#fff;}
.tcarousel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 24px;scrollbar-width:thin;scrollbar-color:rgba(12,52,77,0.3) transparent;}
.tcarousel::-webkit-scrollbar{height:5px;}
.tcarousel::-webkit-scrollbar-thumb{background:rgba(12,52,77,0.22);border-radius:3px;}
.tcard{flex:0 0 min(420px,86vw);scroll-snap-align:start;padding:32px 32px 28px;display:flex;flex-direction:column;}
.tcard blockquote{margin:0 0 18px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.65;color:var(--ink-soft);border-left:3px solid var(--gold);padding-left:16px;flex:1;background:transparent !important;}
.tcard .who{font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;}
.tcard .who strong{color:var(--teal);font-weight:700;}
.tcard img{border-radius:10px;margin-bottom:18px;aspect-ratio:16/9;object-fit:cover;object-position:center top;}
.tcard .stat-big{font-family:var(--serif);font-style:italic;font-size:52px;color:var(--gold-deep);line-height:1;margin:6px 0 10px;}
.sec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px;}

/* ============ ẢNH TRONG BÀI + THUMB ============ */
.art-img{margin:36px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;position:relative;}
.art-img img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
.art-img figcaption{font-size:13px;letter-spacing:0.05em;color:var(--ink-mute);padding:10px 16px;border-top:1px solid var(--line-soft);background:var(--card-warm);}
.thumb,.fthumb{position:relative;overflow:hidden;}
.thumb img,.fthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.tno{position:absolute;left:12px;bottom:10px;z-index:2;font-family:var(--serif);font-style:italic;font-size:20px;color:#fff;background:rgba(12,52,77,0.72);backdrop-filter:blur(6px);padding:2px 13px;border-radius:999px;border:1px solid rgba(255,255,255,0.25);}
.fthumb .tno{font-size:28px;left:16px;bottom:14px;}

/* ============ FORM (sáng) ============ */
.contact-form input,.contact-form select,.contact-form textarea{
  background:#fff !important;border:1px solid var(--line) !important;color:var(--ink) !important;
  border-radius:10px !important;box-shadow:inset 0 1px 3px rgba(12,52,77,0.06);
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--teal) !important;}
.contact-form label{color:var(--ink-soft) !important;}
.option-card{background:#fff !important;border:1px solid var(--line) !important;border-radius:12px;}
.option-card:hover{border-color:var(--ink) !important;}
.option-card.selected,.option-card:has(input:checked){background:var(--sage-pale) !important;border-color:var(--teal) !important;}
.option-card strong{color:var(--ink);}
.option-card small{color:var(--ink-mute);}

/* ============ ĐỒNG NHẤT CHỮ ============ */
.wrap,.wrap-narrow{max-width:1240px;}
.sec-head h2,.section-head h2,h2.display{font-size:clamp(30px,3.8vw,48px);line-height:1.12;color:var(--navy);}
.section-head .lead,.sec-lead{font-size:17.5px !important;line-height:1.75 !important;color:var(--ink-soft) !important;}
.article-body h2{font-size:26px !important;line-height:1.35 !important;color:var(--navy) !important;}

/* nút cũ của styles.css: bo viên nang cho khớp hệ */
.btn{border-radius:999px !important;}

/* nhãn chờ dữ liệu */
.cho-du-lieu{
  display:inline-block;font-size:12px;letter-spacing:0.08em;font-weight:700;
  color:#8a6d00;background:#fff7d6;border:1px dashed #d9b64a;border-radius:8px;padding:3px 10px;
}

/* v3.js reveal (giữ cơ chế, trạng thái sáng) */
.v3-pre{opacity:0;transform:translateY(22px);}
.v3-in{opacity:1;transform:none;transition:opacity .7s var(--v5-ease),transform .7s var(--v5-ease);}
@media (prefers-reduced-motion: reduce){.v3-pre{opacity:1 !important;transform:none !important;}}

/* ============ HỆ MOTION V5 ============ */
/* mask chữ hiện từng từ (giữ aria-label gốc trên heading) */
.mw{display:inline-block;overflow:hidden;vertical-align:bottom;}
.mw > span{display:inline-block;will-change:transform;}
@media (prefers-reduced-motion: reduce){.mw > span{transform:none !important;}}

/* nav: đổ bóng khi rời đỉnh trang */
.navwrap{transition:box-shadow .3s var(--v5-ease);}
.navwrap.scrolled{box-shadow:0 6px 24px -12px rgba(12,52,77,0.18);}

/* nav link: gạch chân trượt vào khi hover */
.kinh nav > a,.kinh nav .has-sub > a{
  background:linear-gradient(var(--gold),var(--gold)) left bottom/0% 2px no-repeat;
  transition:color .2s,background-size .3s var(--v5-ease);
}
.kinh nav > a:hover,.kinh nav .has-sub > a:hover{background-size:100% 2px;}
.kinh nav a[aria-current="page"]{background:none;}

/* ảnh trong card: phóng nhẹ khi hover */
.act .img img,.news:hover,.bt-card .img img,.tcard img{transition:transform .6s var(--v5-ease);}
.act:hover .img img,.bt-card:hover .img img{transform:scale(1.04);}

/* thẻ tương tác: nổi nhẹ */
a.the,button.the{transition:transform .3s var(--v5-ease),box-shadow .3s var(--v5-ease);}
a.the:hover,button.the:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(12,52,77,0.05),0 30px 56px -26px rgba(12,52,77,0.22);}

/* slide không hiện: mờ nhẹ để chuyển cảnh có chiều sâu */
.hslide{opacity:0.3;transition:opacity .55s var(--v5-ease);}
.hslide.active{opacity:1;}
@media (prefers-reduced-motion: reduce){.hslide{opacity:1;}}

/* ============ HỌP 14/09: icon + gạch ngang "Tại sao chọn" · highlight kết quả ============ */
.why-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--bg);color:var(--teal);margin-bottom:14px;}
.why-ic svg{width:24px;height:24px;}
.why-cell h3{text-transform:none;letter-spacing:0.04em;font-size:18px;padding-bottom:12px;position:relative;margin-bottom:14px;}
.why-cell h3::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;background:var(--gold);}
.out h3.hl{color:var(--gold-deep);letter-spacing:0.05em;font-size:17.5px;line-height:1.5;}
/* ============ HỌP 14/09: gói giá nổi bật hơn ============ */
.goi .gia{font-family:var(--serif);font-size:clamp(27px,2.8vw,36px);font-weight:600;color:var(--navy);margin:4px 0 12px;padding-bottom:14px;border-bottom:2px solid var(--gold);}
.goi .tag{color:var(--teal);}
.goi.noibat{border-color:var(--teal);}
.goi.noibat .gia{color:var(--teal);}
@media(min-width:901px){.goi.noibat{transform:translateY(-8px);}}
/* tên ebook nổi bật (họp 14/09) */
.ebcard h3{font-weight:700 !important;color:var(--teal) !important;}
/* ===== Footer thống nhất (v6) ===== */
.footer-grid.ft-v6{grid-template-columns:1.3fr 1fr 1fr 1.6fr;}
@media(max-width:960px){.footer-grid.ft-v6{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.footer-grid.ft-v6{grid-template-columns:1fr;}}
.ft-lienhe li{display:flex;align-items:flex-start;gap:10px;color:rgba(245,240,230,0.6);line-height:1.5;}
.ft-lienhe .fi{flex:none;width:16px;height:16px;margin-top:2px;color:var(--gold);}
.ft-lienhe .fi svg{width:16px;height:16px;display:block;}
.ft-lienhe a{word-break:break-word;}

@media(max-width:560px){.spec li{flex-wrap:wrap;gap:4px 16px;}}
/* Montserrat rộng hơn: thu menu cho vừa khung */
.kinh nav{gap:16px;}
.kinh nav a,.kinh nav .has-sub > a{font-size:15px;}
@media(max-width:1320px){.kinh nav{gap:13px;}.kinh nav a,.kinh nav .has-sub > a{font-size:14px;}.kinh .btn-cap{font-size:13.5px !important;}}