:root {
  --navy:#1C355F; --navy-2:#274B85; --pink:#ED0E57; --pink-soft:#FFF0F5;
  --bg:#F7F9FC; --card:#FFFFFF; --line:#E5E7EB; --muted:#6B7280; --text:#1F2937;
  --ok:#065F46; --okbg:#D1FAE5; --warn:#B45309; --warnbg:#FEF3E2;
  --radius:6px; --shadow:0 1px 2px rgba(16,24,40,.06);
  --line-2:#D1D5DB;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { font-family:Arial,"Helvetica Neue",Helvetica,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6; }
img { max-width:100%; }
a { color:var(--navy-2); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }

.ann-bar { background:var(--navy); color:#fff; overflow:hidden; position:relative;
  font-size:12px; line-height:1; padding:7px 0; letter-spacing:.1px; }
.ann-track { display:flex; width:max-content; animation:ann-run 46s linear infinite; }
.ann-bar:hover .ann-track, .ann-bar:focus-within .ann-track { animation-play-state:paused; }
.ann-seq { display:flex; align-items:center; flex:none; }
.ann-seq > * { padding:0 26px; white-space:nowrap; }
.ann-bar a { color:#fff; text-decoration:none; font-weight:600; cursor:pointer; }
.ann-bar a:hover { text-decoration:underline; }
.ann-bar a:focus-visible { outline:2px solid var(--pink); outline-offset:3px; border-radius:4px; }
.ann-bar .ann-dim { opacity:.82; }
@keyframes ann-run { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ann-track { animation:none; }
  .ann-bar { overflow-x:auto; }
  .ann-bar .ann-seq:nth-child(2) { display:none; }
}

.site-header { background:#fff; border-bottom:1px solid var(--line-2); position:sticky; top:0; z-index:200; }
.site-header .top-row { display:flex; align-items:center; gap:20px;
  min-height:58px; padding-top:5px; padding-bottom:5px; }
.site-logo { display:flex; align-items:center; gap:9px; text-decoration:none; flex:none; }
.site-logo img { height:36px; }
.site-logo span { font-weight:800; color:var(--navy); font-size:15px; letter-spacing:.2px; }
.tabbar { background:#EEF2F8; border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2); }
.main-nav { position:relative; display:flex; gap:0; align-items:stretch; justify-content:flex-start; }
.nav-item { position:static; display:flex; border-right:1px solid #DCE3ED; }
.nav-item:first-child { border-left:1px solid #DCE3ED; }
.main-nav a { position:relative; text-decoration:none; color:#374151; font-size:13.5px; font-weight:700;
  padding:12px 16px; border-bottom:3px solid transparent; border-radius:0;
  flex:0 0 auto; min-width:0; text-align:center; line-height:1.35; white-space:nowrap;
  display:flex; flex-direction:row; align-items:center; gap:7px; justify-content:center;
  transition:color .14s, background .14s, border-color .14s; }
.nav-drop { position:absolute; top:100%; left:0; right:0; z-index:60;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 14px;
  background:#F4F7FB; border-bottom:1px solid var(--line-2);
  border-radius:0; box-shadow:0 10px 24px rgba(16,24,40,.12);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:.14s ease; }
.nav-drop.co-cot { align-items:stretch; gap:0; padding:14px 8px 16px; }
.nav-drop.co-cot .nd-cot { flex:1 1 0; min-width:150px; display:flex; flex-direction:column;
  gap:6px; padding:0 14px; border-left:1px solid #DCE3ED; }
.nav-drop.co-cot .nd-cot:first-child { border-left:0; }
.nav-drop.co-cot .nd-tieu-de { font-size:11px; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase; color:var(--navy); padding:0 0 8px;
  border-bottom:2px solid var(--pink); margin-bottom:4px; }
@media (max-width:900px) { .nav-drop.co-cot { flex-wrap:wrap; }
  .nav-drop.co-cot .nd-cot { flex:1 1 45%; border-left:0; margin-bottom:10px; } }
.nav-item.has-drop:hover .nav-drop, .nav-item.has-drop:focus-within .nav-drop {
  opacity:1; visibility:visible; transform:none; }
.main-nav .nav-drop a { flex:none; display:flex; flex-direction:row; align-items:center;
  justify-content:flex-start; gap:6px; text-align:left; white-space:nowrap;
  padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--text);
  background:#fff; border:1px solid #DCE3ED; border-bottom:1px solid #DCE3ED;
  border-radius:4px; }
.main-nav .nav-drop a:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.main-nav a:hover { color:var(--navy); background:#E3EAF4; }
.main-nav a.active { color:var(--navy); background:#fff; border-bottom-color:var(--pink);
  margin-bottom:-1px; padding-bottom:13px; }
.main-nav a.active:hover { background:#fff; }
.main-nav a.nav-home { gap:1px; }
.main-nav a .t-badge { background:#fff; color:var(--navy); border:1px solid var(--line-2);
  font-size:9.5px; font-weight:800; letter-spacing:.5px; border-radius:3px;
  padding:2px 5px; line-height:1.4; flex:none; }
.main-nav a.active .t-badge { border-color:var(--pink); color:var(--pink); }
@media (prefers-reduced-motion:reduce) { .main-nav a:hover { transform:none; } }

.header-cta { margin-left:auto; display:flex; flex-wrap:wrap;
  justify-content:flex-end; align-items:center; gap:5px 9px; }
.header-cta > .cta-stack { flex:0 1 auto; align-items:flex-end; }
.header-cta > .cta-stack .btn { min-width:190px; }
.cta-stack { display:flex; flex-direction:column; align-items:stretch; gap:3px; min-width:0; }
.cta-stack .btn { padding:4px 13px; font-size:12.5px; line-height:1.4; border-radius:8px;
  max-width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cta-stack .btn#navPro {
  padding:8px 16px; font-size:14.5px; font-weight:800; letter-spacing:.2px;
  border-radius:9px; max-width:none;
  animation:proNhipTho 2.4s ease-in-out infinite;
}
@keyframes proNhipTho {
  0%, 70%, 100% { box-shadow:0 0 0 0 rgba(237,14,87,.55); }
  35%           { box-shadow:0 0 0 7px rgba(237,14,87,0); }
}
.cta-stack .btn#navPro:hover { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .cta-stack .btn#navPro { animation:none; }
}
.header-cta > .btn { padding:5px 13px; font-size:12.5px; }
.btn-gv { border:2px solid #F49CBC; background:#FFF0F5; color:var(--navy);
  white-space:nowrap; padding:8px 17px !important; font-size:14.5px !important;
  font-weight:800; border-radius:10px; box-shadow:0 1px 4px rgba(237,14,87,.13); }
.btn-gv:hover { background:#FFE0EB; border-color:var(--pink);
  box-shadow:0 2px 8px rgba(237,14,87,.22); }
@media (max-width:1080px) { .btn-gv .gv-dai { display:none; } }
.btn-partner { display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:linear-gradient(180deg,#FFF1F6,#FFE1EC); color:var(--navy);
  border:2px solid #F49CBC; border-radius:10px;
  padding:8px 16px !important; font-size:14.5px !important; font-weight:800;
  box-shadow:0 1px 4px rgba(237,14,87,.13); }
.btn-partner:hover { background:linear-gradient(180deg,#FFE4EF,#FFD2E3);
  border-color:var(--pink); box-shadow:0 2px 8px rgba(237,14,87,.22); }
.btn-partner .ic-tim { color:var(--pink); flex:none; }
.btn { display:inline-block; border:0; border-radius:4px; padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; text-align:center;
  -webkit-user-select:none; user-select:none; touch-action:manipulation; }
.btn-pink { background:var(--pink); color:#fff; }
.btn-pink:hover { background:#D00A4C; }
.btn-navy { background:var(--navy); color:#fff; }
.btn-outline { background:#fff; color:var(--navy); border:1px solid var(--line-2); }
.btn-outline:hover { border-color:var(--navy); background:#F3F6FB; }
.btn-lg { padding:14px 28px; font-size:16px; border-radius:4px; }
.nav-pro-dt { display:none; }
.nav-toggle { display:none; margin-left:auto; background:none; border:0; font-size:24px; cursor:pointer;
  color:var(--navy); min-width:44px; min-height:44px; align-items:center; justify-content:center; }

.bc-legend { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.bc-lg { display:flex; align-items:center; gap:7px; background:#F8FAFC; border:1px solid var(--line);
  border-radius:4px; padding:6px 13px; font-size:13px; color:#475569; }
.bc-lg .dot { width:9px; height:9px; border-radius:50%; flex:none; }
.bc-lg .nm { font-weight:600; }
.bc-lg b { color:var(--navy); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.bc-lg i { font-style:normal; font-size:11.5px; font-weight:800; border-radius:4px; padding:1px 6px; }
.bc-lg i.up { color:#065F46; background:#D1FAE5; }
.bc-lg i.dn { color:#991B1B; background:#FEE2E2; }
.bc-lg i.fl { color:#64748B; background:#F1F5F9; }
.bc-svgbox { position:relative; }
.bc-svg { display:block; width:100%; height:300px; overflow:visible; touch-action:pan-y; }
.bc-svg .bc-ax { font-size:11.5px; fill:#94A3B8; font-family:inherit; }
.bc-hit { cursor:crosshair; }
.bc-tip { position:absolute; top:6px; pointer-events:none; transition:opacity .12s;
  background:var(--navy); color:#fff; border-radius:4px; padding:9px 12px; font-size:12.5px;
  line-height:1.7; box-shadow:0 8px 22px rgba(16,24,40,.22); min-width:140px; }
.bc-tip .d { font-weight:800; font-size:12px; opacity:.8; margin-bottom:2px; }
.bc-tip .no { opacity:.65; }
.bc-tip .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.bc-tip b { float:right; margin-left:14px; font-variant-numeric:tabular-nums; }
.bc-empty { background:#F8FAFC; border:1px dashed var(--line); border-radius:4px;
  padding:26px; text-align:center; color:var(--muted); font-size:14px; }
@media (max-width:620px) { .bc-svg { height:240px; } .bc-lg { font-size:12px; padding:5px 10px; } }

/* ===== Sections ===== */
.section { padding:64px 0; }
.section.alt { background:#fff; }
.kicker { color:var(--pink); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:10px; }
h1.hero-title { color:var(--navy); font-size:clamp(30px,4.6vw,46px); line-height:1.18; letter-spacing:-.5px; }
h2.sec-title { color:var(--navy); font-size:clamp(23px,3vw,32px); line-height:1.25; margin-bottom:10px; }
.sec-lead { color:var(--muted); font-size:16.5px; max-width:640px; }
.center { text-align:center; }
.center .sec-lead { margin:0 auto; }

/* ===== Cards ===== */
.grid { display:grid; gap:18px; }
.grid.c2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid.c3 { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.grid.c4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.card h3 { color:var(--navy); font-size:17px; margin-bottom:8px; }
.card p { color:var(--muted); font-size:14.5px; }
.card .emoji { font-size:30px; margin-bottom:12px; display:block; }
ul.checks { list-style:none; margin:14px 0 0; }
ul.checks li { padding-left:26px; position:relative; margin-bottom:9px; font-size:14.5px; }
ul.checks li::before { content:"✓"; position:absolute; left:2px; color:var(--pink); font-weight:800; }

/* ===== Pill / badge ===== */
.pill { display:inline-block; border-radius:4px; padding:4px 13px; font-size:12.5px; font-weight:700; }
.pill.free { background:var(--okbg); color:var(--ok); }
.pill.pro { background:var(--pink-soft); color:var(--pink); }
.pill.soon { background:#EEF2F7; color:var(--muted); }
.pill.hot { background:var(--warnbg); color:var(--warn); }

/* ===== Footer ===== */
.site-footer { background:var(--navy); color:#C7D2E4; padding:44px 0 26px; margin-top:64px; }
.site-footer a { color:#fff; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; margin-bottom:26px; }
.foot-grid h4 { color:#fff; font-size:14px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.8px; }
.foot-grid li { list-style:none; margin-bottom:8px; font-size:14px; }
.foot-brand img { height:44px; background:#fff; border-radius:4px; padding:5px 10px; margin-bottom:12px; }
.foot-bottom { border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

.test-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow); }
.test-card .tag-row { display:flex; gap:7px; flex-wrap:wrap; }
.test-card h3 { color:var(--navy); font-size:16px; line-height:1.4; }
.test-card .meta { color:var(--muted); font-size:13px; }
.test-card .btn { margin-top:auto; }
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 22px; }
.filter-chip { border:1.5px solid var(--line); background:#fff; border-radius:4px; padding:7px 16px; font-size:13.5px; font-weight:600; cursor:pointer; color:#374151; }
.filter-chip.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.skill-tabs { display:flex; gap:6px; border-bottom:2px solid var(--line); margin-bottom:4px; overflow-x:auto; }
.skill-tab { border:0; background:none; padding:12px 20px; font-size:15.5px; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.skill-tab.active { color:var(--pink); border-bottom-color:var(--pink); }

/* ===== Certs carousel ===== */
.certs-strip { display:flex; gap:16px; overflow-x:auto; padding:6px 2px 16px; scroll-snap-type:x mandatory; }
.certs-strip img { height:340px; border-radius:4px; border:1px solid var(--line); box-shadow:var(--shadow); scroll-snap-align:start; cursor:zoom-in; }
.cert-note { color:var(--muted); font-size:13px; margin-top:4px; }

.people-strip { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.people-strip::-webkit-scrollbar { display:none; }
.people-strip img { height:120px; width:auto; object-fit:cover; border-radius:4px; border:2px solid #fff; box-shadow:var(--shadow); cursor:zoom-in; flex:none; }
.people-strip-center { justify-content:safe center; }

@media (min-width:761px) and (max-width:1024px) {
  .main-nav a { padding:12px 10px; gap:5px; }
  .main-nav a .t-badge, .main-nav a .t-dai { display:none; }
}

@media (max-width:760px) {
  .people-strip img { height:92px; }
}

.pareto { display:flex; align-items:center; gap:34px; }
.pareto-viz { flex:none; width:230px; }
.pareto-bar { display:flex; height:56px; border-radius:4px; overflow:hidden; font-weight:800; color:#fff; font-size:15px; }
.pareto-bar .p20 { background:var(--pink); width:20%; display:flex; align-items:center; justify-content:center; }
.pareto-bar .p80 { background:var(--navy); width:80%; display:flex; align-items:center; justify-content:center; }
.pareto-lab { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:7px; }

/* ===== Lightbox ===== */
.lightbox { position:fixed; inset:0; background:rgba(10,15,30,.86); display:flex; align-items:center; justify-content:center; z-index:200; cursor:zoom-out; }
.lightbox img { max-height:92vh; max-width:92vw; border-radius:4px; }

.auth-modal-overlay { position:fixed; inset:0; background:rgba(10,15,30,.55); display:flex; align-items:center; justify-content:center; z-index:300; padding:20px; }
.auth-modal-card { background:#fff; border-radius:6px; padding:26px; max-width:400px; width:100%; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.25); max-height:92vh; overflow-y:auto; }
.auth-modal-x { position:absolute; top:14px; right:14px; border:0; background:none; font-size:18px; cursor:pointer; color:var(--muted); line-height:1; }
.auth-modal-card label { display:block; font-size:13px; font-weight:700; color:var(--navy); margin:12px 0 5px; }
.auth-modal-card input { width:100%; border:1.5px solid var(--line); border-radius:4px; padding:12px; font-size:15px; }
.auth-modal-card input:focus { outline:none; border-color:var(--pink); }
.auth-tabs { display:flex; gap:6px; margin-bottom:4px; }
.auth-tabs button { flex:1; border:1.5px solid var(--line); background:#fff; border-radius:4px; padding:9px; font-weight:700; font-size:14px; cursor:pointer; color:var(--muted); }
.auth-tabs button.active { border-color:var(--pink); color:var(--pink); background:var(--pink-soft); }
.msg { margin-top:14px; font-size:13.5px; font-weight:600; display:none; border-radius:9px; padding:10px 12px; }
.msg.err { display:block; background:#FEE2E2; color:#991B1B; }
.msg.ok { display:block; background:#D1FAE5; color:#065F46; }

.mt-card { position:fixed; left:16px; top:var(--mt-top,78px); z-index:9994; width:328px;
  max-width:calc(100vw - 32px); background:#fff; border:1px solid var(--line);
  border-left:6px solid var(--pink); border-radius:6px; padding:16px 18px 16px;
  box-shadow:0 18px 46px rgba(16,24,40,.22); max-height:calc(100vh - var(--mt-top,78px) - 18px);
  overflow-y:auto; opacity:0; transform:translateX(-14px); transition:.26s ease; }
.mt-card.on { opacity:1; transform:translateX(0); }
.mt-card h3 { color:var(--navy); font-size:16px; margin:0 26px 5px 0; line-height:1.35; }
.mt-card .sub { font-size:12.5px; color:var(--muted); line-height:1.5; margin:0; }
.mt-card label { display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin:11px 0 4px; }
.mt-card input { width:100%; border:1.5px solid var(--line); border-radius:9px; padding:9px 10px; font-size:14.5px; }
.mt-card input:focus { outline:none; border-color:var(--pink); }
.mt-card .msg { margin-top:10px; font-size:12.5px; padding:8px 10px; }
.mt-card .btn { display:block; width:100%; padding:10px; font-size:14px; }
.mt-x { position:absolute; top:9px; right:10px; border:0; background:none; font-size:17px;
  cursor:pointer; color:var(--muted); line-height:1; padding:4px; }
.mt-x:hover { color:var(--navy); }
.mt-later { display:block; width:100%; margin-top:7px; border:0; background:none;
  font:inherit; font-size:12.5px; color:var(--muted); cursor:pointer; }
@media (max-width:760px) {
  .mt-card { left:10px; right:10px; width:auto; padding:14px 15px; }
}

.post-nudge { background:var(--pink-soft); border:1px solid #FBD9E5; border-radius:6px; padding:18px 20px; margin:18px 0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.post-nudge .txt { flex:1; min-width:220px; }
.post-nudge .txt b { color:var(--navy); }
.post-nudge .txt p { font-size:13px; color:var(--muted); margin-top:3px; }

/* ===== FAQ ===== */
details.faq { background:#fff; border:1px solid var(--line); border-radius:4px; padding:16px 20px; margin-bottom:10px; }
details.faq summary { font-weight:700; color:var(--navy); cursor:pointer; font-size:15px; }
details.faq p { margin-top:10px; color:#374151; font-size:14.5px; }

@media (max-width:760px) {
  .header-cta { display:flex; flex-wrap:wrap; margin-left:auto; gap:6px; min-width:0; }
  .header-cta > .cta-stack,
  .header-cta > a[href="/app/teach"] { display:none; }
  .header-cta > .btn { padding:8px 9px !important; font-size:11px !important;
    border-radius:8px; white-space:nowrap; }
  .header-cta > .btn .btn-emo { display:none; }
  .btn-gv { box-shadow:none; }
  .site-header .top-row { gap:8px; flex-wrap:wrap; }
  .nav-toggle { display:flex; }
  .nav-pro-dt { display:inline-flex; align-items:center; padding:6px 12px !important;
    font-size:12.5px !important; font-weight:800; border-radius:8px; white-space:nowrap;
    margin-left:6px; flex:0 0 auto; }
  .nav-pro-dt + .nav-toggle { margin-left:6px; }
  .header-cta > .btn-partner .pm-dai { display:none; }
  .main-nav { overflow-x:auto; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); }
  .main-nav::-webkit-scrollbar { display:none; }
  .main-nav a { flex:0 0 auto; white-space:nowrap; padding:9px 11px; font-size:13px; }
  .nav-drop { display:none; }
  .foot-grid { grid-template-columns:1fr; }
  .pareto { flex-direction:column; align-items:flex-start; }
  .section { padding:44px 0; }
}

@media (max-width:480px) {
  .site-logo img:first-child { display:none; }
  .site-logo img { height:30px; }
}

.hidden { display:none !important; }

.bvm { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px;
       background:linear-gradient(100deg,#16294a,#24406f 55%,#2d5088);
       color:#fff; border-radius:6px; padding:13px 18px 13px 16px; font-size:14px;
       border-left:6px solid var(--pink);
       box-shadow:0 8px 26px rgba(28,53,95,.28); position:relative; overflow:hidden; }
.bvm::after { content:""; position:absolute; inset:0; pointer-events:none;
              background:radial-gradient(320px 60px at 12% 50%, rgba(255,123,163,.22), transparent 70%); }
.bvm .ttl { font-weight:800; white-space:nowrap; font-size:14.5px; letter-spacing:.2px; }
.bvm .cup { font-size:19px; animation:bvmPulse 2.2s ease-in-out infinite; display:inline-block; }
@keyframes bvmPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }
.bvm .win { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.15);
            border:1px solid rgba(255,255,255,.28); border-radius:6px; padding:7px 15px; }
.bvm .win .ic { font-size:17px; line-height:1; }
.bvm .win .col { display:flex; flex-direction:column; line-height:1.25; }
.bvm .win b { font-size:15.5px; font-weight:800; }
.bvm .win em { font-style:normal; font-size:12.5px; font-weight:700; opacity:.85; }
.bvm .win em i { font-style:normal; color:#FF9EBC; font-size:13.5px; font-weight:800; }
.bvm .sk { opacity:.78; font-size:13px; white-space:nowrap; }
.bvm a { margin-left:auto; color:#fff; text-decoration:none; font-weight:700; white-space:nowrap;
         background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
         border-radius:9px; padding:6px 14px; font-size:13.5px; }
.bvm a:hover { background:#fff; color:var(--navy); border-color:#fff; }
@media (max-width:620px){
  .bvm { font-size:13px; padding:9px 12px 9px 10px; gap:8px; margin-bottom:14px;
         flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
         -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .bvm::-webkit-scrollbar { display:none }
  .bvm > * { flex:0 0 auto }                      
  .bvm .ttl { font-size:13.5px }
  .bvm .win { padding:5px 11px; border-radius:4px }
  .bvm .win b { font-size:14px }
  .bvm .win em { font-size:11.5px }
  .bvm a { margin-left:0; padding:5px 11px; font-size:12.5px }
  .bvm::after { display:none }
}

.roast-row { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:10px 0 4px; }
.roast-toggle { display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:#fff;
  border:1px solid var(--line); border-radius:4px; padding:6px 14px; font-weight:700;
  font-size:13.5px; color:var(--navy); user-select:none; transition:.15s; }
.roast-toggle:hover { border-color:var(--pink); color:var(--pink); }
.roast-toggle input { margin:0; width:15px; height:15px; accent-color:var(--pink); cursor:pointer; }
.roast-note { font-size:12.5px; color:var(--muted); }
.roast-toast { position:fixed; left:16px; bottom:78px; z-index:9991; width:384px;
  max-width:calc(100vw - 28px); background:#fff; border:1px solid var(--line);
  border-left:6px solid var(--pink); border-radius:6px; padding:16px 18px 15px;
  box-shadow:0 22px 54px rgba(16,24,40,.26); opacity:0; transform:translateY(18px) scale(.94);
  pointer-events:none; transition:.28s ease; }
.roast-toast.on { opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
  transition:opacity .3s ease, transform .46s cubic-bezier(.18,1.5,.4,1); }
.roast-x { position:absolute; top:7px; right:9px; background:none; border:0; font-size:17px;
  color:var(--muted); cursor:pointer; line-height:1; padding:5px; }
.roast-x:hover { color:var(--navy); }
.roast-body { display:flex; gap:13px; align-items:center; padding-right:14px; }
.roast-pet { position:relative; flex:0 0 auto; width:104px; height:104px; border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#FFF0F5 0%,#FFE1EC 100%);
  display:flex; align-items:center; justify-content:center; }
.roast-pet::before { content:""; position:absolute; inset:-7px; border-radius:50%;
  background:radial-gradient(circle,rgba(237,14,87,.30) 0%,rgba(237,14,87,0) 70%);
  animation:roastHalo 2.2s ease-in-out infinite; }
.roast-pet svg { width:96px; height:96px; display:block; position:relative;
  transform-origin:50% 88%;   
  animation:roastHop 2.2s cubic-bezier(.3,.9,.4,1) infinite; }
@keyframes roastHop {
  0%,52%,100% { transform:translateY(0) rotate(0) scale(1,1) }
  58%  { transform:translateY(2px) rotate(0) scale(1.12,.86) }        
  70%  { transform:translateY(-16px) rotate(-14deg) scale(.92,1.12) } 
  79%  { transform:translateY(-2px) rotate(10deg) scale(1.08,.94) }   
  88%  { transform:translateY(-9px) rotate(-6deg) scale(1,1) }        
  95%  { transform:translateY(0) rotate(0) scale(1.05,.95) }
}
@keyframes roastHalo { 0%,55%,100%{opacity:.3;transform:scale(1)} 74%{opacity:.85;transform:scale(1.16)} }
@media (prefers-reduced-motion:reduce){ .roast-pet svg,.roast-pet::before,.roast-tag { animation:none } }
.roast-tag { position:absolute; top:-9px; left:-12px; z-index:2; background:var(--pink); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.3px; padding:3px 9px; border-radius:9px;
  transform:rotate(-11deg); box-shadow:0 4px 10px rgba(237,14,87,.4); white-space:nowrap;
  animation:roastTag 2.2s ease-in-out infinite; }
@keyframes roastTag { 0%,58%,100%{transform:rotate(-11deg) scale(1)}
  70%{transform:rotate(-16deg) scale(1.18)} 82%{transform:rotate(-7deg) scale(1.02)} }
.roast-msg { font-size:15.5px; line-height:1.55; }
.roast-act { display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; }
.roast-act .btn { padding:8px 17px; font-size:14px; }
@media (max-width:640px){ .roast-toast { left:10px; right:10px; bottom:78px; width:auto }
                          .roast-pet { width:88px; height:88px }
                          .roast-pet svg { width:82px; height:82px }
                          .roast-msg { font-size:14.5px }
                          .roast-note { flex:1 1 100% } }

.tl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:16px; margin-top:18px; }
.tl-card { background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:16px;
  display:flex; flex-direction:column; gap:8px; text-align:left; }
.tl-cover { height:132px; border-radius:11px; overflow:hidden; background:#f1f3f7;
  display:flex; align-items:center; justify-content:center; font-size:38px; }
.tl-cover img { width:100%; height:100%; object-fit:cover; }
.tl-ten { font-weight:800; color:var(--navy); font-size:15px; line-height:1.35; }
.tl-mo { font-size:13px; color:var(--muted); flex:1; }
.tl-note { font-size:11.5px; color:var(--muted); }

.foot-khu { border-top:1px solid rgba(255,255,255,.15); padding-top:20px; margin-bottom:22px; }
.foot-khu h4 { color:#fff; font-size:14px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.8px; }
.foot-khu ul { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 24px; }
.foot-khu li { list-style:none; font-size:14px; }
@media (max-width:760px){ .foot-khu ul { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-khu ul { grid-template-columns:1fr; } }

.khu-8020 { max-width:1120px; margin:8px auto 0; padding:16px 20px 0;
  border-top:1px solid var(--line); color:var(--muted); font-size:13.5px;
  line-height:1.75; text-align:center; }
.khu-8020 a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.khu-8020 a:hover { color:var(--navy); }

@media (max-width:420px) {
  .header-cta > .btn-partner { padding:7px 9px !important; }
  .header-cta > .btn-partner > span { display:none; }
  .nav-pro-dt { padding:6px 10px !important; }
}
@media (max-width:380px) {
  .site-header .top-row { gap:6px; }
}