/* Be Vietnam Pro (SIL OFL 1.1) – tự lưu trữ để không phải chờ Google Fonts */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-vietnamese-400.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/be-vietnam-pro-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/be-vietnam-pro-vietnamese-500.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/be-vietnam-pro-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/be-vietnam-pro-vietnamese-600.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/be-vietnam-pro-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/be-vietnam-pro-vietnamese-700.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/be-vietnam-pro-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/be-vietnam-pro-vietnamese-800.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/be-vietnam-pro-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Bống UI – bộ giao diện lõi của bongmedia.vn (Bống Media tự phát triển)
   Mọi trang dùng chung file này; màu, font, bo góc của từng mẫu khai báo trong assets/css/t/<mẫu>.css */

/* ========== 1. Biến giao diện ========== */
/* Màu nền/chữ được tính từ màu chủ đạo (--tint) nên khai báo trên body: mỗi mẫu chỉ cần đặt --pri, --acc (và --tint nếu muốn) */
body{
  --pri:#3f66f0;--pri-2:color-mix(in srgb,var(--pri) 82%,#000);--pri-ink:#fff;--acc:#8b5cf6;--acc-ink:#fff;--tint:var(--pri);
  --bg:#fff;--bg-2:color-mix(in srgb,var(--tint) 4%,#f6f7fa);--bg-3:color-mix(in srgb,var(--tint) 9%,#eceff5);--card:#fff;
  --ink:color-mix(in srgb,var(--tint) 18%,#0a0e1a);--text:color-mix(in srgb,var(--tint) 14%,#3d4558);--muted:color-mix(in srgb,var(--tint) 12%,#636b7e);--line:color-mix(in srgb,var(--tint) 10%,#e2e5ec);
  --dark:color-mix(in srgb,var(--tint) 16%,#070a12);--dark-2:color-mix(in srgb,var(--tint) 20%,#10141f);--dark-ink:#f5f7fb;--dark-text:color-mix(in srgb,var(--tint) 10%,#c4cad8);
  --ok:#15803d;--ok-bg:#dcfce7;--err:#e11d48;--warn:#b45309;--warn-bg:#fff7ed;
  --hl:var(--pri);--ring:0 0 0 3px color-mix(in srgb,var(--pri) 30%,transparent);
}
html[data-theme="dark"] body{
  --bg:color-mix(in srgb,var(--tint) 9%,#080b13);--bg-2:color-mix(in srgb,var(--tint) 12%,#0d111c);--bg-3:color-mix(in srgb,var(--tint) 16%,#141a28);--card:color-mix(in srgb,var(--tint) 11%,#111624);
  --ink:#eef1f8;--text:color-mix(in srgb,var(--tint) 8%,#bcc3d3);--muted:color-mix(in srgb,var(--tint) 8%,#8f97aa);--line:rgba(160,170,195,.17);
  --dark:color-mix(in srgb,var(--tint) 12%,#04060c);--dark-2:color-mix(in srgb,var(--tint) 16%,#0c101b);
  --ok:#4ade80;--ok-bg:rgba(34,197,94,.16);--err:#fda4af;--warn:#fdba74;--warn-bg:rgba(251,146,60,.12);
  --hl:color-mix(in srgb,var(--pri) 70%,#fff);
}
:root{
  --f-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;--f-head:var(--f-body);--f-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --fs:16px;--lh:1.65;--h-w:700;--h-ls:-.02em;--h-lh:1.18;--h-tt:none;
  --r:14px;--r-sm:9px;--r-lg:22px;--r-btn:999px;--r-img:var(--r-lg);
  --sh:0 1px 2px rgba(15,23,42,.05),0 10px 28px -14px rgba(15,23,42,.22);--sh-lg:0 30px 60px -28px rgba(15,23,42,.35);
  --sec:clamp(64px,8.5vw,116px);--w:1200px;--gut:20px;--gap:24px;--hd-h:72px;
  color-scheme:light;
}
html[data-theme="dark"]{--sh:0 1px 2px rgba(0,0,0,.4),0 12px 30px -14px rgba(0,0,0,.7);--sh-lg:0 30px 60px -24px rgba(0,0,0,.8);color-scheme:dark}

/* ========== 2. Nền tảng ========== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--f-body);font-size:var(--fs);line-height:var(--lh);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;font-family:var(--f-head);font-weight:var(--h-w);line-height:var(--h-lh);letter-spacing:var(--h-ls);color:var(--ink);text-transform:var(--h-tt)}
h1{font-size:clamp(2.1rem,4.6vw,3.75rem)}h2{font-size:clamp(1.75rem,3.2vw,2.75rem)}h3{font-size:1.3rem}h4{font-size:1.15rem}h5{font-size:1.05rem}h6{font-size:1rem}
p{margin:0 0 1rem}ul,ol{margin:0 0 1rem;padding-left:1.25rem}li>ul,li>ol{margin-bottom:0}
a{color:var(--pri);text-decoration:none;transition:color .2s}a:hover{color:var(--pri-2)}
img,svg,video,canvas,iframe{vertical-align:middle;max-width:100%}img,video{height:auto}iframe{border:0}
.b-frame img,.b-media img,.b-art img,.b-video img,.b-cover img,.b-tab-pane img,.b-logos img,.b-quote img,.b-post img,.b-card>img,.b-plan img{display:block}
button,input,select,textarea{font:inherit;color:inherit;margin:0}button{cursor:pointer}
[hidden]{display:none!important}hr{border:0;border-top:1px solid var(--line);margin:1.5rem 0}
table{border-collapse:collapse;width:100%}blockquote{margin:0}figure{margin:0}
strong,b{font-weight:700}small{font-size:.875em}code,kbd,pre{font-family:var(--f-mono);font-size:.92em}
::selection{background:color-mix(in srgb,var(--pri) 25%,transparent)}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-skip{position:absolute;left:12px;top:-60px;z-index:3000;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px}.b-skip:focus{top:12px}

/* ========== 3. Bố cục ========== */
.b-wrap{width:100%;max-width:calc(var(--w) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.b-wrap.is-narrow{max-width:calc(860px + var(--gut)*2)}.b-wrap.is-wide{max-width:calc(1360px + var(--gut)*2)}
.b-sec{position:relative;padding:var(--sec) 0;background:var(--bg);color:var(--text)}
.b-sec.is-tight{padding:calc(var(--sec)*.6) 0}.b-sec.pt-0{padding-top:0}.b-sec.pb-0{padding-bottom:0}
.is-alt{--bg:var(--bg-2)}.is-alt2{--bg:var(--bg-3)}
.is-dark,.b-dark{--bg:var(--dark);--bg-2:var(--dark-2);--bg-3:color-mix(in srgb,var(--dark-2) 80%,#fff 6%);--card:var(--dark-2);--ink:var(--dark-ink);--text:var(--dark-text);--muted:color-mix(in srgb,var(--dark-text) 78%,transparent);--line:rgba(255,255,255,.12);color-scheme:dark}
.is-pri{--bg:var(--pri);--card:color-mix(in srgb,var(--pri) 82%,#fff 18%);--ink:var(--pri-ink);--text:color-mix(in srgb,var(--pri-ink) 84%,transparent);--muted:color-mix(in srgb,var(--pri-ink) 70%,transparent);--line:color-mix(in srgb,var(--pri-ink) 22%,transparent);--hl:var(--pri-ink)}
.is-pri .b-btn.is-pri{--b-bg:var(--pri-ink);--b-fg:var(--pri)}
.b-sec>.b-wrap{position:relative;z-index:1}
.b-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}
.b-grid.c1{--c:1}.b-grid.c2{--c:2}.b-grid.c3{--c:3}.b-grid.c4{--c:4}.b-grid.c5{--c:5}.b-grid.c6{--c:6}
@media(max-width:1099.98px){.b-grid.c5,.b-grid.c6{--c:4}}
@media(max-width:991.98px){.b-grid.c3,.b-grid.c4,.b-grid.c5,.b-grid.c6{--c:2}.b-grid.m3{--c:3}}
@media(max-width:639.98px){.b-grid{--c:1!important}.b-grid.m2{--c:2!important}.b-grid.m3{--c:3!important}}
.b-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.b-split>*{min-width:0}.b-split.is-rev>:first-child{order:2}.b-split.is-top{align-items:start}
.b-split.r-46{grid-template-columns:.85fr 1.15fr}.b-split.r-64{grid-template-columns:1.15fr .85fr}
@media(max-width:991.98px){.b-split,.b-split.r-46,.b-split.r-64{grid-template-columns:1fr}.b-split.is-rev>:first-child{order:0}}
.b-stack>*+*{margin-top:var(--s,16px)}
.b-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.b-row.is-center{justify-content:center}.b-row.is-between{justify-content:space-between}
.tc{text-align:center}.mx-auto{margin-left:auto;margin-right:auto}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.mt-l{margin-top:clamp(32px,4vw,56px)}
.muted{color:var(--muted)}.ink{color:var(--ink)}.hl{color:var(--hl)}

/* ========== 4. Chữ & tiêu đề khối ========== */
.b-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hl)}
.b-eyebrow.is-pill{padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--hl) 12%,transparent);letter-spacing:.06em}
.b-eyebrow.is-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent)}
.b-eyebrow.is-line::before{content:"";width:28px;height:2px;background:currentColor}
.b-h1{font-size:clamp(2.2rem,4.8vw,3.9rem);margin-bottom:.4em}.b-h1.is-long{font-size:clamp(2rem,3.9vw,3.2rem)}.b-h2{font-size:clamp(1.8rem,3.3vw,2.8rem)}
.b-h1 em,.b-h2 em,.b-h3 em{font-style:normal;color:var(--hl)}
.b-lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--text);max-width:62ch}
.b-head{margin-bottom:clamp(32px,4.5vw,56px);max-width:760px}.b-head>:last-child{margin-bottom:0}
.b-head.is-center{text-align:center;margin-left:auto;margin-right:auto}.b-head.is-center .b-lead{margin-left:auto;margin-right:auto}
.b-head.is-split{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;align-items:end}
.b-head.is-split .b-lead{margin:0}.b-head.is-split>div>:last-child{margin-bottom:0}
@media(max-width:991.98px){.b-head.is-split{grid-template-columns:1fr}}
.b-prose{color:var(--text)}.b-prose h2{font-size:1.6rem;margin-top:2rem}.b-prose h3{margin-top:1.6rem}.b-prose img{border-radius:var(--r)}.b-prose a{text-decoration:underline;text-underline-offset:3px}
.b-prose ul li,.b-prose ol li{margin-bottom:.4rem}

/* ========== 5. Nút ========== */
.b-btn{--b-bg:var(--pri);--b-fg:var(--pri-ink);--b-bd:var(--b-bg);display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border:1.5px solid var(--b-bd);border-radius:var(--r-btn);background:var(--b-bg);color:var(--b-fg);font-weight:650;font-size:.97rem;line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer;transition:transform .18s,box-shadow .2s,background .2s,color .2s,border-color .2s;text-decoration:none}
.b-btn:hover{color:var(--b-fg);transform:translateY(-2px);box-shadow:0 12px 26px -12px color-mix(in srgb,var(--b-bg) 75%,transparent)}
.b-btn:active{transform:translateY(0)}.b-btn .ic{width:18px;height:18px}
.b-btn.is-acc{--b-bg:var(--acc);--b-fg:var(--acc-ink)}
.b-btn.is-line{--b-bg:transparent;--b-fg:var(--ink);--b-bd:color-mix(in srgb,var(--ink) 22%,transparent)}.b-btn.is-line:hover{--b-bd:var(--ink);box-shadow:none}
.b-btn.is-ghost{--b-bg:color-mix(in srgb,var(--pri) 11%,transparent);--b-fg:var(--pri);--b-bd:transparent}
.b-btn.is-light{--b-bg:#fff;--b-fg:#0b1224;--b-bd:#fff}
.b-btn.is-dark{--b-bg:var(--ink);--b-fg:var(--bg)}
.b-btn.is-link{--b-bg:transparent;--b-bd:transparent;--b-fg:var(--hl);padding:0;min-height:0}.b-btn.is-link:hover{box-shadow:none;transform:none;gap:13px}
.b-btn.is-sm{min-height:40px;padding:0 18px;font-size:.9rem}.b-btn.is-lg{min-height:56px;padding:0 30px;font-size:1.03rem}.b-btn.is-block{display:flex;width:100%}
.b-btn[disabled],.b-btn.is-off{opacity:.55;pointer-events:none}
.b-more{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--hl)}.b-more .ic{transition:transform .2s}.b-more:hover .ic{transform:translateX(4px)}
.b-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}.tc .b-btns,.b-btns.is-center{justify-content:center}

/* ========== 6. Huy hiệu, nhãn ========== */
.b-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:700;background:color-mix(in srgb,var(--pri) 12%,transparent);color:var(--pri);line-height:1.5}
.b-badge.is-acc{background:color-mix(in srgb,var(--acc) 16%,transparent);color:color-mix(in srgb,var(--acc) 80%,var(--ink))}
.b-badge.is-solid{background:var(--pri);color:var(--pri-ink)}.b-badge.is-ok{background:var(--ok-bg);color:var(--ok)}
.b-tag{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid var(--line);font-size:.84rem;color:var(--muted)}

/* ========== 7. Biểu tượng nền ========== */
.b-ico{--sz:52px;width:var(--sz);height:var(--sz);flex:none;display:inline-grid;place-items:center;border-radius:calc(var(--r) * .9);background:color-mix(in srgb,var(--pri) 12%,transparent);color:var(--pri)}
.b-ico .ic{width:calc(var(--sz)*.46);height:calc(var(--sz)*.46)}
.b-ico.is-round{border-radius:50%}.b-ico.is-solid{background:var(--pri);color:var(--pri-ink)}.b-ico.is-acc{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc)}
.b-ico.is-line{background:transparent;border:1.5px solid var(--line);color:var(--ink)}.b-ico.is-sm{--sz:40px}.b-ico.is-lg{--sz:64px}
.b-ico img{width:60%;height:60%;object-fit:contain}

/* ========== 8. Thẻ nội dung ========== */
.b-card{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;padding:28px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);color:var(--text);transition:transform .25s,box-shadow .25s,border-color .25s}
.b-card h3,.b-card h4{font-size:1.18rem;margin:4px 0 0}.b-card p{margin:0}.b-card>.b-more{margin-top:auto;padding-top:6px}
.b-card.is-hover:hover,a.b-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--pri) 30%,var(--line))}
.b-card.is-flat{background:transparent;border:0;padding:0}.b-card.is-soft{background:var(--bg-2);border-color:transparent}
.b-card.is-shadow{border-color:transparent;box-shadow:var(--sh)}
.b-card.is-bar{border:0;border-left:3px solid var(--pri);border-radius:0 var(--r) var(--r) 0;background:var(--bg-2)}
.b-card.is-center{align-items:center;text-align:center}
.b-card .b-media{margin:-28px -28px 8px;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;background:var(--bg-3)}
.b-card.is-flat .b-media{margin:0 0 8px;border-radius:var(--r-img)}
.b-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.b-card:hover .b-media img{transform:scale(1.03)}
.b-num{font-family:var(--f-head);font-weight:800;font-size:.95rem;color:var(--hl);letter-spacing:.04em}
.b-list{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.b-list li{position:relative;display:flex;gap:11px;align-items:flex-start}
.b-list li>.ic{margin-top:.22em;color:var(--hl)}.b-list li.is-off{opacity:.5}.b-list li.is-off>.ic{color:var(--muted)}
.b-list.is-2{grid-template-columns:1fr 1fr}@media(max-width:639.98px){.b-list.is-2{grid-template-columns:1fr}}

/* ========== 9. Ảnh & khung ========== */
.b-frame{position:relative;border-radius:var(--r-img);overflow:hidden;background:var(--bg-3)}
.b-frame img{width:100%;height:100%;object-fit:cover}
.b-frame.is-shot{box-shadow:var(--sh-lg);border:1px solid var(--line);background:var(--card)}
.b-frame.is-shot img{object-fit:contain}
.b-art{position:relative;isolation:isolate}
.b-art>img:first-child,.b-art>.b-frame:first-child{position:relative;z-index:1}
.b-art .b-float{position:absolute;z-index:2;width:min(46%,280px);border-radius:var(--r);box-shadow:var(--sh-lg);animation:b-bob 7s ease-in-out infinite}
.b-art .b-float.f1{right:-4%;top:8%}.b-art .b-float.f2{left:-5%;bottom:10%;animation-delay:-2.5s}.b-art .b-float.f3{right:6%;bottom:-6%;animation-delay:-4.5s}.b-art .b-float.f4{left:8%;top:-5%;animation-delay:-1.2s}
@keyframes b-bob{50%{transform:translateY(-10px)}}
@media(max-width:639.98px){.b-art .b-float{width:44%}.b-art .b-float.f1{right:0}.b-art .b-float.f2{left:0}}
.b-ratio{aspect-ratio:var(--ar,16/10)}

/* ========== 10. Hero ========== */
.b-hero{position:relative;overflow:hidden;padding:calc(var(--hd-h) + clamp(48px,7vw,96px)) 0 clamp(56px,8vw,110px);background:var(--bg)}
.b-hero .b-lead{margin-bottom:0}.b-hero .b-btns{margin-top:32px}
.b-hero.is-center .b-hero-txt{text-align:center;max-width:860px;margin:0 auto}.b-hero.is-center .b-lead{margin-left:auto;margin-right:auto}.b-hero.is-center .b-btns{justify-content:center}
.b-hero.is-center .b-hero-art{margin-top:clamp(40px,6vw,72px)}
.b-hero-note{margin-top:18px;font-size:.92rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 20px}.b-hero.is-center .b-hero-note{justify-content:center}
.b-hero-note span{display:inline-flex;align-items:center;gap:7px}.b-hero-note .ic{color:var(--hl)}
.b-hero.is-cover{min-height:min(88vh,860px);display:flex;align-items:center;color:#fff}
.b-hero.is-cover>.b-cover{position:absolute;inset:0;z-index:0}.b-hero.is-cover>.b-cover img{width:100%;height:100%;object-fit:cover}
.b-hero.is-cover>.b-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,10,20,.82),rgba(5,10,20,.45) 55%,rgba(5,10,20,.15))}
.b-hero.is-cover .b-wrap{position:relative;z-index:1}
.b-hero.is-cover{--ink:#fff;--text:rgba(255,255,255,.86);--muted:rgba(255,255,255,.7);--line:rgba(255,255,255,.2)}
.b-hero-mini{padding:calc(var(--hd-h) + clamp(40px,6vw,80px)) 0 clamp(40px,5vw,64px);background:var(--bg-2);text-align:center}
.b-hero-mini .b-lead{margin:0 auto}
.b-crumb{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;padding:0;margin:0 0 14px;font-size:.9rem;color:var(--muted)}
.b-crumb li+li::before{content:"/";margin-right:8px;opacity:.5}.b-crumb a{color:inherit}.b-crumb a:hover{color:var(--pri)}

/* ========== 11. Dải logo / chữ chạy ========== */
.b-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 48px}
.b-logos img{height:32px;width:auto;opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s}.b-logos img:hover{opacity:1;filter:none}
html[data-theme="dark"] .b-logos img,.is-dark .b-logos img{filter:grayscale(1) brightness(0) invert(1);opacity:.6}
.b-logos-t{margin:0 0 22px;text-align:center;font-size:.92rem;color:var(--muted)}
.b-marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.b-marq-in{display:flex;gap:48px;width:max-content;animation:b-marq var(--dur,32s) linear infinite}
.b-marq:hover .b-marq-in{animation-play-state:paused}
@keyframes b-marq{to{transform:translateX(-50%)}}

/* ========== 12. Số liệu ========== */
.b-stats{display:grid;grid-template-columns:repeat(var(--c,4),1fr);gap:var(--gap)}
@media(max-width:991.98px){.b-stats{--c:2!important}}
.b-stat{padding:4px 0}.b-stat b{display:block;font-family:var(--f-head);font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;color:var(--ink);letter-spacing:-.03em}
.b-stat span{display:block;margin-top:6px;color:var(--muted);font-size:.95rem}
.b-stats.is-boxed .b-stat{padding:26px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
.b-stats.is-div .b-stat{padding-left:22px;border-left:2px solid var(--line)}

/* ========== 13. Các bước ========== */
.b-steps{display:grid;grid-template-columns:repeat(var(--c,3),1fr);gap:var(--gap);counter-reset:st;list-style:none;padding:0;margin:0}
@media(max-width:991.98px){.b-steps{grid-template-columns:1fr}}
.b-step{position:relative;counter-increment:st;padding:26px;color:var(--text);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
.b-step::before{content:counter(st,decimal-leading-zero);display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;margin-bottom:16px;border-radius:999px;background:var(--pri);color:var(--pri-ink);font-weight:800;font-family:var(--f-head)}
.b-step h3,.b-step h4{font-size:1.15rem}.b-step p{margin:0}
.b-steps.is-line .b-step{background:transparent;border:0;padding:0 0 0 0}
.b-steps.is-line .b-step::after{content:"";position:absolute;top:22px;left:56px;right:-12px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.b-steps.is-line .b-step:last-child::after{display:none}
@media(max-width:991.98px){.b-steps.is-line .b-step::after{display:none}}
.b-steps.is-v{grid-template-columns:1fr;gap:0}
.b-steps.is-v .b-step{display:grid;grid-template-columns:56px 1fr;gap:4px 18px;background:transparent;border:0;border-radius:0;padding:0 0 28px}
.b-steps.is-v .b-step::before{grid-row:span 2;margin:0}.b-steps.is-v .b-step::after{content:"";position:absolute;left:21px;top:50px;bottom:6px;width:2px;background:var(--line)}
.b-steps.is-v .b-step:last-child::after{display:none}.b-steps.is-v .b-step:last-child{padding-bottom:0}

/* ========== 14. Tab ========== */
.b-tabs-nav{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);margin-bottom:32px}
.b-tabs-nav button{border:0;background:transparent;padding:10px 20px;border-radius:999px;font-weight:650;color:var(--muted);transition:background .2s,color .2s}
.b-tabs-nav button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.b-tabs-nav.is-line{display:flex;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:4px}
.b-tabs-nav.is-line button{border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.b-tabs-nav.is-line button[aria-selected="true"]{box-shadow:none;background:transparent;border-color:var(--pri);color:var(--pri)}
.b-tabs-nav.is-v{display:flex;flex-direction:column;border-radius:var(--r-lg);padding:8px}
.b-tabs-nav.is-v button{text-align:left;border-radius:var(--r)}
.b-tab-pane{animation:b-fade .35s ease}.b-tab-pane[hidden]{display:none}
@keyframes b-fade{from{opacity:0;transform:translateY(8px)}}
@media(max-width:639.98px){.b-tabs-nav{display:flex;overflow-x:auto;flex-wrap:nowrap;border-radius:var(--r)}.b-tabs-nav button{white-space:nowrap}}

/* ========== 15. Hỏi đáp (accordion) ========== */
.b-acc{display:grid;gap:12px}
.b-acc details{border-radius:var(--r);background:var(--card);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.b-acc details[open]{border-color:color-mix(in srgb,var(--pri) 35%,var(--line));box-shadow:var(--sh)}
.b-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:650;color:var(--ink);cursor:pointer}
.b-acc summary::-webkit-details-marker{display:none}
.b-acc summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--pri) 12%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s}
.b-acc details[open] summary::after{transform:rotate(45deg)}
.b-acc .b-acc-b{padding:0 22px 20px;color:var(--text)}.b-acc .b-acc-b>:last-child{margin-bottom:0}
.b-acc.is-line{gap:0}.b-acc.is-line details{border-radius:0;border-width:0 0 1px;background:transparent;box-shadow:none}
.b-acc.is-line summary{padding:22px 0}.b-acc.is-line .b-acc-b{padding:0 0 22px}

/* ========== 16. Băng chuyền (slider) ========== */
.b-slider{position:relative}
.b-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--per,3) - 1)*var(--gap))/var(--per,3));gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px 18px;margin:-6px -2px 0}
.b-track::-webkit-scrollbar{display:none}.b-track>*{scroll-snap-align:start}
@media(max-width:991.98px){.b-track{--per:2!important}}@media(max-width:639.98px){.b-track{--per:1!important;grid-auto-columns:86%}}
.b-slider.is-one .b-track{--per:1!important;grid-auto-columns:100%}
.b-sl-ctl{display:flex;align-items:center;gap:10px;margin-top:22px}.b-slider.is-center .b-sl-ctl{justify-content:center}
.b-sl-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);background:var(--card);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.b-sl-btn:hover{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}.b-sl-btn[disabled]{opacity:.4;pointer-events:none}
.b-dots{display:flex;gap:7px;margin:0 6px}.b-dots button{width:9px;height:9px;padding:0;border-radius:99px;border:0;background:var(--line);transition:width .25s,background .25s}
.b-dots button[aria-current="true"]{width:26px;background:var(--pri)}

/* ========== 17. Nhận xét ========== */
.b-quote{display:flex;flex-direction:column;gap:18px;height:100%;padding:30px;color:var(--text);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
.b-quote>img{align-self:flex-start;max-height:30px;width:auto}.b-quote blockquote{margin:0;font-size:1.04rem;color:var(--ink);line-height:1.65}.b-quote blockquote p{margin:0}
.b-quote .b-who{display:flex;align-items:center;gap:13px;margin-top:auto}
.b-quote .b-who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.b-quote .b-who b{display:block;color:var(--ink);font-size:.98rem}.b-quote .b-who span{font-size:.86rem;color:var(--muted)}
.b-stars{display:flex;gap:3px;color:#f5a524}.b-stars .ic{width:17px;height:17px;fill:currentColor}
.b-qmark{width:38px;height:38px;color:var(--hl);opacity:.9}
.b-quote.is-big{padding:clamp(28px,5vw,56px);text-align:center;align-items:center}.b-quote.is-big blockquote{font-size:clamp(1.15rem,2vw,1.5rem);font-family:var(--f-head);font-weight:500;max-width:46ch}
.b-quote.is-big .b-who{margin-top:4px}

/* ========== 18. Bảng giá ========== */
.b-ptog{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:40px;font-weight:650;color:var(--ink)}
.b-switch{position:relative;width:56px;height:30px;flex:none}.b-switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.b-switch span{position:absolute;inset:0;border-radius:99px;background:var(--bg-3);border:1px solid var(--line);transition:background .2s}
.b-switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .25s}
.b-switch input:checked+span{background:var(--pri);border-color:var(--pri)}.b-switch input:checked+span::after{transform:translateX(26px)}
.b-switch input:focus-visible+span{box-shadow:var(--ring)}
.b-ptog .is-on{color:var(--pri)}.b-ptog .b-badge{margin-left:4px}
.b-plans{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:var(--gap);align-items:stretch}
@media(max-width:1199.98px) and (min-width:992px){.b-plans[style*="--c:4"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin:0 auto}}
@media(max-width:991.98px){.b-plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.b-plan{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px;color:var(--text);border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
.b-plan.is-hot{border:2px solid var(--pri);box-shadow:var(--sh-lg)}
.b-plan .b-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.b-plan h3{margin:0;font-size:1.3rem}.b-plan-d{margin:0;color:var(--muted);font-size:.95rem}
.b-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.b-price b{font-family:var(--f-head);font-size:clamp(2rem,3.4vw,2.6rem);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.b-price span{color:var(--muted);font-size:.95rem}
[data-period="year"] .b-pm,[data-period="month"] .b-py{display:none}
.b-plan .b-list{margin:4px 0 8px;font-size:.96rem}.b-plan .b-btn{margin-top:auto}

/* ========== 19. Video ========== */
.b-video{position:relative;display:block;border-radius:var(--r-img);overflow:hidden;cursor:pointer;background:var(--bg-3)}
.b-video img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.b-video:hover img{transform:scale(1.03)}
.b-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:var(--pri-ink);box-shadow:0 0 0 12px color-mix(in srgb,var(--pri) 25%,transparent);transition:transform .25s}
.b-play .ic{width:28px;height:28px;margin-left:4px;fill:currentColor}
.b-play::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid color-mix(in srgb,var(--pri) 45%,transparent);animation:b-ping 2.2s ease-out infinite}
@keyframes b-ping{from{transform:scale(.85);opacity:1}to{transform:scale(1.5);opacity:0}}
.b-video:hover .b-play{transform:scale(1.08)}
.b-play.is-inline{position:relative;left:auto;top:auto;margin:0;width:54px;height:54px;box-shadow:none}.b-play.is-inline::after{display:none}
.b-vlink{display:inline-flex;align-items:center;gap:12px;font-weight:650;color:var(--ink);cursor:pointer;background:none;border:0;padding:0}
.b-vlink .b-play{position:relative;left:auto;top:auto;margin:0;width:50px;height:50px;box-shadow:0 0 0 7px color-mix(in srgb,var(--pri) 18%,transparent)}.b-vlink .b-play .ic{width:20px;height:20px}

/* ========== 20. Hộp thoại ========== */
.b-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px;background:rgba(4,8,18,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.b-modal.on{opacity:1;visibility:visible}
.b-modal-box{position:relative;width:min(960px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:var(--r-lg);background:var(--card);color:var(--text);box-shadow:var(--sh-lg);transform:translateY(14px) scale(.98);transition:transform .3s}
.b-modal.on .b-modal-box{transform:none}.b-modal-box.is-sm{width:min(520px,100%);padding:30px}
.b-modal-x{position:absolute;right:10px;top:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff}
.b-modal-v{aspect-ratio:16/9;background:#000}.b-modal-v iframe,.b-modal-v video{width:100%;height:100%;border:0}
body.b-lock{overflow:hidden}

/* ========== 21. Kêu gọi hành động ========== */
.b-cta{position:relative;overflow:hidden;padding:clamp(36px,6vw,72px);border-radius:calc(var(--r-lg) * 1.3);background:var(--pri);color:var(--pri-ink);--ink:var(--pri-ink);--text:color-mix(in srgb,var(--pri-ink) 86%,transparent);--hl:var(--pri-ink);--muted:color-mix(in srgb,var(--pri-ink) 70%,transparent);--line:color-mix(in srgb,var(--pri-ink) 24%,transparent)}
.b-cta .b-btn.is-pri{--b-bg:var(--pri-ink);--b-fg:var(--pri)}.b-cta .b-btn.is-line{--b-fg:var(--pri-ink);--b-bd:color-mix(in srgb,var(--pri-ink) 45%,transparent)}
.b-cta.is-dark{background:var(--dark)}.b-cta.is-dark .b-btn.is-pri{--b-bg:var(--pri);--b-fg:var(--pri-ink)}
.b-cta-in{position:relative;z-index:1}.b-cta.is-split .b-cta-in{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
@media(max-width:991.98px){.b-cta.is-split .b-cta-in{grid-template-columns:1fr}}
.b-cta h2{margin-bottom:.35em}.b-cta .b-lead{color:var(--text)}
.b-cta::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,#fff 18%,transparent),transparent 65%);z-index:0}

/* ========== 22. Biểu mẫu ========== */
.b-form{display:grid;gap:16px}.b-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:639.98px){.b-form .row2{grid-template-columns:1fr}}
.b-field{display:grid;gap:7px}.b-field>label,.b-label{font-weight:600;font-size:.93rem;color:var(--ink)}
.b-input,.b-form input:not([type=checkbox]):not([type=radio]):not([type=range]),.b-form select,.b-form textarea{width:100%;min-height:50px;padding:12px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--card);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.b-form textarea,textarea.b-input{min-height:130px;resize:vertical}
.b-input:focus,.b-form input:focus,.b-form select:focus,.b-form textarea:focus{outline:0;border-color:var(--pri);box-shadow:var(--ring)}
.b-input::placeholder,.b-form ::placeholder{color:var(--muted);opacity:.8}
.b-field.is-bad .b-input,.b-field.is-bad input,.b-field.is-bad textarea{border-color:var(--err)}.b-err{font-size:.84rem;color:var(--err)}
.b-check{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;cursor:pointer}.b-check input{width:18px;height:18px;margin-top:3px;accent-color:var(--pri)}
.b-pw{position:relative}.b-pw input{padding-right:52px!important}.b-pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;border-radius:8px}
.b-count{justify-self:end;font-size:.8rem;color:var(--muted)}
.b-inline{display:flex;gap:8px;padding:6px;border-radius:var(--r-btn);background:var(--card);border:1.5px solid var(--line);max-width:520px}
.b-inline input{flex:1;min-width:0;border:0!important;background:transparent!important;padding:0 14px!important;min-height:46px!important;box-shadow:none!important}
.b-inline .b-btn{min-height:46px}
@media(max-width:479.98px){.b-inline{flex-direction:column;border-radius:var(--r)}.b-inline input{min-height:48px!important}}
.b-msg{margin-top:4px;font-size:.93rem}.b-msg.ok{color:var(--ok)}.b-msg.err{color:var(--err)}
.b-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.b-qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.b-qty button{width:40px;height:40px;border:0;background:transparent;font-size:1.2rem;color:var(--ink)}.b-qty input{width:48px;text-align:center;border:0;background:transparent;-moz-appearance:textfield}
.b-qty input::-webkit-inner-spin-button{-webkit-appearance:none}

/* ========== 23. Đăng ký nhận tin ========== */
.b-news{color:var(--text);display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center;padding:clamp(28px,4vw,44px);border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line)}
.b-news h2{font-size:clamp(1.35rem,2.2vw,1.8rem);margin-bottom:.3em}.b-news p{margin:0}.b-news .b-inline{width:min(460px,100%)}
@media(max-width:991.98px){.b-news{grid-template-columns:1fr}}

/* ========== 24. Bài viết ========== */
.b-post{display:flex;flex-direction:column;height:100%;color:var(--text);border-radius:var(--r-lg);overflow:hidden;background:var(--card);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.b-post:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.b-post .b-media{aspect-ratio:16/10}
.b-post-b{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px;flex:1}
.b-post-m{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.84rem;color:var(--muted)}
.b-post h3{font-size:1.14rem;margin:0;line-height:1.4}.b-post h3 a{color:var(--ink)}.b-post h3 a:hover{color:var(--pri)}
.b-post p{margin:0;font-size:.95rem}.b-post .b-more{margin-top:auto;padding-top:6px}

/* ========== 25. Bộ lọc & lưới lọc ========== */
.b-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.b-chips.is-center{justify-content:center}
.b-chip{padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--muted);font-weight:600;font-size:.93rem;transition:all .2s}
.b-chip:hover{color:var(--ink);border-color:var(--ink)}.b-chip.on,.b-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
[data-filter-item].is-out{display:none}

/* ========== 26. Đếm ngược ========== */
.b-cd{display:flex;gap:12px;flex-wrap:wrap}.b-cd>div{min-width:76px;padding:12px 10px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-align:center}
.b-cd b{display:block;font-family:var(--f-head);font-size:1.9rem;font-weight:800;color:var(--ink);line-height:1.1}.b-cd span{font-size:.8rem;color:var(--muted)}

/* ========== 27. Bảng, phân trang, mục lục ========== */
.b-table{width:100%;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.b-table th,.b-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}.b-table th{background:var(--bg-2);color:var(--ink);font-weight:650}
.b-table tr:last-child td{border-bottom:0}.b-table-w{overflow-x:auto}
.b-pager{display:flex;gap:8px;justify-content:center;margin-top:44px;list-style:none;padding:0}
.b-pager a,.b-pager span{min-width:42px;height:42px;padding:0 12px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);color:var(--ink);font-weight:600}
.b-pager .on{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}

/* ========== 28. Thông báo, lên đầu trang, chú thích ========== */
.b-toast{position:fixed;left:50%;bottom:26px;z-index:2100;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:13px 20px;border-radius:14px;background:#0b1224;color:#fff;font-size:.95rem;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);transition:all .25s;max-width:calc(100vw - 32px)}
.b-toast.on{opacity:1;transform:translate(-50%,0)}.b-toast.ok{background:#14532d}.b-toast.err{background:#881337}
.b-top{position:fixed;right:18px;bottom:84px;z-index:900;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--sh);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s}
.b-top.on{opacity:1;visibility:visible;transform:none}.b-top:hover{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
@media(max-width:991.98px){.b-top{display:none}}
[data-tip]{position:relative}[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:6px 10px;border-radius:8px;background:#0b1224;color:#fff;font-size:.78rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s;z-index:5}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.b-copy{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1px dashed var(--line);background:var(--bg-2);font-family:var(--f-mono);font-size:.9rem;color:var(--ink)}
.b-loader{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;background:var(--bg);transition:opacity .4s,visibility .4s}.b-loader.off{opacity:0;visibility:hidden}
.b-loader i{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--pri);animation:b-spin .8s linear infinite}@keyframes b-spin{to{transform:rotate(360deg)}}

/* ========== 29. Hiệu ứng xuất hiện ========== */
.b-js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.b-js [data-rv="left"]{transform:translateX(-26px)}.b-js [data-rv="right"]{transform:translateX(26px)}.b-js [data-rv="zoom"]{transform:scale(.95)}
.b-js [data-rv].in{opacity:1;transform:none}
/* phần đầu trang hiện ngay, không chờ JavaScript (LCP nhanh hơn trên điện thoại) */
.b-js main>:first-child[data-rv],.b-js main>:first-child [data-rv]{opacity:1;transform:none;transition:none}
.b-js [data-rv-d="1"]{transition-delay:.08s}.b-js [data-rv-d="2"]{transition-delay:.16s}.b-js [data-rv-d="3"]{transition-delay:.24s}.b-js [data-rv-d="4"]{transition-delay:.32s}
@media print{.b-js [data-rv]{opacity:1!important;transform:none!important}}

/* ========== 30. Trang đăng nhập / đăng ký ========== */
.b-auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}
.b-auth-side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px;background:var(--dark);color:var(--dark-text)}
.b-auth-side::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 20% 10%,color-mix(in srgb,var(--pri) 45%,transparent),transparent 60%),radial-gradient(500px 400px at 90% 90%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 60%)}
.b-auth-side>*{position:relative}.b-auth-side h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.3rem)}
.b-auth-main{display:grid;place-items:center;padding:40px 20px}
.b-auth-pts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}.b-auth-pts li{position:relative;padding-left:30px;line-height:1.5;opacity:.92}.b-auth-pts li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--pri),var(--acc))}.b-auth-pts li::after{content:"";position:absolute;left:6px;top:7px;width:6px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.b-auth-box .bm-msgbox{margin-top:12px}.b-auth-box .b-check a{color:var(--pri);font-weight:600}.b-auth-box{width:min(420px,100%)}
.b-auth-box h1{font-size:1.9rem;margin-bottom:.3em}
.b-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:22px 0 20px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.b-auth-tabs button{height:42px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:700 .95rem/1 var(--f-body,inherit);cursor:pointer;transition:background .15s,color .15s}
.b-auth-tabs button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.b-auth-tabs button:focus-visible{outline:2px solid var(--pri);outline-offset:2px}.b-auth-alt{margin-top:22px;text-align:center;color:var(--muted);font-size:.95rem}
.b-or{display:flex;align-items:center;gap:14px;margin:6px 0;color:var(--muted);font-size:.85rem}.b-or::before,.b-or::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:991.98px){.b-auth{grid-template-columns:1fr}.b-auth-side{display:none}}

/* ========== 31. Header ========== */
.b-hd{position:fixed;left:0;right:0;top:0;z-index:1000;height:var(--hd-h);display:flex;align-items:center;transition:background .3s,box-shadow .3s,border-color .3s,height .3s;border-bottom:1px solid transparent;--hd-fg:var(--ink);--hd-bg:color-mix(in srgb,var(--bg) 88%,transparent)}
.b-hd.is-stuck,.b-hd.is-solid,.b-hd:has(.b-nav.on){background:var(--hd-bg);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(15,23,42,.5)}
.b-hd-in{display:flex;align-items:center;gap:18px;width:100%}
.b-logo{display:inline-flex;align-items:center;gap:10px;color:var(--hd-fg);flex:none;font-family:var(--f-brand,'Be Vietnam Pro',sans-serif);font-weight:800;font-size:1.45rem;letter-spacing:-.04em;white-space:nowrap}
.b-logo:hover{color:var(--hd-fg)}.b-logo img{height:40px;width:auto}
.b-nav{flex:1;display:flex;align-items:center;justify-content:center}
.b-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.b-menu>li{position:relative}
.b-menu-a{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;font-weight:600;font-size:.97rem;color:var(--hd-fg);white-space:nowrap}
.b-menu-a:hover,.b-menu>li:hover>.b-menu-a,.b-menu-a[aria-current="page"]{color:var(--pri)}
.b-menu-a .ic{width:15px;height:15px;transition:transform .2s}.b-menu>li:hover>.b-menu-a .ic{transform:rotate(180deg)}
.b-sub{position:absolute;left:50%;top:100%;z-index:10;min-width:240px;padding:10px;margin-top:8px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .2s,transform .2s,visibility .2s}
.b-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.b-menu>li:hover>.b-sub,.b-menu>li:focus-within>.b-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.b-sub.is-mega{position:fixed;left:50%;top:calc(var(--hd-h) - 6px);width:min(1080px,calc(100vw - 32px));padding:0;margin:0}
.b-hd-act{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.b-burger{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--hd-fg);place-items:center}
.b-nav .b-nav-cta{display:none}
.b-hd .b-btn.is-line{--b-fg:var(--hd-fg)}
@media(max-width:1199.98px){.b-menu-a{padding:10px 10px;font-size:.93rem}}
@media(max-width:991.98px){
  :root{--hd-h:64px}
  .b-burger{display:grid}.b-hd-act .b-hd-cta{display:none}
  .b-nav{position:fixed;left:0;right:0;top:var(--hd-h);bottom:0;z-index:999;display:block;overflow-y:auto;padding:12px var(--gut) 40px;background:var(--bg);border-top:1px solid var(--line);transform:translateX(100%);transition:transform .3s;visibility:hidden}
  .b-nav.on{transform:none;visibility:visible}
  .b-menu{flex-direction:column;align-items:stretch;gap:0}.b-menu>li{border-bottom:1px solid var(--line)}
  .b-menu-a{padding:15px 4px;font-size:1.05rem;justify-content:space-between}
  .b-sub,.b-sub.is-mega{position:static;transform:none!important;opacity:1;visibility:visible;display:none;width:auto;margin:0 0 12px;box-shadow:none;border-radius:var(--r)}
  .b-menu>li.open>.b-sub{display:block}.b-menu>li.open>.b-menu-a .ic{transform:rotate(180deg)}
  .b-nav .b-nav-cta{display:flex;margin-top:20px}
}
.hd-over .b-hd:not(.is-stuck){--hd-fg:#fff}.hd-over .b-hd:not(.is-stuck) .b-burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.hd-over .b-hd:not(.is-stuck) .b-btn.is-line{--b-bd:rgba(255,255,255,.4)}
main{display:block}

/* Menu lớn "Mẫu Website": danh mục bên trái, mẫu bên phải */
.bm-mg{display:grid;grid-template-columns:290px 1fr;min-height:420px}
.bm-mg-cats{list-style:none;margin:0;padding:12px;border-right:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.bm-mg-ca{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:var(--ink);font-weight:600;font-size:.94rem}
.bm-mg-ca .ic{width:18px;height:18px}.bm-mg-ca .bm-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--card);color:var(--pri);border:1px solid var(--line);flex:none}
.bm-mg-ca .tx{flex:1}.bm-mg-ca .ct{font-size:.78rem;color:var(--muted);font-weight:600}.bm-mg-ca .ch{opacity:.4}
.bm-mg-cat.on>.bm-mg-ca{background:var(--card);color:var(--pri);box-shadow:var(--sh)}
.bm-mg-pn{display:none;position:absolute;left:290px;right:0;top:0;bottom:52px;padding:22px 24px;overflow:auto}
.bm-mg-cat.on>.bm-mg-pn{display:block}
.bm-mg{position:relative}
.bm-mg-ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.bm-mg-ph b{color:var(--ink);font-size:1.02rem}.bm-mg-ph a{font-size:.88rem;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.bm-mg-tp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bm-mg-t{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;color:var(--text)}
.bm-mg-t:hover{background:var(--bg-2);color:var(--text)}
.bm-mg-t .bm-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;background:color-mix(in srgb,var(--c,var(--pri)) 13%,transparent);color:var(--c,var(--pri))}
.bm-mg-t .bm-ic .ic{width:19px;height:19px}
.bm-mg-t b{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:.95rem}.bm-mg-t b i{font-style:normal;font-size:.68rem;padding:2px 7px;border-radius:99px;background:#16a34a;color:#fff}
.bm-mg-t small{display:block;font-size:.83rem;color:var(--muted);line-height:1.45;margin-top:2px}
.bm-mg-all{position:absolute;left:290px;right:0;bottom:0;height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border-top:1px solid var(--line);font-weight:650;font-size:.92rem}
@media(max-width:991.98px){
  .bm-mg{display:block;min-height:0}.bm-mg-cats{border:0;padding:6px;border-radius:var(--r)}
  .bm-mg-pn{position:static;padding:4px 4px 10px}.bm-mg-cat:not(.on)>.bm-mg-pn{display:none}.bm-mg-cat.on>.bm-mg-ca .ch{transform:rotate(90deg)}
  .bm-mg-tp{grid-template-columns:1fr}.bm-mg-ph{display:none}.bm-mg-all{position:static;height:auto;padding:14px;border:0}
}
/* màu riêng từng mẫu trong menu */
.c-blue{--c:#2563eb}.c-indigo{--c:#4f46e5}.c-violet{--c:#7c3aed}.c-pink{--c:#db2777}.c-red{--c:#dc2626}.c-orange{--c:#ea580c}.c-amber{--c:#d97706}
.c-green{--c:#16a34a}.c-teal{--c:#0d9488}.c-cyan{--c:#0891b2}.c-sky{--c:#0284c7}.c-slate{--c:#475569}.c-lime{--c:#65a30d}.c-rose{--c:#e11d48}

/* ========== 32. Footer ========== */
.b-ft{position:relative;background:var(--dark);color:var(--dark-text);--ink:var(--dark-ink);--text:var(--dark-text);--line:rgba(255,255,255,.1);--muted:color-mix(in srgb,var(--dark-text) 75%,transparent);padding:clamp(56px,7vw,88px) 0 0;font-size:.96rem}
.b-ft a{color:var(--dark-text)}.b-ft a:hover{color:#fff}
.b-ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px 56px;padding-bottom:48px}
@media(max-width:991.98px){.b-ft-top{grid-template-columns:1fr 1fr}.b-ft-brand{grid-column:1/-1}}
@media(max-width:575.98px){.b-ft-top{grid-template-columns:1fr}}
.b-ft .b-logo{--hd-fg:#fff;margin-bottom:14px}
.b-ft-brand>p{max-width:38ch;margin-bottom:20px}
.b-ft h3{font-size:1rem;color:#fff;margin:6px 0 18px;letter-spacing:0}
.b-ft-links{list-style:none;padding:0;margin:0;display:grid;gap:11px}.b-ft-links.is-2{grid-template-columns:1fr 1fr;gap:11px 20px}
.b-ft-ct{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}.b-ft-ct li{display:flex;gap:10px;align-items:flex-start}.b-ft-ct .ic{margin-top:.25em;color:#fff;opacity:.7}
.b-social{display:flex;gap:10px;list-style:none;padding:0;margin:0}
.b-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;transition:background .2s,transform .2s}
.b-social a:hover{background:var(--pri);transform:translateY(-2px);color:#fff}.b-social .ic{width:17px;height:17px}
.b-ft-bot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;padding:24px 0 28px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.b-ft-bot p{margin:0}.b-ft-bot ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
@media(max-width:991.98px){.b-ft{padding-bottom:84px}}

/* ========== 34. Tiện ích chung của Bống Media: nút Sáng/Tối, giỏ hàng, nhắc đơn ========== */
/* tên biến cũ dùng trong các trang riêng (cửa hàng, blog, trang chủ…) – trỏ về biến mới */
body{--t-bg:var(--bg);--t-soft:var(--bg-2);--t-soft2:var(--bg-3);--t-card:var(--card);--t-line:var(--line);--t-line2:color-mix(in srgb,var(--line) 70%,var(--muted) 30%);
  --t-ink:var(--ink);--t-mute:var(--muted);--t-body:var(--text);--t-a:var(--pri);--t-link:var(--pri-2);--t-hero:var(--bg-2);
  --t-glow1:color-mix(in srgb,var(--acc) 16%,transparent);--t-glow2:rgba(34,211,238,.16);--t-glow3:color-mix(in srgb,var(--pri) 14%,transparent);--t-grid:color-mix(in srgb,var(--pri) 8%,transparent);
  --t-shadow:rgba(15,23,60,.30);--t-pricebox:linear-gradient(135deg,color-mix(in srgb,var(--pri) 6%,#fff),color-mix(in srgb,var(--acc) 6%,#fff));
  --t-tagbg:color-mix(in srgb,var(--pri) 9%,#fff);--t-tagfg:var(--pri-2);--t-teal:#0e7490;--t-teal-bg:rgba(14,165,198,.10);--t-teal-line:rgba(14,165,198,.4);
  --t-ok:var(--ok);--t-okbg:var(--ok-bg);--t-err:var(--err);--t-warn:#9a3412;--t-warnbg:var(--warn-bg);--t-warnline:#fed7aa;--t-head:color-mix(in srgb,var(--bg) 86%,transparent);
  --g:linear-gradient(120deg,var(--pri),var(--acc))}
html[data-theme="dark"] body{--t-shadow:rgba(0,0,0,.65);--t-pricebox:linear-gradient(135deg,color-mix(in srgb,var(--pri) 18%,#0d1220),color-mix(in srgb,var(--acc) 16%,#0d1220));
  --t-tagbg:color-mix(in srgb,var(--pri) 16%,transparent);--t-tagfg:color-mix(in srgb,var(--pri) 55%,#fff);--t-teal:#6ee7f9;--t-teal-bg:rgba(34,211,238,.12);--t-teal-line:rgba(34,211,238,.4);
  --t-glow1:color-mix(in srgb,var(--acc) 28%,transparent);--t-glow2:rgba(34,211,238,.13);--t-glow3:color-mix(in srgb,var(--pri) 24%,transparent);--t-grid:rgba(148,163,184,.07);--t-warn:#fdba74;--t-warnline:rgba(251,146,60,.35)}
.bm-tt,.bm-cart{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .15s,transform .15s}
.bm-tt:hover,.bm-cart:hover{border-color:var(--pri);transform:translateY(-1px);color:var(--ink)}
.bm-tt svg{width:20px;height:20px}.bm-cart svg{width:21px;height:21px}.bm-tt .i-sun{display:none}
html[data-theme="dark"] .bm-tt .i-sun{display:block}html[data-theme="dark"] .bm-tt .i-moon{display:none}
.bm-tt-fab{position:fixed;left:18px;bottom:18px;z-index:900;box-shadow:var(--sh)}
.hd-over .b-hd:not(.is-stuck) :is(.bm-tt,.bm-cart){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.bm-cart-li{position:relative;display:flex;align-items:center}.bm-cart.has{border-color:var(--pri)}
.bm-cart-n{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--g);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg);line-height:1}
.bm-cart-n[hidden]{display:none}
@keyframes bmBump{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes bmPop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.bm-cart.bump{animation:bmBump .6s}.bm-cart-n.pop{animation:bmPop .5s}
.bm-fly{position:fixed;z-index:3000;width:46px;height:46px;border-radius:50%;background:var(--g) center/cover no-repeat;border:2px solid #fff;box-shadow:0 12px 30px -6px rgba(0,0,0,.4);pointer-events:none}
.bm-mini{position:absolute;right:0;top:calc(100% + 12px);width:350px;max-width:92vw;background:var(--card);color:var(--text);border:1px solid var(--line);border-top:3px solid var(--pri);border-radius:16px;box-shadow:var(--sh-lg);padding:14px;z-index:1300;text-align:left}
.bm-mini-h{font-weight:800;color:var(--ink);margin:0 0 8px;font-size:15px}
.bm-mini-i{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);color:inherit}
.bm-mini-i img{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--bg-3)}
.bm-mini-i b{display:block;font-size:13.5px;line-height:1.3;color:var(--ink)}.bm-mini-i small{color:var(--muted);font-size:12.5px}
.bm-mini-more,.bm-mini-empty{font-size:13px;color:var(--muted);margin:8px 0}
.bm-mini-t{display:flex;justify-content:space-between;margin:12px 0;font-size:15px;color:var(--ink)}
.bm-mini-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bm-mini .bs-btn,.bs-remind .bs-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 12px;border-radius:11px;font-weight:700;font-size:14px;border:1px solid var(--line);color:var(--ink);background:var(--card)}
.bm-mini .bs-btn.pri,.bs-remind .bs-btn{background:var(--g);border-color:transparent;color:#fff}.bm-mini .bs-btn.block{display:flex;width:100%}
.bs-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#0b1224;color:#fff;padding:12px 18px;border-radius:12px;font-size:14.5px;z-index:2100;transition:all .25s;pointer-events:none;box-shadow:0 14px 40px -12px rgba(0,0,0,.6)}
.bs-toast.on{opacity:1;transform:translate(-50%,0)}.bs-toast.act{pointer-events:auto}.bs-toast.act a{color:#9db4ff;font-weight:700;margin-left:6px}
.bs-remind{position:fixed;left:18px;bottom:18px;z-index:1100;max-width:min(460px,calc(100vw - 36px));display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 40px 14px 16px;border-radius:16px;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:var(--sh-lg);transform:translateY(20px);opacity:0;pointer-events:none;transition:all .35s}
.bs-remind.on{transform:none;opacity:1;pointer-events:auto}.bs-remind-t{font-size:14px;line-height:1.5;flex:1 1 220px}.bs-remind-t b{color:var(--ink)}
.bs-remind button{position:absolute;top:6px;right:8px;border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
.bm-msgbox{font-size:14px;margin-top:8px;color:var(--ok)}.bm-msgbox.err{color:var(--err)}.bm-msgbox:empty{display:none}
.bm-hp{position:absolute!important;left:-9999px!important;opacity:0!important;height:1px!important;width:1px!important}
@media(max-width:991.98px){.bm-mini{display:none!important}}
@media(prefers-reduced-motion:reduce){.bm-cart.bump,.bm-cart-n.pop{animation:none}}

/* ========== Thanh tiện ích cố định bên phải: giỏ hàng + Sáng/Tối ========== */
.bm-dock{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:1050;display:flex;flex-direction:column;gap:10px;padding:8px;border-radius:18px;background:color-mix(in srgb,var(--card) 82%,transparent);border:1px solid var(--line);box-shadow:var(--sh-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bm-dock:empty{display:none}
.bm-dock .bm-tt,.bm-dock .bm-cart{width:44px;height:44px;border-radius:13px}
.bm-dock .bm-tt:hover,.bm-dock .bm-cart:hover{transform:translateX(-2px)}
.bm-dock .bm-cart-n{top:-6px;right:-6px}
.bm-dock .bm-mini{right:calc(100% + 18px);top:50%;transform:translateY(-50%)}
.bm-dock .bm-mini::after{content:"";position:absolute;right:-8px;top:50%;width:14px;height:14px;background:var(--card);border-right:1px solid var(--line);border-top:1px solid var(--line);transform:translateY(-50%) rotate(45deg)}
.bm-tt-fab{display:none}
@media(max-width:991.98px){.bm-dock{right:6px;padding:5px;gap:6px;border-radius:14px}.bm-dock .bm-tt,.bm-dock .bm-cart{width:36px;height:36px;border-radius:11px}.bm-dock .bm-tt svg,.bm-dock .bm-cart svg{width:18px;height:18px}}
/* nút liên hệ nhanh trong thanh bên phải */
.bm-soc{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bm-soc-a{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;border:1px solid var(--line);background:var(--card);color:var(--ink);transition:background .15s,border-color .15s,color .15s,transform .15s}
.bm-soc-a .ic{width:19px;height:19px}
.bm-soc-a:hover{transform:translateX(-2px);color:#fff;border-color:transparent;background:var(--c,var(--pri))}
.bm-soc-a.is-phone{--c:#16a34a}.bm-soc-a.is-facebook{--c:#1877f2}.bm-soc-a.is-linkedin{--c:#0a66c2}.bm-soc-a.is-telegram{--c:#229ed9}.bm-soc-a.is-zalo{--c:#0068ff}.bm-soc-a.is-youtube{--c:#ff0000}.bm-soc-a.is-tiktok{--c:#111}.bm-soc-a.is-instagram{--c:#e1306c}.bm-soc-a.is-messenger{--c:#0084ff}
.bm-soc-tg{display:none}
@media(max-width:991.98px){.bm-soc{gap:6px;padding-bottom:6px;position:relative}.bm-soc-a{width:36px;height:36px;border-radius:11px}.bm-soc-a .ic{width:17px;height:17px}
  .bm-soc-tg{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:11px;border:1px solid transparent;background:var(--g,var(--pri));color:#fff;cursor:pointer}
  .bm-soc-tg svg{width:18px;height:18px}.bm-soc-tg .x,.bm-soc.open .bm-soc-tg svg:first-child{display:none}.bm-soc.open .bm-soc-tg .x{display:block}
  .bm-soc .bm-soc-a{display:none}
  .bm-soc.open .bm-soc-a{display:grid;position:absolute;right:calc(100% + 10px);top:calc((var(--i) - 1) * 42px);box-shadow:var(--sh-lg);animation:bmSoc .18s ease both;animation-delay:calc(var(--i) * 25ms)}
}
@keyframes bmSoc{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media print{.bm-dock{display:none!important}}

/* ========== Tài khoản trên header ========== */
.bm-acct{display:flex;align-items:center;gap:8px}
.bm-acct a,.bm-acct button{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:12px;font:600 .92rem/1 var(--f-body,inherit);white-space:nowrap;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s,color .15s}
.bm-acct svg{width:18px;height:18px;flex:none}
.bm-acct-out{border:1px solid var(--line);background:var(--card);color:var(--ink)}
.bm-acct-out:hover{border-color:var(--pri);color:var(--ink)}
.bm-acct-in{border:1px solid transparent;background:var(--g,var(--pri));color:#fff!important}
.bm-acct-in:hover{filter:brightness(1.07)}
.bm-acct-me{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 14px 0 5px!important}
.bm-acct-me:hover{border-color:var(--pri);color:var(--ink)}
.bm-acct-me .av{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--g,var(--pri));color:#fff;font-weight:800;font-size:.9rem}
.bm-acct-me .nm{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.hd-over .b-hd:not(.is-stuck) :is(.bm-acct-out,.bm-acct-me){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
@media(max-width:1199.98px){.bm-acct-out span{display:none}.bm-acct-out{padding:0 11px!important}}
@media(max-width:991.98px){.bm-acct-in span,.bm-acct-me .nm{display:none}.bm-acct-in{width:40px;padding:0!important;justify-content:center}.bm-acct-me{padding:0 5px!important}}
.bs-acct-note{padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--pri) 8%,var(--card));border:1px solid color-mix(in srgb,var(--pri) 25%,var(--line));font-size:14px;line-height:1.55;color:var(--text)}
.bs-acct-note a{color:var(--pri);font-weight:700}

/* ========== 33. In ấn ========== */
@media print{.b-hd,.b-ft,.b-top,.bm-nav,.b-toast{display:none!important}.b-hero{padding-top:24px}}

/* ========== 35. Trang tài liệu (chính sách, bài viết, trợ giúp) ========== */
.b-doc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.b-doc-nav{position:sticky;top:calc(var(--hd-h) + 20px);display:grid;gap:4px;list-style:none;margin:0;padding:0}
.b-doc-nav a{display:block;padding:9px 14px;border-radius:10px;color:var(--muted);font-weight:500;font-size:.95rem}
.b-doc-nav a:hover{background:var(--bg-2);color:var(--ink)}.b-doc-nav .on a,.b-doc-nav a[aria-current]{background:color-mix(in srgb,var(--pri) 10%,transparent);color:var(--pri);font-weight:650}
@media(max-width:991.98px){.b-doc{grid-template-columns:1fr}.b-doc-nav{position:static;display:flex;flex-wrap:wrap;gap:6px}.b-doc-nav a{border:1px solid var(--line)}}
.b-prose{font-size:1.04rem;line-height:1.75}.b-prose>*:first-child{margin-top:0}
.b-prose h2{font-size:1.45rem;margin:2.2rem 0 .8rem}.b-prose h3{font-size:1.2rem;margin:1.8rem 0 .6rem}.b-prose h4,.b-prose h5{font-size:1.05rem;margin:1.4rem 0 .5rem}
.b-prose img{margin:1.2rem 0;border-radius:var(--r)}.b-prose blockquote{margin:1.4rem 0;padding:16px 22px;border-left:3px solid var(--pri);background:var(--bg-2);border-radius:0 var(--r) var(--r) 0;color:var(--ink)}
.b-prose table{margin:1.2rem 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:block;overflow-x:auto}.b-prose th,.b-prose td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.b-prose th{background:var(--bg-2);color:var(--ink)}
.b-meta{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;color:var(--muted);font-size:.92rem}.b-meta span{display:inline-flex;align-items:center;gap:6px}
.b-hero-mini{position:relative;overflow:hidden}
.b-hero-mini::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 15% 0%,color-mix(in srgb,var(--pri) 14%,transparent),transparent 70%),radial-gradient(600px 300px at 90% 100%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%);pointer-events:none}
.b-hero-mini>.b-wrap{position:relative}
.b-hero-mini .b-btns{justify-content:center}
.b-job{display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:center;padding:22px 24px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.b-job:hover{border-color:var(--pri);box-shadow:var(--sh)}.b-job h3{font-size:1.12rem;margin:0 0 6px}.b-job p{margin:0;font-size:.94rem}
.b-job .b-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media(max-width:639.98px){.b-job{grid-template-columns:1fr}}
.b-cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
.b-cmp th,.b-cmp td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:center}.b-cmp th:first-child,.b-cmp td:first-child{text-align:left}
.b-cmp thead th{position:sticky;top:var(--hd-h);background:var(--bg);vertical-align:bottom;font-size:1.05rem;color:var(--ink)}
.b-cmp thead th small{display:block;font-family:var(--f-head);font-size:1.6rem;font-weight:800;color:var(--ink);margin:4px 0 10px}
.b-cmp tr.is-group td{background:var(--bg-2);font-weight:700;color:var(--ink)}
.b-cmp .ic{color:var(--ok)}.b-cmp .no{color:var(--muted);opacity:.6}
.b-ctlist{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.b-ctlist li{display:flex;gap:13px;align-items:flex-start}
.b-ctlist .ic{width:42px;height:42px;padding:11px;border-radius:12px;background:color-mix(in srgb,var(--pri) 10%,transparent);color:var(--pri);flex:none}
.b-ctlist small{display:block;color:var(--muted);font-size:.82rem}.b-ctlist b{color:var(--ink);font-weight:600}.b-ctlist a{color:var(--ink)}

@media(max-width:1199.98px){.b-hd-act .b-hd-cta{display:none}}
.b-tabs>*{min-width:0}

/* Menu con dạng danh sách (Ứng dụng) */
.b-sub-l{list-style:none;margin:0;padding:0;display:grid;gap:2px;min-width:260px}
.b-sub-l a{display:block;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;transition:background .2s}
.b-sub-l a:hover{background:var(--bg-2);color:var(--ink)}
.b-sub-l b{display:flex;align-items:center;gap:8px;font-size:.95rem}
.b-sub-l b i{padding:1px 7px;border-radius:99px;background:linear-gradient(120deg,#4f7cff,#8b5cf6);color:#fff;font-size:.68rem;font-style:normal;font-weight:700}
.b-sub-l small{display:block;margin-top:2px;color:var(--muted);font-size:.8rem;line-height:1.4}

/* Xác minh không phải robot + nhập mã email */
.bm-pow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);font-size:14px;cursor:pointer;margin:4px 0 12px}
.bm-pow small{margin-left:auto;color:var(--muted,#5b6784);font-size:12px}
.bm-pow-c{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);flex:none;position:relative;background:var(--card)}
.bm-pow.run .bm-pow-c{border-color:#4f7cff;border-top-color:transparent;border-radius:50%;animation:bmspin .8s linear infinite}
.bm-pow.ok .bm-pow-c{background:#16a34a;border-color:#16a34a}.bm-pow.ok .bm-pow-c::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.bm-pow.err{border-color:#ef4444}.bm-pow.err .bm-pow-c{border-color:#ef4444}
@keyframes bmspin{to{transform:rotate(360deg)}}
.bm-verify{display:grid;gap:12px}.bm-verify label{display:grid;gap:6px;font-weight:600}
.bm-linkbtn{font:inherit;background:none;border:0;padding:0;color:#3f66f0;font-weight:600;cursor:pointer}.bm-linkbtn[disabled]{color:var(--muted,#8a94ad);cursor:default}