/* Giao diện trang chủ kiểu trợ lý AI: sidebar trái thay header/footer (layout ai.tpl) */
:root{
	--bg:#ffffff; --card:#ffffff; --surface:#f0f4f9; --surface-2:#e6ecf4; --surface-3:#dde3ea;
	--ink:#1f1f1f; --ink-2:#444746; --muted:#5f6368; --line:#e3e6ea;
	--primary:#03054f; --primary-2:#1b1f7a; --blue:#0b57d0; --blue-soft:#d3e3fd;
	--g1:#4285f4; --g2:#9b72cb; --g3:#d96570;
	--grad:linear-gradient(74deg, var(--g1) 0%, var(--g2) 18%, var(--g3) 34%, var(--g3) 46%, var(--g2) 58%, var(--g1) 72%);
	--radius:24px;
	--sb-w:288px; --sb-mini:72px;
}
body.ai *{font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
html{scroll-behavior:smooth;}
body.ai{background:var(--bg); color:var(--ink); font-size:16px; line-height:1.65; font-weight:400;}
body.ai a{color:inherit; text-decoration:none;}
body.ai :focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:12px;}
body.ai .container{max-width:1120px;}
body.ai .muted{color:var(--muted);}
body.ai section{scroll-margin-top:72px;}

.grad-text{background:var(--grad); background-size:400% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 9s ease-in-out infinite alternate;}
@keyframes shine{from{background-position:0% 50%;} to{background-position:100% 50%;}}
.spark{display:inline-grid; place-items:center; background:var(--grad); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ===== Nút bo tròn ===== */
.pbtn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:10px 22px; font-weight:500; font-size:15px; border:0; transition:background .2s, box-shadow .2s;}
.pbtn-fill{background:var(--primary); color:#fff !important;}
.pbtn-fill:hover{background:var(--primary-2); box-shadow:0 1px 3px rgba(0,0,0,.18);}
.pbtn-tonal{background:var(--surface); color:var(--ink);}
.pbtn-tonal:hover{background:var(--surface-2); color:var(--ink);}
.pbtn-text{background:transparent; color:var(--blue) !important; padding:10px 14px;}
.pbtn-text:hover{background:#eef3fd;}

/* ===== Sidebar ===== */
/* Sidebar còn được gắn vào các layout cũ (có ga.css, style.css) nên tự đặt font và màu chữ */
.sb, .m-bar, .pop{font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.5; color:var(--ink);}
.sb *, .m-bar *, .pop *{font-family:inherit;}
.sb a, .m-bar a, .pop a{text-decoration:none;}
.sb{position:fixed; inset:0 auto 0 0; width:var(--sb-w); background:var(--surface); z-index:1040; display:flex; flex-direction:column; padding:12px; transition:width .25s cubic-bezier(.2,.7,.2,1), transform .25s cubic-bezier(.2,.7,.2,1); overflow:hidden;}
.sb-top{display:flex; align-items:center; gap:8px; height:48px; margin-bottom:12px; position:relative;}
.sb-brand{display:flex; align-items:center; gap:10px; padding:0 8px; height:44px; border-radius:999px; white-space:nowrap;}
.sb-brand img{width:30px; height:30px; border-radius:8px;}
.sb-brand span{font-size:20px; font-weight:500; color:var(--ink); letter-spacing:-.01em;}
.icon-btn{flex:none; width:48px; height:48px; border-radius:50%; border:0; background:transparent; color:var(--ink-2); font-size:22px; display:grid; place-items:center;}
.icon-btn:hover{background:var(--surface-3);}
.icon-btn.sb-collapse{margin-left:auto; width:34px; height:34px; font-size:14px; margin-right:7px;}
/* Thu gọn: nút tròn mang logo, rê chuột thì đổi sang icon "mở thanh bên" */
.sb-expand{display:none; width:48px; height:48px; border-radius:50%; border:0; background:var(--surface-3); place-items:center; color:var(--ink-2); font-size:20px; padding:0;}
.sb-expand .ic-logo{width:28px; height:28px; border-radius:7px; grid-area:1/1;}
.sb-expand .ic-open{grid-area:1/1; opacity:0;}
.sb-expand:hover .ic-logo, .sb-expand:focus-visible .ic-logo{opacity:0;}
.sb-expand:hover .ic-open, .sb-expand:focus-visible .ic-open{opacity:1;}
/* Chú thích khi rê chuột */
[data-tip]{position:relative;}
[data-tip]::after{content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); background:#1f1f1f; color:#fff; font-size:13.5px; font-weight:500; white-space:nowrap; padding:8px 14px; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .15s .3s; z-index:10;}
[data-tip]:hover::after{opacity:1;}
.sb-collapse[data-tip]::after{left:auto; right:0; top:calc(100% + 6px); transform:none;}

.sb-scroll{flex:1; overflow-y:auto; overflow-x:hidden; margin:0 -12px; padding:0 12px; scrollbar-width:thin;}
.sb-label{font-size:13px; font-weight:500; color:var(--ink); padding:8px 16px 6px; white-space:nowrap;}
.sb-item{display:flex; align-items:center; gap:14px; height:40px; padding:0 14px; border-radius:999px; color:var(--ink-2); font-size:14.5px; white-space:nowrap; position:relative;}
.sb-item i{font-size:18px; width:20px; text-align:center; flex:none;}
.sb-item span{overflow:hidden; text-overflow:ellipsis;}
.sb-item:hover{background:var(--surface-3); color:var(--ink);}
.sb-item.active{background:var(--blue-soft); color:#041e49; font-weight:500;}
.sb-sep{height:1px; background:var(--surface-3); margin:12px 8px;}
.sb-bottom{padding-top:8px; position:relative;}
.sb-guest{display:flex; flex-direction:column; gap:8px; padding:12px 4px 4px;}
.sb-guest .pbtn{justify-content:center; background:var(--card);}
.sb-user{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:16px; min-width:0;}
.sb-user:hover, .sb-user.active{background:var(--surface-3);}
.sb-user .av{width:36px; height:36px; border-radius:50%; background:var(--g2); color:#fff; display:grid; place-items:center; font-size:18px; flex:none; overflow:hidden;}
.sb-user .av img{width:100%; height:100%; object-fit:cover;}
.sb-user .who{min-width:0;}
.sb-user b{display:block; font-weight:500; font-size:14.5px; color:var(--ink); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sb-user small{color:var(--muted); font-size:12.5px;}
.sb-up{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; background:var(--card); margin-top:8px; font-size:14px; white-space:nowrap; color:var(--ink);}
.sb-up i{font-size:18px;}
.sb-up:hover{box-shadow:0 1px 3px rgba(0,0,0,.12);}
button.sb-up{width:100%; border:0; text-align:left; font:inherit; font-size:14px; cursor:pointer;}
#miniLogin{display:none;}

/* Menu "Giới thiệu & trợ giúp" bật lên, nổi ngoài sidebar */
.pop{position:fixed; width:260px; max-width:calc(100vw - 24px); background:var(--card); border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.16); padding:8px 0; display:none; z-index:1060;}
.pop.open{display:block;}
.pop a{display:flex; align-items:center; gap:12px; padding:10px 18px; font-size:14.5px; color:var(--ink);}
.pop a:hover{background:var(--surface);}
.pop a i{font-size:17px; color:var(--ink-2); width:20px; text-align:center;}
.pop hr{margin:6px 0; border-color:var(--line); opacity:1;}
.pop .copy{padding:6px 18px 4px; font-size:12.5px; color:var(--muted);}

/* Menu tài khoản khi bấm avatar */
button.sb-user{width:100%; border:0; background:transparent; text-align:left; font:inherit; cursor:pointer;}
.sb-user .who{flex:1;}
.sb-user .acc-dots{color:var(--muted); font-size:16px;}
.acc-pop{width:340px; max-height:calc(100vh - 24px); overflow-y:auto; padding:8px 8px 6px; border-radius:24px; background:var(--surface);}
.acc-pop > a{border-radius:12px; padding:9px 14px;}
.acc-pop > a:hover{background:var(--surface-3);}
.acc-pop hr{margin:6px 10px;}
.acc-head{background:var(--card); border-radius:20px; padding:20px 16px 16px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.acc-head .av{width:64px; height:64px; border-radius:50%; background:var(--g2); color:#fff; display:grid; place-items:center; font-size:30px; overflow:hidden; margin-bottom:10px;}
.acc-head .av img{width:100%; height:100%; object-fit:cover;}
.acc-head b{font-weight:500; font-size:17px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.acc-head small{color:var(--muted); font-size:13px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pop .acc-manage{display:inline-flex; margin-top:14px; padding:8px 20px; border:1px solid var(--line); border-radius:999px; font-size:14px; font-weight:500; color:var(--blue);}
.pop .acc-manage:hover{background:var(--blue-soft);}
.acc-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0;}
.pop .acc-tiles a{flex-direction:column; gap:6px; padding:12px 4px 10px; background:var(--card); border-radius:16px; font-size:13px; text-align:center; line-height:1.3;}
.pop .acc-tiles a:hover{background:var(--surface-2);}
.pop .acc-tiles a i{font-size:21px; width:auto;}
.pop .acc-tiles i.c-blue{color:var(--g1);} .pop .acc-tiles i.c-violet{color:var(--g2);} .pop .acc-tiles i.c-rose{color:var(--g3);}
.pop .acc-tiles i.c-amber{color:#e37400;} .pop .acc-tiles i.c-green{color:#1e8e3e;}
.acc-biz-list{background:var(--card); border-radius:20px; padding:6px;}
.acc-lbl{font-size:12.5px; font-weight:500; color:var(--muted); padding:8px 10px 4px;}
.pop a.acc-biz{padding:7px 10px; border-radius:12px; gap:12px;}
.pop a.acc-biz:hover{background:var(--surface);}
.acc-biz img{width:30px; height:30px; border-radius:8px; object-fit:cover; flex:none; background:var(--surface);}
.acc-biz span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pop a.acc-more i{width:30px; height:30px; border-radius:8px; background:var(--surface); display:grid; place-items:center; font-size:16px; color:var(--blue);}
.pop a.acc-more{color:var(--blue);}
.acc-skel{height:30px; margin:7px 10px; border-radius:8px; background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%); background-size:200% 100%; animation:accSk 1.2s linear infinite;}
@keyframes accSk{to{background-position:-200% 0;}}

/* Bảng thông báo: nổi cạnh sidebar trên desktop, toàn màn hình trên điện thoại */
button.sb-item{width:100%; border:0; background:transparent; text-align:left; font:inherit; cursor:pointer;}
.ntf{position:fixed; top:12px; bottom:12px; left:calc(var(--sb-w) + 12px); width:400px; max-width:calc(100vw - 24px); background:var(--card); border-radius:24px; box-shadow:0 4px 32px rgba(0,0,0,.18); z-index:1065; display:flex; flex-direction:column; font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); line-height:1.5; opacity:0; transform:translateX(-12px); pointer-events:none; transition:opacity .2s, transform .2s;}
.ntf *{font-family:inherit;}
.ntf.open{opacity:1; transform:none; pointer-events:auto;}
body.sb-collapsed .ntf{left:calc(var(--sb-mini) + 12px);}
.ntf-top{display:flex; align-items:center; justify-content:space-between; padding:10px 10px 6px 24px;}
.ntf-top b{font-size:20px; font-weight:500;}
.ntf-top .icon-btn{width:40px; height:40px; font-size:18px;}
.ntf-top .icon-btn:hover{background:var(--surface);}
.ntf-body{flex:1; overflow-y:auto; padding:4px 12px 12px;}
.ntf-item{display:flex; gap:12px; padding:14px 12px; border-radius:18px; transition:background .2s;}
.ntf-item:hover{background:var(--surface);}
.ntf-item + .ntf-item{border-top:1px solid var(--line);}
.ntf-item:hover + .ntf-item{border-top-color:transparent;}
.ntf-item .ic{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:18px; flex:none; background:var(--blue-soft); color:var(--g1);}
.ntf-item .ic.t1{background:#f3e8fd; color:var(--g2);}
.ntf-item .ic.t2{background:#e6f4ea; color:#1e8e3e;}
.ntf-item .ic.t3{background:#fce8e6; color:var(--g3);}
.ntf-item .ic.t4{background:#fef7e0; color:#e37400;}
.ntf-item .bd{flex:1; min-width:0;}
.ntf-item .hd{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 8px;}
.ntf-item .hd b{font-weight:500; font-size:15px;}
.ntf-item .hd small{font-size:12.5px; color:var(--muted);}
.ntf-item .ntf-biz{font-size:13.5px; color:var(--ink-2); font-weight:500; margin-top:2px;}
.ntf-item .tx{font-size:14.5px; color:var(--ink-2); margin-top:4px; overflow-wrap:anywhere;}
.ntf-item .acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.ntf-item .acts .pbtn{padding:6px 14px; font-size:13.5px;}
.ntf-item:hover .acts .pbtn-tonal{background:var(--card);}
.ntf-more{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:8px; padding:10px; border:0; border-radius:999px; background:var(--surface); color:var(--ink); font-size:14px;}
.ntf-more:hover{background:var(--surface-2);}
.ntf-empty{text-align:center; padding:56px 24px; color:var(--ink-2);}
.ntf-empty > i{font-size:40px; color:var(--g2); display:block; margin-bottom:12px;}
.ntf-empty b{display:block; font-weight:500; font-size:16px; color:var(--ink); margin-bottom:6px;}
.ntf-empty p{font-size:14px; margin:0;}
@media (max-width:991.98px){
	.ntf, body.sb-collapsed .ntf{inset:0; width:auto; max-width:none; border-radius:0; transform:translateY(12px);}
	.ntf.open{transform:none;}
}

.app{margin-left:var(--sb-w); transition:margin-left .25s cubic-bezier(.2,.7,.2,1); min-height:100vh;}

/* Thu gọn: chỉ áp dụng trên desktop, điện thoại luôn hiện đủ chữ */
@media (min-width:992px){
	body.sb-collapsed .sb{width:var(--sb-mini); overflow:visible;}
	body.sb-collapsed .sb-expand{display:grid;}
	body.sb-collapsed .sb .hide-mini{display:none !important;}
	body.sb-collapsed .sb-item{width:48px; padding:0; justify-content:center; gap:0;}
	body.sb-collapsed .sb-item span{display:none;}
	body.sb-collapsed .sb-user{padding:6px; justify-content:center; width:auto;}
	body.sb-collapsed .sb-up{width:48px; padding:0; height:48px; justify-content:center; border-radius:50%;}
	body.sb-collapsed .sb-up span{display:none;}
	body.sb-collapsed #miniLogin{display:flex;}
	body.sb-collapsed .app{margin-left:var(--sb-mini);}
}

/* Điện thoại: sidebar trượt ra */
.m-bar{display:none;}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.32); z-index:1035; opacity:0; pointer-events:none; transition:opacity .25s;}
@media (max-width:991.98px){
	.sb{transform:translateX(-100%); max-width:85vw;}
	body.sb-open .sb{transform:none; box-shadow:0 0 40px rgba(0,0,0,.2);}
	body.sb-open .scrim{opacity:1; pointer-events:auto;}
	.app{margin-left:0;}
	.m-bar{display:flex; align-items:center; gap:4px; position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); padding:4px 8px;}
	.m-bar .sb-brand{padding:0 4px;}
	.m-acts{margin-left:auto; display:flex; align-items:center; gap:2px;}
	.m-acts .icon-btn{width:42px; height:42px; font-size:20px;}
	.m-acts .icon-btn:hover{background:var(--surface);}
	.m-av{width:34px; height:34px; margin:0 4px 0 6px; padding:0; border:0; border-radius:50%; overflow:hidden; background:var(--g2); color:#fff; display:grid; place-items:center; font-size:17px; flex:none;}
	.m-av img{width:100%; height:100%; object-fit:cover;}
	.m-login{padding:7px 16px; font-size:14px;}
}

/* ===== Gắn sidebar vào layout cũ (Account, Fanpage, page.tpl) =====
   style.css chừa lề 82px/336px cho thanh icon cũ và thanh dưới 62px trên điện thoại, ở đây bỏ đi */
.app #Main{margin:0; padding:0 24px;}
.app #FpMain{margin:0; padding:0 !important; min-height:0;}
.app #FpCont{max-width:none;}
@media (max-width:991.98px){
	.app .ac-tabs{top:56px;}
}
@media (max-width:768px){
	.app #Main{margin:0; padding:0 16px !important;}
}

/* ===== Trang doanh nghiệp (fanpage.tpl, .fp) ===== */
.fp{max-width:1080px; margin:0 auto; padding:16px 24px 64px; color:var(--ink);}
.fp *:not([class*="fa-"]):not(.bi){font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
@media (max-width:768px){.fp{padding:8px 16px 48px;}}

/* Phần đầu: ảnh bìa, logo, tên, đánh giá, nút, tab */
.fp-head{margin-bottom:28px;}
.fp-cover{height:clamp(120px,22vw,220px); border-radius:28px; background:
	radial-gradient(500px 220px at 15% 0%, rgba(66,133,244,.35), transparent 70%),
	radial-gradient(500px 220px at 90% 100%, rgba(217,101,112,.30), transparent 70%),
	linear-gradient(120deg,#e8eefc,#efe7f7 55%,#fbe9ea); background-size:cover; background-position:center;}
.fp-id{display:flex; align-items:flex-end; gap:20px; padding:0 24px; margin-top:12px; flex-wrap:wrap;}
.fp-av{flex:none; margin-top:-64px; width:112px; height:112px; border-radius:28px; background:var(--card); padding:4px; box-shadow:0 4px 16px rgba(3,5,79,.12);}
.fp-av img{width:100%; height:100%; object-fit:contain; border-radius:24px;}
.fp-meta{flex:1; min-width:220px; padding-bottom:4px;}
.fp-name{font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-.015em; line-height:1.2; margin-bottom:6px;}
.fp-sub{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:14px; color:var(--ink-2);}
.fp-sub b{font-weight:600; color:var(--ink);}
.fp .fp-sub a{color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;}
.fp-stars, .fp .fa-star, .fp .fa-star-half-alt{color:#f5a524;}
.fp-stars i{font-size:13px;}
.fp-chip{display:inline-flex; align-items:center; gap:4px; background:#e6f4ea; color:#137333; border-radius:999px; padding:2px 10px; font-size:13px; font-weight:500;}
.fp-acts{display:flex; flex-wrap:wrap; gap:8px; padding-bottom:6px;}
.fp-acts .pbtn{padding:9px 18px; font-size:14.5px;}
.fp-following{cursor:default; background:#e6f4ea !important; color:#137333 !important;}
.fp-menu{border:0; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.16); padding:8px 0; min-width:240px;}
.fp .fp-menu .dropdown-item{display:flex; align-items:center; gap:12px; padding:10px 18px; font-size:14.5px; color:var(--ink);}
.fp-menu .dropdown-item:hover{background:var(--surface);}
.fp-tabs{display:flex; gap:4px; margin-top:20px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;}
.fp-tabs::-webkit-scrollbar{display:none;}
.fp .fp-tabs a{flex:none; position:relative; padding:12px 18px; font-size:15px; font-weight:500; color:var(--muted); text-decoration:none; border-radius:12px 12px 0 0;}
.fp .fp-tabs a:hover{color:var(--ink); background:var(--surface);}
.fp .fp-tabs a.on{color:var(--ink);}
.fp-tabs a.on::after{content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--grad); background-size:200% 100%;}
.fp-tabs small{font-size:12px; background:var(--surface); border-radius:999px; padding:1px 8px; margin-left:4px; color:var(--ink-2);}
@media (max-width:575.98px){
	.fp-id{padding:0 8px; gap:12px;}
	.fp-av{width:88px; height:88px; border-radius:22px; margin-top:-52px;}
	.fp-meta{min-width:100%; order:2;}
	.fp-acts{order:3;}
}

/* Phần thân: thẻ, tiêu đề, sản phẩm, nút theo phong cách mới */
.fp .card{border:0; border-radius:24px; background:var(--surface); box-shadow:none !important;}
.fp .card-body{padding:24px;}
.fp .card.text-bg-success{background:#e6f4ea !important; color:#137333 !important;}
.fp h1, .fp h2, .fp .text-xl.text-b, .fp .text-lg.text-b, .fp .text-bu.text-lg{font-weight:500 !important; letter-spacing:-.01em; color:var(--ink);}
.fp h1.text-xl{font-size:clamp(22px,2.4vw,28px);}
.fp h2.text-lg, .fp .text-lg.text-b:not(.my-3):not(.mb-2):not(.mt-3){font-size:20px;}
.fp .text-bu{text-transform:none !important; font-weight:600 !important;}
.fp .text-b{font-weight:600 !important;}
.fp .col-desc, .fp .card p{color:var(--ink-2);}
.fp .col-desc i{color:var(--muted); margin-right:4px;}
.fp a{color:var(--blue);}
.fp a.pbtn-tonal{color:var(--ink);} .fp a.pbtn-fill{color:#fff;}
.fp a.btn-primary, .fp a.btn-warning{color:#fff;} .fp a.btn-outline-primary, .fp a.btn-outline-success{color:var(--ink);}
.fp a.text-dark, .fp .line-3 a, .fp .line-2 a{color:var(--ink) !important;}
.fp img.border, .fp img.shadow-sm, .fp .border.rounded-2, .fp .swiper img{border:0 !important; box-shadow:none !important; border-radius:18px !important; background:var(--surface);}
.fp .swiper img, .fp .row img.rounded-2{aspect-ratio:1; object-fit:cover;}
.fp .border.rounded-2.shadow-sm{border-radius:18px !important; overflow:hidden;}
.fp .text-line{text-decoration:line-through; color:var(--muted);}
.fp .progress{height:8px !important; background:var(--surface-3); border-radius:999px;}
.fp .progress-bar{background:var(--grad) !important; background-size:300% 100% !important; border-radius:999px;}
.fp .text-5x{font-weight:500;}
.fp .btn{border-radius:999px; font-weight:500;}
.fp .btn.py-3, .fp .btn.py-2{border-radius:20px;}
.fp .btn-primary, .fp .btn-warning{background:var(--primary); border-color:var(--primary); color:#fff;}
.fp .btn-primary:hover, .fp .btn-warning:hover{background:var(--primary-2); border-color:var(--primary-2); color:#fff;}
.fp .btn-outline-primary, .fp .btn-outline-success{background:var(--surface); border-color:transparent; color:var(--ink);}
.fp .btn-outline-primary:hover, .fp .btn-outline-success:hover{background:var(--surface-3); border-color:transparent; color:var(--ink);}
.fp .btn small{opacity:.75;}
.fp .btn .text-bu, .fp .btn .text-b{color:inherit;}
.fp .form-control, .fp .form-select{border-color:var(--line); border-radius:12px; padding:9px 12px;}
.fp .form-control:focus, .fp .form-select:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}
.fp .table{--bs-table-bg:transparent; margin:0;}
.fp .table td{border-color:var(--line); color:var(--ink-2);}
.fp .breadcrumb{font-size:14px; margin-bottom:20px;}
.fp .breadcrumb-item a{color:var(--muted); text-decoration:none;}
.fp .breadcrumb-item a:hover{color:var(--ink);}
.fp .swiper-button-prev, .fp .swiper-button-next{width:40px; height:40px; border-radius:50%; background:var(--card); box-shadow:0 2px 10px rgba(0,0,0,.12); color:var(--ink);}
.fp .swiper-button-prev::after, .fp .swiper-button-next::after{font-size:15px; font-weight:700;}
.fp .pagination .page-link{border:0; border-radius:999px !important; margin:0 2px; color:var(--ink-2);}
.fp .pagination .active .page-link{background:var(--primary); color:#fff;}

/* ===== Mở đầu ===== */
.hero{min-height:100vh; display:flex; align-items:center; padding:48px 0;}
.hero > .container{width:100%;}
@media (max-width:991.98px){.hero{min-height:calc(100vh - 56px);}}
.hero .hello{font-weight:500; letter-spacing:-.025em; line-height:1.12; font-size:clamp(38px,6vw,64px); margin:0;}
.hero .hello .q{display:block; color:#c4c7c5;}
.hero .sub{color:var(--ink-2); font-size:clamp(16px,1.7vw,18px); max-width:640px; margin:24px 0 0;}
.fade-up{opacity:0; transform:translateY(10px); animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.1s;} .d2{animation-delay:.25s;} .d3{animation-delay:.4s;} .d4{animation-delay:.55s;}
@keyframes fadeUp{to{opacity:1; transform:none;}}

.sugg{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:40px;}
.sugg a{position:relative; display:block; background:var(--surface); border-radius:16px; padding:16px 16px 56px; min-height:150px; color:var(--ink); font-size:15px; line-height:1.5; transition:background .2s;}
.sugg a:hover{background:var(--surface-3);}
.sugg a .ic{position:absolute; right:12px; bottom:12px; width:38px; height:38px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-size:18px; color:var(--ink-2);}
@media (max-width:991.98px){.sugg{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575.98px){.sugg{gap:8px; margin-top:28px;} .sugg a{min-height:112px; padding:12px 12px 48px; font-size:14px;} .sugg a .ic{width:32px; height:32px; font-size:16px; right:10px; bottom:10px;}}

/* ===== Màu icon ===== */
.c-blue{color:var(--g1);} .c-violet{color:var(--g2);} .c-rose{color:var(--g3);}
.c-amber{color:#e37400;} .c-teal{color:#12858a;} .c-green{color:#1e8e3e;}

/* ===== Tiêu đề mục ===== */
.sec{padding:80px 0;}
.sec-h{font-weight:500; letter-spacing:-.02em; font-size:clamp(28px,3.6vw,42px); line-height:1.2; margin:0 0 12px;}

/* ===== Hodine Business ===== */
.biz{border-radius:32px; padding:3px; background:var(--grad); background-size:200% 100%;}
.biz-in{border-radius:29px; background:
	radial-gradient(600px 300px at 0% 0%, rgba(66,133,244,.10), transparent 70%),
	radial-gradient(600px 300px at 100% 100%, rgba(217,101,112,.10), transparent 70%), var(--card);}
.biz .tag{display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:14px; background:var(--surface); border-radius:999px; padding:6px 14px;}
.biz h2{font-weight:500; letter-spacing:-.02em; font-size:clamp(28px,3.6vw,42px); line-height:1.2;}
.biz .lead-t{color:var(--ink-2); font-size:17px; max-width:640px;}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:991.98px){.plans{grid-template-columns:1fr;}}
.plan{position:relative; background:var(--surface); border-radius:24px; padding:28px; display:flex; flex-direction:column;}
.plan.hot{background:var(--card); box-shadow:0 0 0 2px var(--g2) inset, 0 8px 28px rgba(155,114,203,.18);}
.plan .ribbon{position:absolute; top:-12px; right:24px; background:var(--grad); background-size:200% 100%; color:#fff; font-size:12.5px; font-weight:600; border-radius:999px; padding:3px 12px;}
.plan .ph{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.plan .ph .ic{width:44px; height:44px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-size:20px; flex:none;}
.plan.hot .ph .ic{background:var(--surface);}
.plan .ph b{display:block; font-size:18px; font-weight:500;}
.plan .ph small{color:var(--muted); font-size:13.5px;}
.plan .amt{font-size:34px; font-weight:500; letter-spacing:-.02em; line-height:1.1;}
.plan .amt small{font-size:15px; color:var(--muted); font-weight:400;}
.plan .desc{color:var(--ink-2); font-size:14.5px; margin:8px 0 18px;}
.plan ul{list-style:none; padding:0; margin:0 0 24px; flex:1;}
.plan li{display:flex; gap:10px; padding:5px 0; font-size:14.5px; line-height:1.5;}
.plan li i{color:#1e8e3e; font-size:16px; line-height:1.4;}
.plan li i.c-rose{color:var(--g3);}
.plan .packs{background:var(--card); border-radius:16px; padding:4px 14px; margin-bottom:16px;}
.plan .packs div{display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14.5px;}
.plan .packs div + div{border-top:1px solid var(--line);}
.plan .packs b{font-weight:500;}
.plan .packs em{font-style:normal; font-size:12px; font-weight:600; color:#137333; background:#e6f4ea; border-radius:6px; padding:1px 6px; margin-left:4px;}
.plan .pbtn{width:100%; justify-content:center;}
.plan .pbtn-tonal{background:var(--card);}
.plan.hot .pbtn-tonal{background:var(--surface);}
.biz .fine{font-size:13.5px; color:var(--muted);}

/* ===== Hỏi đáp ===== */
.faq details{background:var(--surface); border-radius:20px; margin-bottom:10px; transition:background .2s;}
.faq details[open]{background:var(--surface-2);}
.faq summary{list-style:none; cursor:pointer; padding:20px 24px; font-weight:500; font-size:17px; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary i{transition:transform .2s; color:var(--ink-2);}
.faq details[open] summary i{transform:rotate(180deg);}
.faq .ans{padding:0 24px 20px; color:var(--ink-2);}

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

/* ===== Các trang About (page.tpl, #MainBody.ab) =====
   Bài giới thiệu sản phẩm (.ab-doc), văn bản pháp lý (.ab-legal), khung kêu gọi cuối trang (.ab-cta) */
.ab{color:var(--ink); font-size:16.5px; line-height:1.7;}
.ab *:not([class*="fa-"]):not(.bi){font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
.ab h1, .ab .title-main{font-weight:500 !important; font-size:clamp(32px,4.4vw,50px) !important; letter-spacing:-.025em; line-height:1.15; margin:0 0 20px; padding:0;}
.ab h2{font-weight:500 !important; font-size:clamp(24px,2.8vw,32px); letter-spacing:-.015em; line-height:1.25; margin:56px 0 14px;}
.ab h3{font-weight:500 !important; font-size:19px; line-height:1.4; margin:0 0 8px;}
.ab p, .ab li{color:var(--ink-2);}
.ab p{margin:0 0 14px;}
.ab b, .ab strong{font-weight:600; color:var(--ink);}
.ab img{border-radius:24px; max-width:100%;}
.ab hr{border:0; height:1px; background:var(--line); opacity:1; margin:40px 0;}
.ab section{padding:0 !important; margin:0 0 8px;}
.ab section.bg-gray{padding:clamp(24px,4vw,40px) !important; margin-top:48px;}
.ab section.bg-gray > .row > div > h2:first-child{margin-top:0;}
.ab .text-desc{color:var(--ink-2); font-size:17px;}
.ab-tag{display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:14px; color:var(--ink); background:var(--surface); border-radius:999px; padding:6px 14px; margin-bottom:20px;}
.ab-tag i{font-size:15px;}
.ab-lead{font-size:clamp(17px,1.6vw,19px) !important; color:var(--ink-2);}

/* Thẻ: nền xám nhạt, không viền, bo lớn */
.ab .card{border:0; border-radius:var(--radius); background:var(--surface); box-shadow:none !important; transition:background .2s;}
.ab .card:hover{background:var(--surface-2);}
.ab .card-body{padding:28px;}
.ab .card h2, .ab .card h3{font-size:19px !important; font-weight:500 !important; margin:0 0 10px; letter-spacing:-.01em;}
.ab .card p{font-size:15px;}
.ab .card p:last-child{margin-bottom:0;}
/* Icon lớn kiểu cũ thu thành vòng tròn nhỏ */
.ab .fa-5x, .ab .fa-4x{font-size:22px !important; width:52px; height:52px; border-radius:50%; background:var(--card); display:inline-grid !important; place-items:center; color:var(--g2) !important;}
.ab .card .mb-4:has(> .fa-5x){margin-bottom:18px !important;}
.ab .bg-gray{background:var(--surface) !important; border-radius:32px !important;}
.ab .bg-gray .card{background:var(--card);}

/* Nút kiểu cũ đổi sang nút bo tròn */
.ab .btn{border-radius:999px; font-weight:500; padding:10px 22px; font-size:15px;}
.ab .btn-outline-dark, .ab .btn-default{background:var(--primary); border:0; color:#fff;}
.ab .btn-outline-dark:hover, .ab .btn-default:hover{background:var(--primary-2); color:#fff;}
.ab .btn-default{background:var(--card); color:var(--ink);}
.ab .btn-default:hover{background:var(--surface-3); color:var(--ink);}

/* Bài giới thiệu sản phẩm */
.ab-doc > h1 + p, .ab-doc > .ab-lead{font-size:clamp(17px,1.6vw,19px); color:var(--ink-2);}
.ab-doc ul{list-style:none; padding:0; margin:6px 0 18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px;}
.ab-doc li{display:flex; gap:10px; align-items:flex-start; background:var(--surface); border-radius:14px; padding:12px 14px; font-size:15px; line-height:1.5;}
.ab-doc li::before{content:"\F26E"; font-family:"bootstrap-icons" !important; color:#1e8e3e; font-size:16px; line-height:1.4;}
.ab-doc li p{margin:0;}

/* Khung kêu gọi cuối trang */
.ab-cta{margin-top:56px; border-radius:28px; padding:3px; background:var(--grad); background-size:200% 100%;}
.ab-cta > div{border-radius:25px; padding:32px; background:
	radial-gradient(500px 240px at 0% 0%, rgba(66,133,244,.10), transparent 70%),
	radial-gradient(500px 240px at 100% 100%, rgba(217,101,112,.10), transparent 70%), var(--card);}
.ab-cta h2{margin:0 0 10px !important;}
.ab-cta p{font-size:17px;}
.ab-cta .acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.ab-cta .pbtn-tonal{background:var(--surface);}

/* Văn bản pháp lý: khổ đọc hẹp, mục rõ ràng */
.ab-legal h2{font-size:21px; margin:40px 0 12px; padding-top:28px; border-top:1px solid var(--line);}
.ab-legal hr{display:none;}
.ab-legal ul{padding-left:22px; margin:0 0 14px;}
.ab-legal li{margin:4px 0;}
.ab-legal li::marker{color:var(--g2);}
.ab-legal .ab-meta{display:inline-flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); background:var(--surface); border-radius:999px; padding:4px 14px;}
.ab-step{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--grad); background-size:250% 100%; color:#fff; font-size:14px; font-weight:600; margin-right:10px; vertical-align:middle;}
.ab .card h3:has(.ab-step){display:flex; align-items:center;}
.ab .ab-li{display:flex; align-items:flex-start; margin-bottom:12px;}
.ab .ab-li .ab-step{flex:none; margin-top:-2px;}
.ab-fp{display:flex; flex-direction:column; align-items:center; text-align:center; height:100%; background:var(--surface); border-radius:20px; padding:20px 16px; transition:background .2s;}
.ab-fp:hover{background:var(--surface-2);}
.ab-fp img{width:64px; height:64px; object-fit:cover; border-radius:16px; background:var(--card); margin-bottom:12px;}
.ab-fp b{color:var(--ink); font-weight:500; font-size:15px; line-height:1.35; margin-bottom:6px;}
.ab-fp span{color:var(--muted); font-size:13.5px; line-height:1.5;}

/* Trang giới thiệu chung (about/index.tpl) */
.abh{padding:8px 0 8px;}
.abh h1{max-width:820px;}
.abh .ab-lead{max-width:760px;}
.abh-acts{display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 18px;}
.abh-notes{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; color:var(--muted);}
.abh-notes i{color:#1e8e3e; margin-right:4px;}
.ab-sub{color:var(--ink-2); max-width:720px; margin-bottom:22px !important;}
.ab-pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.ab-pillar{background:var(--surface); border-radius:24px; padding:26px; display:flex; flex-direction:column;}
.ab-pillar .ic, .ab-prod .ic{width:48px; height:48px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-size:21px; margin-bottom:16px; flex:none;}
.ab-pillar h3{font-size:19px !important;}
.ab-pillar ul{list-style:none; padding:0; margin:6px 0 0; flex:1;}
.ab-pillar li{display:flex; gap:9px; padding:4px 0; font-size:15px; line-height:1.5;}
.ab-pillar li::before{content:"\F26E"; font-family:"bootstrap-icons" !important; color:#1e8e3e;}
.ab-pillar .more{margin-top:14px; font-size:14.5px; font-weight:500; color:var(--blue) !important;}
.ab-prods{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.ab-prod{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border-radius:20px; padding:18px; color:var(--ink) !important; transition:background .2s;}
.ab-prod:hover{background:var(--surface-2);}
.ab-prod .ic{margin:0; width:44px; height:44px; font-size:19px;}
.ab-prod b{display:block; font-weight:500; font-size:16px; margin-bottom:2px;}
.ab-prod span{display:block; color:var(--muted); font-size:14px; line-height:1.5;}
.ab-prod .new{font-style:normal; display:inline-block; font-size:11.5px; font-weight:600; color:#fff; background:var(--grad); background-size:200% 100%; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:2px;}
.ab-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; counter-reset:f;}
.ab-flow > div{position:relative; background:var(--surface); border-radius:20px; padding:22px 20px;}
.ab-flow b{display:block; font-weight:500; font-size:16.5px; margin:12px 0 4px;}
.ab-flow p{font-size:14.5px; margin:0;}
.ab-why{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px;}
.ab-why > div{display:flex; gap:14px; padding:18px 0; border-top:1px solid var(--line);}
.ab-why > div > i{font-size:22px; line-height:1.2; flex:none; align-self:flex-start; display:block;}
.ab-why b{display:block; font-weight:500; font-size:17px; margin-bottom:4px;}
.ab-why p{margin:0; font-size:15px;}
.ab-vision{margin-top:56px; background:var(--surface); border-radius:32px; padding:clamp(24px,4vw,44px);}
.ab-vision h2{margin-top:0 !important;}
.ab-vision .quote{font-size:clamp(19px,2vw,23px); line-height:1.5; color:var(--ink); font-weight:400; margin-bottom:12px;}
.ab-pillars.two{grid-template-columns:repeat(2,1fr);}
.ab-pillar > p{font-size:15px; color:var(--ink-2); margin-bottom:6px;}
.ab-rates{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.ab-rates > div{background:var(--surface); border-radius:20px; padding:20px;}
.ab-rates span{display:block; font-size:14px; color:var(--muted);}
.ab-rates b{display:block; font-size:30px; font-weight:600; color:var(--ink); line-height:1.3; margin:4px 0 6px;}
.ab-rates b small{font-size:17px; font-weight:500;}
.ab-rates p{margin:0; font-size:14px; line-height:1.5;}
.ab-note{font-size:15px; color:var(--ink-2); margin-top:16px !important;}
@media (max-width:991.98px){.ab-pillars, .ab-prods{grid-template-columns:repeat(2,1fr);} .ab-rates{grid-template-columns:repeat(2,1fr);} .ab-flow{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575.98px){.ab-pillars, .ab-pillars.two, .ab-prods, .ab-flow, .ab-why{grid-template-columns:1fr;} .ab-pillar{padding:22px;} .ab-rates > div{padding:16px;} .ab-rates b{font-size:25px;} .ab-rates b small{font-size:14px;}}

/* Breadcrumb của page.tpl ($out.crumb) */
.crumb{margin:0 0 24px; font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;}
.crumb ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0; padding:0; font-size:14px;}
.crumb li{display:flex; align-items:center; gap:4px; color:var(--ink); font-weight:500;}
.crumb li + li::before{content:"\F285"; font-family:"bootstrap-icons" !important; font-size:11px; color:var(--muted); margin:0 4px;}
.crumb a{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:400; text-decoration:none; padding:4px 10px; border-radius:999px;}
.crumb a:hover{background:var(--surface); color:var(--ink);}
.crumb li:first-child a{padding-left:0;}
.crumb li:first-child a:hover{padding-left:10px;}

/* ===== Trung tâm trợ giúp (page.tpl, #MainBody.ab.sp) ===== */
.sp h2{margin-top:48px;}
.sp .sp-h1{font-size:clamp(26px,3vw,36px) !important; margin-bottom:12px;}
.sp-hero{padding:8px 0 4px;}

/* Ô tìm kiếm dạng viên thuốc */
.sp-search{display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:999px; padding:6px 6px 6px 18px; margin:0 0 28px; transition:background .2s, box-shadow .2s;}
.sp-search:focus-within{background:var(--card); box-shadow:0 0 0 2px var(--blue-soft), 0 4px 16px rgba(3,5,79,.08);}
.sp-search > i{color:var(--muted); font-size:17px;}
.sp-search input{flex:1; min-width:0; border:0; outline:none; background:transparent; font-size:15.5px; padding:8px 4px; color:var(--ink);}
.sp-search input::placeholder{color:var(--muted);}
.sp-search .pbtn{padding:9px 20px;}
.sp-search.big{padding:8px 8px 8px 24px; margin:28px 0 8px; max-width:720px;}
.sp-search.big input{font-size:17px; padding:12px 6px;}
.sp-search.big > i{font-size:20px;}
.sp-search.big .pbtn{padding:12px 26px; font-size:16px;}
.sp-side .sp-search{margin-bottom:16px; background:var(--card); border:1px solid var(--line);}

/* Lưới chủ đề */
.sp-topics{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;}
.sp-topic{position:relative; display:flex; flex-direction:column; gap:14px; background:var(--surface); border-radius:20px; padding:20px 20px 18px; min-height:150px; color:var(--ink) !important; text-decoration:none !important; transition:background .2s;}
.sp-topic:hover{background:var(--surface-2);}
.sp-topic .ic{width:56px; height:56px; border-radius:16px; background:var(--card); display:grid; place-items:center; overflow:hidden;}
.sp-topic .ic img{width:36px; height:36px; object-fit:contain; border-radius:0;}
.sp-topic b{font-weight:500; font-size:15.5px; line-height:1.4; padding-right:24px;}
.sp-topic > .bi{position:absolute; right:18px; bottom:18px; color:var(--muted); transition:transform .2s, color .2s;}
.sp-topic:hover > .bi{transform:translateX(3px); color:var(--ink);}

/* Danh sách bài hướng dẫn */
.sp-count{font-size:14px; color:var(--muted); margin:18px 0 10px;}
.sp-list{display:flex; flex-direction:column; gap:8px;}
.sp-item{display:flex; align-items:center; gap:16px; background:var(--surface); border-radius:18px; padding:18px 20px; text-decoration:none !important; transition:background .2s;}
.sp-item:hover{background:var(--surface-2);}
.sp-item > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.sp-item b{font-weight:500; font-size:16.5px; color:var(--ink); line-height:1.4;}
.sp-item span{font-size:14.5px; color:var(--ink-2); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.sp-item small{font-size:13px; color:var(--muted);}
.sp-item > .bi{color:var(--muted); flex:none;}
.sp-empty{background:var(--surface); border-radius:20px; padding:28px; margin-top:18px;}
.sp-empty > .bi{font-size:28px; color:var(--g2); display:block; margin-bottom:10px;}
.sp .pagination .page-link{border:0; border-radius:999px !important; margin:0 2px; color:var(--ink-2);}
.sp .pagination .active .page-link{background:var(--primary); color:#fff;}

/* Cột phải */
.sp-side{position:sticky; top:24px; display:flex; flex-direction:column; gap:16px;}
@media (max-width:991.98px){.sp-side{position:static;}}
.sp-nav{background:var(--surface); border-radius:20px; padding:12px;}
.sp-nav .lbl{font-size:13px; font-weight:500; color:var(--ink); padding:6px 10px 8px;}
.sp-nav a{display:block; padding:9px 12px; border-radius:12px; font-size:14.5px; color:var(--ink-2); text-decoration:none;}
.sp-nav a:hover{background:var(--surface-3); color:var(--ink);}
.sp-nav a.on{background:var(--blue-soft); color:#041e49; font-weight:500;}
.sp-help{border-radius:24px; padding:24px; background:
	radial-gradient(300px 160px at 0% 0%, rgba(66,133,244,.14), transparent 70%),
	radial-gradient(300px 160px at 100% 100%, rgba(217,101,112,.14), transparent 70%), var(--surface);}
.sp-help .ic{width:44px; height:44px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-size:20px; color:var(--g2); margin-bottom:14px;}
.sp-help h3{font-size:18px !important; margin-bottom:6px !important;}
.sp-help p{font-size:14.5px; margin-bottom:16px;}
.sp-tip{background:var(--surface); border-radius:20px; padding:20px;}
.sp-tip b{display:block; margin-bottom:8px; font-weight:500;}
.sp-tip ul{margin:0; padding-left:18px; font-size:14.5px;}
.sp-tip li{margin:4px 0;}

/* Bài hướng dẫn */
.sp-article .ab-tag{text-decoration:none;}
.sp-content{margin-top:24px; padding-top:24px; border-top:1px solid var(--line); color:var(--ink-2);}
.sp-content h2{font-size:22px; margin:32px 0 10px;}
.sp-content h3{font-size:18px; margin:24px 0 8px;}
.sp-content img{max-width:100%; height:auto; border-radius:16px; margin:8px 0;}
.sp-content ul, .sp-content ol{padding-left:22px; margin:0 0 14px;}
.sp-content li{margin:4px 0;}
.sp-content a{color:var(--blue);}
.sp-content table{width:100%; border-collapse:collapse; margin:12px 0;}
.sp-content td, .sp-content th{border:1px solid var(--line); padding:8px 12px;}
.sp-feedback{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:40px; background:var(--surface); border-radius:20px; padding:18px 22px;}
.sp-feedback b{font-weight:500;}
.sp-feedback .acts{display:flex; gap:8px;}
.sp-feedback .pbtn-tonal{background:var(--card);}
.sp-feedback .pbtn-tonal:hover{background:var(--surface-3);}

/* Gửi câu hỏi */
.sp-form{background:var(--surface); border-radius:24px; padding:24px; margin-top:8px;}
.sp-form .form-label{font-weight:500; font-size:14.5px; color:var(--ink);}
.sp-form .form-control{border-color:var(--line); border-radius:12px; padding:10px 14px; background:var(--card);}
.sp-form .form-control:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}
.sp-note{display:flex; gap:8px; align-items:flex-start; background:#fef7e0; border-radius:14px; padding:12px 14px; font-size:14.5px; margin-bottom:16px; color:var(--ink-2);}
.sp-note a{color:var(--blue);}

/* ===== Đăng nhập, đăng ký, quên/đặt lại mật khẩu (layout auth.tpl) ===== */
body.auth{background:var(--surface); color:var(--ink); font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:15.5px; line-height:1.6; margin:0;}
body.auth *{font-family:inherit;}
body.auth a{text-decoration:none;}
.auth-wrap{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px;}
.auth-card{width:100%; max-width:1040px; background:var(--card); border-radius:28px; padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:24px 48px;}
.auth-logo img{width:48px; height:48px; display:block; margin-bottom:20px;}
.auth-side h1{font-size:36px; font-weight:400; line-height:1.25; margin:0 0 12px; color:var(--ink);}
.auth-lead{font-size:16px; color:var(--ink-2); margin:0 0 24px;}
.auth-perks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.auth-perks li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2);}
.auth-perks i{width:32px; height:32px; border-radius:50%; background:var(--surface); display:grid; place-items:center; flex:none; color:var(--g2); font-size:15px;}
.auth-main{padding-top:68px;}

/* Ô nhập kiểu viền, nhãn nổi lên viền khi gõ */
.fld{position:relative; margin-bottom:16px;}
.fld input{width:100%; height:56px; border:1px solid #8e918f; border-radius:12px; padding:0 16px; font-size:16px; color:var(--ink); background:var(--card); outline:none; transition:border-color .15s, box-shadow .15s;}
.fld input:focus{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue);}
.fld label{position:absolute; left:12px; top:50%; transform:translateY(-50%); padding:0 4px; background:var(--card); color:var(--muted); font-size:16px; pointer-events:none; transition:top .15s, font-size .15s, color .15s; max-width:calc(100% - 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fld input:focus + label, .fld input:not(:placeholder-shown) + label{top:0; font-size:12px; color:var(--ink-2);}
.fld input:focus + label{color:var(--blue);}
.fld.pw input{padding-right:52px;}
.fld .eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink-2); font-size:18px; display:grid; place-items:center;}
.fld .eye:hover{background:var(--surface);}
.auth-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.auth-row .fld{margin-bottom:6px;}
.auth-hint{font-size:13px; color:var(--muted); margin:-6px 4px 16px;}
.auth-row + .auth-hint{margin-top:0;}
.auth-link{display:inline-block; font-weight:500; font-size:14.5px; color:var(--blue); margin:0 4px 8px;}
.auth-link:hover{text-decoration:underline !important;}
.auth-check{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); margin:4px 4px 8px; cursor:pointer;}
.auth-check input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--primary);}
.auth-check a{color:var(--blue);}

.auth-acts{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin-top:24px;}
.auth-acts .pbtn-text{margin-right:auto; padding-left:12px; padding-right:12px;}
.auth-acts .pbtn-fill{padding:10px 26px;}
.pbtn.busy{position:relative; color:transparent !important; pointer-events:none;}
.pbtn.busy::after{content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:authSpin .7s linear infinite;}
@keyframes authSpin{to{transform:rotate(360deg);}}

.auth-msg{display:none;}
.auth-msg.err, .auth-msg.ok{display:flex; gap:10px; align-items:flex-start; border-radius:14px; padding:12px 14px; margin-bottom:16px; font-size:14.5px;}
.auth-msg.err{background:#fce8e6; color:#b3261e;}
.auth-msg.ok{background:#e6f4ea; color:#146c2e;}
.auth-msg i{margin-top:1px;}

.auth-or{display:flex; align-items:center; gap:12px; margin:24px 0 16px; color:var(--muted); font-size:13px;}
.auth-or::before, .auth-or::after{content:""; flex:1; height:1px; background:var(--line);}
.auth-google{position:relative; width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:12px; border:1px solid #8e918f; border-radius:999px; background:var(--card); color:var(--ink); font-weight:500; font-size:15px; transition:background .2s;}
.auth-google:hover{background:var(--surface);}
.auth-google.busy{color:transparent; pointer-events:none;}
.auth-google.busy svg{opacity:0;}
.auth-google.busy::after{content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--surface-3); border-top-color:var(--blue); animation:authSpin .7s linear infinite;}

.auth-done{text-align:center; padding:8px 0;}
.auth-done .ic{width:64px; height:64px; border-radius:50%; background:#e6f4ea; color:#1e8e3e; display:inline-grid; place-items:center; font-size:28px; margin-bottom:16px;}
.auth-done .ic.warn{background:#fef7e0; color:#e37400;}
.auth-done h2{font-size:22px; font-weight:500; margin:0 0 8px;}
.auth-done p{color:var(--ink-2); font-size:15px; margin:0;}
.auth-done .auth-acts{justify-content:center;}
.auth-done .auth-acts .pbtn-text{margin-right:0;}

.auth-foot{width:100%; max-width:1040px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; padding:16px 12px 0; font-size:13px;}
.auth-foot a{color:var(--ink-2); padding:6px 8px; border-radius:8px;}
.auth-foot a:hover{background:var(--surface-2);}
.auth-foot nav{display:flex; gap:4px;}

@media (max-width:839.98px){
	body.auth{background:var(--card);}
	.auth-wrap{justify-content:flex-start; padding:24px 8px;}
	.auth-card{grid-template-columns:1fr; padding:8px 8px 0; gap:8px; border-radius:0;}
	.auth-side h1{font-size:28px;}
	.auth-lead{margin-bottom:12px;}
	.auth-perks{display:none;}
	.auth-main{padding-top:8px;}
	.auth-foot{padding:24px 8px 0;}
}
@media (max-width:420px){
	.auth-row{grid-template-columns:1fr; gap:0;}
	.auth-acts .pbtn-text{margin-right:0; order:2; width:100%; justify-content:center;}
	.auth-acts .pbtn-fill{width:100%; justify-content:center;}
}

/* ===== Các trang của Home: tìm kiếm, chủ đề, doanh nghiệp, đang theo dõi, đơn hàng, tạo Business (page.tpl, .ab.sp.hm) ===== */
.hm .sp-list{margin-top:8px;}
.hm-biz{display:flex; align-items:center; gap:16px; background:var(--surface); border-radius:20px; padding:16px 18px; color:var(--ink) !important; text-decoration:none !important; transition:background .2s;}
.hm-biz:hover{background:var(--surface-2);}
.hm-biz .av{width:64px; height:64px; border-radius:16px; background:var(--card); display:grid; place-items:center; overflow:hidden; flex:none; color:var(--g2); font-size:26px;}
.hm-biz .av img{width:100%; height:100%; object-fit:cover; border-radius:0;}
.hm-biz .bd{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.hm-biz b{font-weight:500; font-size:16.5px; line-height:1.4; color:var(--ink);}
.hm-biz b .kw{font-weight:400; color:var(--ink-2);}
.hm-biz .meta{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:13.5px; color:var(--muted);}
.hm-biz .meta .star{color:#e37400; font-weight:500;}
.hm-biz .ds{font-size:14.5px; color:var(--ink-2); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.hm-biz small{font-size:13px; color:var(--muted);}
.hm-biz > .bi{color:var(--muted); flex:none;}

.hm-loc{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:14.5px; color:var(--ink-2); margin:4px 0 12px;}
.hm-loc > .bi{color:var(--g3);}
.hm-loc .pbtn-text{padding:4px 10px; font-size:14px;}

.hm-prods{margin:16px 0; padding:20px; border-radius:24px; background:var(--card); border:1px solid var(--line);}
.hm-prods h2{font-size:18px !important; margin:0 0 14px !important;}
.hm-prods .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.hm-prod{display:flex; flex-direction:column; gap:6px; color:var(--ink) !important; text-decoration:none !important;}
.hm-prod .im{aspect-ratio:1; border-radius:16px; overflow:hidden; background:var(--surface);}
.hm-prod .im img{width:100%; height:100%; object-fit:cover; border-radius:0; transition:transform .3s;}
.hm-prod:hover .im img{transform:scale(1.04);}
.hm-prod .nm{font-size:14px; line-height:1.45; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.hm-prod b{font-size:15px;}

.hm-chips{display:flex; flex-wrap:wrap; gap:8px;}
.hm-chips a{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border-radius:999px; padding:8px 16px; font-size:14.5px; color:var(--ink) !important; text-decoration:none !important;}
.hm-chips a:hover{background:var(--surface-2);}
.hm-chips a i{color:var(--muted); font-size:13px;}

.hm-tabs{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:4px 0 8px; padding-bottom:2px;}
.hm-tabs::-webkit-scrollbar{display:none;}
.hm-tabs a{flex:none; padding:8px 16px; border-radius:999px; background:var(--surface); font-size:14px; color:var(--ink-2) !important; text-decoration:none !important; white-space:nowrap;}
.hm-tabs a:hover{background:var(--surface-2);}
.hm-tabs a.on{background:var(--blue-soft); color:#041e49 !important; font-weight:500;}

.hm-company{background:var(--surface); border-radius:20px; padding:20px 22px; margin:8px 0 16px;}
.hm-company .hd{font-weight:500; margin-bottom:12px; display:flex; gap:8px; align-items:center;}
.hm-company .hd i{color:var(--g1);}
.hm-company dl{display:grid; grid-template-columns:150px 1fr; gap:8px 16px; margin:0; font-size:14.5px;}
.hm-company dt{font-weight:400; color:var(--muted);}
.hm-company dd{margin:0; color:var(--ink);}
.hm-company small{display:block; margin-top:12px; font-size:12.5px; color:var(--muted);}
@media (max-width:575.98px){ .hm-company dl{grid-template-columns:1fr; gap:2px;} .hm-company dd{margin-bottom:8px;} }

.hm-ads a{display:flex; gap:12px; align-items:flex-start;}
.hm-ads .im{width:52px; height:52px; border-radius:12px; overflow:hidden; flex:none; background:var(--card);}
.hm-ads .im img{width:100%; height:100%; object-fit:cover; border-radius:0;}
.hm-ads b{display:block; font-weight:500; font-size:14px; color:var(--ink); line-height:1.4;}
.hm-ads small{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; color:var(--muted); line-height:1.45;}

.hm-order{display:flex; flex-wrap:wrap; align-items:center; gap:16px; background:var(--surface); border-radius:20px; padding:16px 18px;}
.hm-order .av{width:56px; height:56px; border-radius:14px; overflow:hidden; flex:none; background:var(--card);}
.hm-order .av img{width:100%; height:100%; object-fit:cover; border-radius:0;}
.hm-order .bd{flex:1; min-width:160px;}
.hm-order .nm{font-weight:500; font-size:16px; color:var(--ink) !important; text-decoration:none !important;}
.hm-order .meta{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:13.5px; color:var(--muted); margin-top:4px;}
.hm-order .st{padding:2px 10px; border-radius:999px; background:var(--card); font-weight:500; color:var(--ink-2);}
.hm-order .st0{background:#fef7e0; color:#a35200;}
.hm-order .st2{background:#fce8e6; color:#b3261e;}
.hm-order .rt{text-align:right; margin-left:auto;}
.hm-order .rt b{font-size:17px;}
.hm-order .acts{display:flex; gap:6px; margin-top:6px; justify-content:flex-end;}
.hm-order .acts .pbtn{background:var(--card); padding:6px 14px; font-size:13.5px;}
.hm-order .acts .pbtn:hover{background:var(--surface-3);}
.hm-order .acts .hm-cancel{color:#b3261e;}
.hm .pbtn-tonal.hm-white{background:var(--card);}
@media (max-width:575.98px){ .hm-order .rt{width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;} .hm-order .acts{margin-top:0;} }
.hm-modal .modal-content{border:0; border-radius:24px;}
.hm-modal .modal-title{font-size:20px !important; margin:0 !important;}

.hm-types{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-top:12px;}
.hm-types .sp-topic .ic{font-size:26px; color:var(--g2);}
.hm-form{padding:28px 24px 24px; background:var(--card); border:1px solid var(--line);}
.fld.sel select{width:100%; height:56px; border:1px solid #8e918f; border-radius:12px; padding:20px 36px 2px 15px; font-size:15.5px; color:var(--ink); background-color:var(--card); outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%235f6368' d='M1.6 4.6 8 11l6.4-6.4-1.1-1.1L8 8.8 2.7 3.5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center;}
.fld.sel select:focus{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue);}
.fld.sel label{top:7px; font-size:12px; transform:none; background:transparent;}
.hm-form .auth-row .fld{margin-bottom:16px;}
.fld.sel select:focus + label{color:var(--blue);}
.hm .sp-tip p{font-size:14.5px;}

.hm-link{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; background:var(--surface); border-radius:28px; padding:28px; margin:8px 0 20px;}
.hm-link .who{background:var(--card); border-radius:20px; padding:20px; min-width:220px; flex:1; max-width:300px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px;}
.hm-link .who img{width:64px; height:64px; border-radius:16px; object-fit:cover; margin-bottom:10px;}
.hm-link .who b{font-weight:500;}
.hm-link .who small{color:var(--muted); font-size:13.5px; overflow-wrap:anywhere;}
.hm-link .ln{width:44px; height:44px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-size:22px; color:var(--g2);}
.hm-step{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:24px;}
.hm-step h2{margin:0 0 10px !important; font-size:22px !important;}
.hm-warn{margin:0 0 20px;}
.hm-warn > .bi{color:#e37400;}

/* ===== Hodine Shopping: danh sách sản phẩm, giỏ hàng, đặt hàng, thanh toán (page.tpl, .ab.sp.hm.sh) ===== */
.sh-hero{padding:4px 0 0;}
.sh-hero h1{margin-bottom:12px;}
.sh .sp-search.big{margin-top:20px;}
.sh-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 16px;}
.sh-bar h2{margin:0 !important; font-size:22px !important;}
.sh-bar .pbtn{padding:8px 16px; font-size:14px;}
.sh-menu{border:0; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.14); padding:6px;}
.sh-menu .dropdown-item{border-radius:10px; padding:8px 14px; font-size:14.5px;}
.sh-menu .dropdown-item.active, .sh-menu .dropdown-item:active{background:var(--blue-soft); color:#041e49;}

.sh-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:24px 16px;}
.sh-card{display:flex; flex-direction:column; gap:6px; min-width:0;}
.sh-card a{text-decoration:none !important;}
.sh-card .im{position:relative; display:block; aspect-ratio:1; border-radius:20px; overflow:hidden; background:var(--surface);}
.sh-card .im img{width:100%; height:100%; object-fit:cover; border-radius:0; transition:transform .3s;}
.sh-card:hover .im img{transform:scale(1.04);}
.sh-card .off{position:absolute; top:10px; left:10px; background:var(--g3); color:#fff; font-size:12.5px; font-weight:600; padding:2px 8px; border-radius:999px;}
.sh-card .nm{font-size:14.5px; line-height:1.45; color:var(--ink) !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:4px;}
.sh-card .pr{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;}
.sh-card .pr b{font-size:16.5px; font-weight:600;}
.sh-card .pr s, .sh-line .pr s{font-size:13px; color:var(--muted);}
.sh-card .shop{font-size:13px; color:var(--muted) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sh-card .shop:hover{color:var(--blue) !important;}
.sh-card .web{font-size:12.5px; color:var(--blue) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:575.98px){ .sh-grid{grid-template-columns:repeat(2,1fr); gap:20px 12px;} }

.sh-shop{background:var(--surface); border-radius:24px; padding:8px; margin-bottom:12px;}
.sh-shop .hd{display:flex; align-items:center; gap:8px; padding:10px 12px 8px; font-weight:500; color:var(--ink) !important; text-decoration:none !important;}
.sh-shop .hd .bi-chevron-right{font-size:12px; color:var(--muted);}
.sh-line{display:flex; gap:14px; background:var(--card); border-radius:18px; padding:12px;}
.sh-line + .sh-line{margin-top:6px;}
.sh-line .im{width:84px; height:84px; border-radius:14px; overflow:hidden; flex:none; background:var(--surface);}
.sh-line .im img{width:100%; height:100%; object-fit:cover; border-radius:0;}
.sh-line .bd{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.sh-line .nm{font-size:15px; font-weight:500; line-height:1.4; color:var(--ink) !important; text-decoration:none !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.sh-line .pr{display:flex; align-items:baseline; gap:8px;}
.sh-line .pr b{font-weight:600;}
.sh-line .by{font-size:13px; color:var(--muted);}
.sh-line .ft{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:auto; padding-top:4px;}
.sh-line .sum{margin-left:auto; font-size:16px;}
.sh-line .qx{font-size:14px; color:var(--ink-2);}
.sh-qty{display:inline-flex; align-items:center; background:var(--surface); border-radius:999px; padding:2px;}
.sh-qty button{width:32px; height:32px; border:0; border-radius:50%; background:transparent; display:grid; place-items:center; color:var(--ink);}
.sh-qty button:hover{background:var(--card);}
.sh-qty input{width:42px; border:0; background:transparent; text-align:center; font-weight:500; outline:none; -moz-appearance:textfield;}
.sh-qty input::-webkit-outer-spin-button, .sh-qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.sh-del{width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--muted); display:grid; place-items:center;}
.sh-del:hover{background:#fce8e6; color:#b3261e;}
.sh-clear{color:#b3261e !important; font-size:14px;}

.sh-sum{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:20px;}
.sh-sum h3{font-size:18px !important; margin:0 0 14px !important;}
.sh-sum .rw{display:flex; justify-content:space-between; gap:12px; font-size:15px; color:var(--ink-2); padding:4px 0;}
.sh-sum .rw.tt{border-top:1px solid var(--line); margin:8px 0 16px; padding-top:12px; color:var(--ink); font-weight:500;}
.sh-sum .rw.tt b{font-size:20px; font-weight:600;}
.col-lg-7 > .sh-sum .rw.tt{margin-bottom:0;}
.sh-sum .fld textarea{width:100%; border:1px solid #8e918f; border-radius:12px; padding:16px; font-size:16px; color:var(--ink); background:var(--card); outline:none; resize:vertical; min-height:72px;}
.sh-sum .fld textarea:focus{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue);}
.sh-sum .fld textarea + label{top:28px;}
.sh-sum .fld textarea:focus + label, .sh-sum .fld textarea:not(:placeholder-shown) + label{top:0; font-size:12px; color:var(--ink-2);}
.sh-sum .fld textarea:focus + label{color:var(--blue);}
.sh-pay{margin:4px 0 16px;}
.sh-pay .lbl{font-size:14px; font-weight:500; margin-bottom:8px;}
.sh-pay label{display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:14px; font-size:14.5px; margin-bottom:6px; cursor:pointer;}
.sh-pay label.on{border-color:var(--blue); background:#f5f8ff;}
.sh-pay label.off{color:var(--muted); cursor:default;}
.sh-pay label input{accent-color:var(--primary);}
.sh-pay label small{margin-left:auto; font-size:12px; background:var(--surface); padding:1px 8px; border-radius:999px;}
.sh-hint{font-size:13.5px; color:var(--muted); margin:0 0 14px !important;}

.sh-404{text-align:center; max-width:620px; margin:24px auto 0;}
.sh-404 .ic{width:72px; height:72px; border-radius:50%; background:var(--surface); display:inline-grid; place-items:center; font-size:30px; color:var(--g2); margin-bottom:16px;}
.sh-404 .sp-search{margin:24px 0 12px;}

/* ===== Khu Đại lý (page.tpl, .ab.sp.hm.ag) ===== */
.ag-tabs{margin:0 0 24px;}
/* màn rộng: nhiều tab thì xuống dòng, không giấu tab cuối (mobile vẫn vuốt ngang) */
@media (min-width:992px){ .ag-tabs{flex-wrap:wrap; overflow:visible;} }
.ag-tabs a{display:inline-flex; align-items:center; gap:8px;}
.ag-hello{display:flex; align-items:center; gap:20px; margin-bottom:24px;}
.ag-hello .av{width:72px; height:72px; border-radius:50%; overflow:hidden; flex:none; background:var(--g2); color:#fff; display:grid; place-items:center; font-size:32px;}
.ag-hello .av img{width:100%; height:100%; object-fit:cover; border-radius:0;}
.ag-hello .sp-h1{margin-bottom:6px;}
.ag .hm-types .sp-topic{min-height:130px;}
/* mobile: thẻ chủ đề / loại hình 2 cột cho đỡ dài trang (đặt sau .hm-types để đè) */
@media (max-width:575.98px){
	.sp-topics, .hm-types{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
	.sp-topic, .ag .hm-types .sp-topic{min-height:118px; padding:16px 14px 14px; gap:10px; border-radius:16px;}
	.sp-topic .ic{width:44px; height:44px; border-radius:12px;}
	.sp-topic .ic img{width:28px; height:28px;}
	.sp-topic b{font-size:14.5px;}
	.sp-topic > .bi{right:14px; bottom:14px;}
}
.ag .hm-biz .av{width:52px; height:52px; border-radius:14px; font-size:22px;}
.ag-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px; margin-bottom:20px;}
.ag-web{background:var(--surface); border-radius:20px; padding:16px 18px;}
.ag-web .top{display:flex; flex-wrap:wrap; align-items:center; gap:14px;}
.ag-web .av{width:56px; height:56px; border-radius:14px; overflow:hidden; flex:none; background:var(--card);}
.ag-web .av img{width:100%; height:100%; object-fit:cover; border-radius:0;}
.ag-web .bd{flex:1; min-width:180px;}
.ag-web .bd b{font-weight:500; font-size:16px;}
.ag-web .meta{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13.5px; color:var(--muted);}
.ag-web .meta a{color:var(--blue);}
.ag-web .top .pbtn{background:var(--card); padding:7px 16px; font-size:14px;}
.ag-web .top .pbtn:hover{background:var(--surface-3);}
.ag-web .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px;}
.ag-web .stats div{background:var(--card); border-radius:14px; padding:10px 12px;}
.ag-web .stats b{display:block; font-size:18px; font-weight:600;}
.ag-web .stats small{font-size:12.5px; color:var(--muted);}
@media (max-width:575.98px){ .ag-web .stats{grid-template-columns:repeat(2,1fr);} .ag-hello{align-items:flex-start;} .ag-hello .av{width:56px; height:56px;} }
.ag .hm-order .acts .pbtn{white-space:nowrap;}
.ag h2{font-size:18px; font-weight:500; margin:24px 0 12px;}
.ag-card{background:var(--surface); border-radius:20px; padding:18px 20px;}
.ag-card h2{margin:0 0 14px;}
.ag-card .form-control, .ag-card .form-select, .ag-filter .form-control, .ag-filter .form-select{border-radius:12px; border-color:var(--line);}
.ag-card .form-label{font-size:14px; color:var(--ink-2); margin-bottom:4px;}
.ag-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:8px;}
.ag-stats-3{grid-template-columns:repeat(3,1fr);}
.ag-stats div{background:var(--surface); border-radius:16px; padding:14px 16px;}
.ag-stats small{display:block; font-size:13px; color:var(--muted);}
.ag-stats b{display:block; font-size:20px; font-weight:600; margin-top:2px;}
.ag-note{display:flex; gap:12px; align-items:flex-start; background:var(--blue-soft); border-radius:16px; padding:14px 16px; margin-bottom:16px; font-size:15px;}
.ag-note > .bi{font-size:20px; line-height:1.3;}
.ag-note.warn{background:#fef7e0;}
.ag-chart{display:flex; align-items:flex-end; gap:10px; height:170px;}
.ag-chart .c{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px;}
.ag-chart .bar{width:100%; max-width:44px; border-radius:8px 8px 4px 4px; background:var(--g1);}
.ag-chart .v{font-size:12px; color:var(--ink-2);}
.ag-chart small{font-size:12px; color:var(--muted);}
.ag-rate{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ag-rate div{background:var(--card); border-radius:14px; padding:10px 14px;}
.ag-rate small{display:block; font-size:13px; color:var(--muted);}
.ag-rate b{font-size:22px; font-weight:600;}
.ag-progress{height:8px; border-radius:99px; background:var(--card); overflow:hidden;}
.ag-progress span{display:block; height:100%; background:var(--g2); border-radius:99px;}
.ag-tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.ag-tiers div{background:var(--surface); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:2px;}
.ag-tiers span{font-size:20px; font-weight:600;}
.ag-tiers small{font-size:13px; color:var(--muted);}
.ag-list{margin:16px 0 0; padding-left:20px; color:var(--ink-2);}
.ag-list li{margin-bottom:6px;}
.ag-seg{display:flex; flex-wrap:wrap; gap:8px 20px;}
.ag-seg label{display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.ag-code{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:var(--card); border-radius:14px; padding:10px 10px 10px 16px;}
.ag-code b{font-size:22px; letter-spacing:1px;}
.ag-code span{flex:1; min-width:0; word-break:break-all; color:var(--ink-2);}
.ag-code .pbtn{padding:7px 16px; font-size:14px;}
.ag-filter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.ag-filter .form-select, .ag-filter .form-control{width:auto; min-width:160px;}
.ag-table{background:var(--surface); border-radius:16px; padding:6px 12px; overflow-x:auto;}
.ag-table .table{--bs-table-bg:transparent; font-size:14.5px;}
.ag-table th{font-weight:500; color:var(--muted); font-size:13px; white-space:nowrap;}
.ag-table .ag-tm{font-size:12.5px; color:var(--muted); margin-top:2px;}
@media (max-width:575.98px){ .ag-table{padding:4px 8px;} .ag-table .table{font-size:13.5px;} .ag-table td, .ag-table th{padding-left:6px; padding-right:6px;} }
.ag-st{display:inline-block; padding:2px 10px; border-radius:99px; background:var(--card); font-size:13px; white-space:nowrap;}
.ag-st.s0, .ag-st.p0{background:#fef7e0; color:#a35200;}
.ag-st.s1{background:var(--blue-soft); color:#041e49;}
.ag-st.s2, .ag-st.p1{background:#e6f4ea; color:#137333;}
.ag-st.s9, .ag-st.p2{background:#fce8e6; color:#b3261e;}
.ag-stats-2{grid-template-columns:repeat(2,1fr);}
.ag-agree{display:flex; align-items:flex-start; gap:8px; font-size:15px; cursor:pointer;}
.ag-agree input{margin-top:5px;}
.ag-terms{max-width:820px;}
.ag-terms h2{font-size:17px; margin:22px 0 8px;}
.ag-terms p, .ag-terms li{color:var(--ink-2); line-height:1.7;}
.ag-terms ul{padding-left:20px; margin-bottom:0;}
.ag-chips{display:flex; flex-wrap:wrap; gap:6px;}
.ag-chips button{border:0; background:var(--card); border-radius:99px; padding:5px 12px; font-size:13.5px; color:var(--ink-2);}
.ag-chips button:hover{background:var(--surface-3);}
.ag-bank{display:flex; gap:16px; align-items:flex-start; background:var(--card); border-radius:16px; padding:14px;}
.ag-bank img{width:140px; height:auto; border-radius:10px; flex:none;}
.ag-bank small{display:block; font-size:12.5px; color:var(--muted);}
.ag-bank b{display:block; font-weight:500; margin-bottom:6px; word-break:break-all;}
@media (max-width:767.98px){ .ag-stats{grid-template-columns:repeat(2,1fr);} .ag-tiers, .ag-stats-3{grid-template-columns:1fr;} }
@media (max-width:575.98px){ .ag-bank{flex-direction:column;} .ag-bank img{width:160px;} }


/** << ======================================^^^=================================== >> */
/**     GIAO DIỆN TỐI: html[data-bs-theme=dark], chọn trong menu "Giới thiệu & trợ giúp"   */
/** << ======================================***=================================== >> */
/* nút chọn giao diện trong menu */
.pop .theme-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px 6px 18px; font-size:14.5px; color:var(--ink);}
.pop .theme-row > span{display:flex; align-items:center; gap:12px;}
.pop .theme-row > span i{font-size:17px; color:var(--ink-2); width:20px; text-align:center;}
.theme-seg{display:inline-flex; background:var(--surface); border-radius:999px; padding:3px; gap:2px;}
.theme-seg button{border:0; background:transparent; width:34px; height:30px; border-radius:999px; color:var(--ink-2); display:grid; place-items:center; font-size:15px; cursor:pointer;}
.theme-seg button:hover{background:var(--surface-2);}
.theme-seg button.on{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.18);}

[data-bs-theme=dark]{
	--bg:#131314; --card:#202124; --surface:#1b1c1f; --surface-2:#28292d; --surface-3:#323438;
	--ink:#e3e3e3; --ink-2:#c4c7c5; --muted:#9aa0a6; --line:#34363a;
	--primary:#4f56d9; --primary-2:#646bea; --blue:#a8c7fa; --blue-soft:#1f3760;
	--bs-body-bg:#131314; --bs-body-color:#e3e3e3; --bs-border-color:#34363a;
	--bs-secondary-color:#9aa0a6; --bs-tertiary-bg:#1b1c1f; --bs-secondary-bg:#28292d;
	--bs-link-color:#a8c7fa; --bs-link-hover-color:#d3e3fd; --bs-link-color-rgb:168,199,250; --bs-link-hover-color-rgb:211,227,253;
	--bs-dark-rgb:227,227,227; --bs-light-rgb:40,41,45; --bs-white-rgb:32,33,36; --bs-black-rgb:227,227,227;
	color-scheme:dark;
}
[data-bs-theme=dark] body{background:var(--bg); color:var(--ink);}

/* tiện ích Bootstrap viết cứng màu sáng */
[data-bs-theme=dark] .bg-white, [data-bs-theme=dark] .bg-body{background-color:var(--card) !important;}
[data-bs-theme=dark] .bg-light, [data-bs-theme=dark] .text-bg-light{background-color:var(--surface-2) !important; color:var(--ink) !important;}
[data-bs-theme=dark] .text-dark, [data-bs-theme=dark] .text-black, [data-bs-theme=dark] .link-dark{color:var(--ink) !important;}
[data-bs-theme=dark] .text-secondary, [data-bs-theme=dark] .text-muted{color:var(--muted) !important;}
[data-bs-theme=dark] .btn-light{background:var(--surface-2); border-color:var(--line); color:var(--ink);}
[data-bs-theme=dark] .btn-outline-dark, [data-bs-theme=dark] .btn-outline-secondary{color:var(--ink-2); border-color:var(--line);}
[data-bs-theme=dark] .btn-outline-dark:hover, [data-bs-theme=dark] .btn-outline-secondary:hover{background:var(--surface-2); color:var(--ink);}
[data-bs-theme=dark] .card, [data-bs-theme=dark] .modal-content, [data-bs-theme=dark] .dropdown-menu, [data-bs-theme=dark] .list-group-item, [data-bs-theme=dark] .offcanvas{background-color:var(--card); color:var(--ink); border-color:var(--line);}
[data-bs-theme=dark] .table{--bs-table-bg:transparent; --bs-table-color:var(--ink); border-color:var(--line);}
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select{background-color:var(--surface); border-color:var(--line); color:var(--ink);}
[data-bs-theme=dark] .form-control::placeholder{color:var(--muted);}
[data-bs-theme=dark] .form-floating > label{color:var(--muted);}
[data-bs-theme=dark] .form-floating > .form-control:focus ~ label::after, [data-bs-theme=dark] .form-floating > .form-control:not(:placeholder-shown) ~ label::after{background-color:var(--surface);}
[data-bs-theme=dark] .shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.4) !important;}
[data-bs-theme=dark] .border, [data-bs-theme=dark] .border-top, [data-bs-theme=dark] .border-bottom{border-color:var(--line) !important;}
[data-bs-theme=dark] .page-link{background:var(--card); border-color:var(--line); color:var(--ink-2);}
[data-bs-theme=dark] .progress{background:var(--surface-2);}
[data-bs-theme=dark] hr{border-color:var(--line);}

/* nhãn màu nhạt (xanh lá / đỏ / vàng / tím) */
[data-bs-theme=dark] .fp-chip, [data-bs-theme=dark] .fp-following, [data-bs-theme=dark] .fp .card.text-bg-success, [data-bs-theme=dark] .plan .packs em,
[data-bs-theme=dark] .auth-msg.ok, [data-bs-theme=dark] .auth-done .ic, [data-bs-theme=dark] .ntf-item .ic.t2{background:rgba(52,168,83,.18) !important; color:#81c995 !important;}
[data-bs-theme=dark] .auth-msg.err, [data-bs-theme=dark] .hm-order .st2, [data-bs-theme=dark] .sh-del:hover, [data-bs-theme=dark] .ntf-item .ic.t3{background:rgba(234,67,53,.18); color:#f28b82;}
[data-bs-theme=dark] .sp-note, [data-bs-theme=dark] .auth-done .ic.warn, [data-bs-theme=dark] .hm-order .st0, [data-bs-theme=dark] .ntf-item .ic.t4,
[data-bs-theme=dark] .ag-note.warn{background:rgba(251,188,4,.14); color:#fdd663 !important;}
[data-bs-theme=dark] .ag-note.warn a{color:#fde293; text-decoration:underline;}
[data-bs-theme=dark] .ag-st.s0, [data-bs-theme=dark] .ag-st.p0{background:rgba(251,188,4,.14); color:#fdd663;}
[data-bs-theme=dark] .ag-st.s2, [data-bs-theme=dark] .ag-st.p1{background:rgba(52,168,83,.18); color:#81c995;}
[data-bs-theme=dark] .ag-st.s9, [data-bs-theme=dark] .ag-st.p2{background:rgba(234,67,53,.18); color:#f28b82;}
[data-bs-theme=dark] .ntf-item .ic.t1{background:rgba(155,114,203,.2);}
[data-bs-theme=dark] .c-amber, [data-bs-theme=dark] .hm-warn > .bi, [data-bs-theme=dark] .hm-biz .meta .star, [data-bs-theme=dark] .pop .acc-tiles i.c-amber{color:#fdd663;}
[data-bs-theme=dark] .c-green, [data-bs-theme=dark] .pop .acc-tiles i.c-green{color:#81c995;}
[data-bs-theme=dark] .text-success{color:#81c995 !important;}
[data-bs-theme=dark] .text-danger, [data-bs-theme=dark] .sh-clear, [data-bs-theme=dark] .hm-order .acts .hm-cancel{color:#f28b82 !important;}

/* chữ đậm trên nền xanh nhạt */
[data-bs-theme=dark] .sb-item.active, [data-bs-theme=dark] .sp-nav a.on, [data-bs-theme=dark] .hm-tabs a.on, [data-bs-theme=dark] .sh-menu .dropdown-item.active,
[data-bs-theme=dark] .sh-menu .dropdown-item:active, [data-bs-theme=dark] .ag-st.s1, [data-bs-theme=dark] .ag-note{color:#d3e3fd !important;}
[data-bs-theme=dark] .pbtn-text:hover{background:var(--surface-2);}
[data-bs-theme=dark] .m-bar{background:rgba(19,19,20,.9);}
[data-bs-theme=dark] [data-tip]::after{background:#e3e3e3; color:#1f1f1f;}
[data-bs-theme=dark] .pop, [data-bs-theme=dark] .ntf{box-shadow:0 4px 24px rgba(0,0,0,.6);}
[data-bs-theme=dark] .fld input, [data-bs-theme=dark] .fld.sel select, [data-bs-theme=dark] .auth-google{border-color:#5f6368;}

/* trang cũ dùng style.css / ga.css */
[data-bs-theme=dark] header, [data-bs-theme=dark] #headsearch, [data-bs-theme=dark] #featured .card, [data-bs-theme=dark] .news-cat-item{background:var(--card); border-color:var(--line); color:var(--ink);}
[data-bs-theme=dark] #footer-main{background:var(--surface); border-color:var(--line);}
[data-bs-theme=dark] #footer-main, [data-bs-theme=dark] #footer-main a, [data-bs-theme=dark] .nav-insite, [data-bs-theme=dark] .option-label, [data-bs-theme=dark] #spbar a{color:var(--ink);}
[data-bs-theme=dark] .nav-insite{background:var(--surface-2);}
[data-bs-theme=dark] .text-sm, [data-bs-theme=dark] .text-sm-i, [data-bs-theme=dark] .col-desc, [data-bs-theme=dark] .col-gray-1{color:var(--muted);}
[data-bs-theme=dark] .col-black{color:var(--ink) !important;}
[data-bs-theme=dark] #SearchList h3 a, [data-bs-theme=dark] #SearchList .item .link-more a{color:#a8c7fa;}
[data-bs-theme=dark] #SearchList .item .link a{color:#81c995;}

/* trang tài khoản (account-ui.css) */
[data-bs-theme=dark] body.ac{
	--ac-navy:#c3c8ff; --ac-navy-2:#a9b0ff; --ac-ink:#e6e7ee; --ac-muted:#a2a8b8; --ac-faint:#7a8092;
	--ac-line:#2f3341; --ac-soft:#1d2029; --ac-soft-2:#262a36; --ac-bg:#14161c; --ac-card:#1b1e26;
	--ac-amber-soft:rgba(245,165,36,.16); --ac-amber-ink:#fcd28a;
	--ac-green:#4ade80; --ac-green-soft:rgba(34,197,94,.14); --ac-red:#f87171; --ac-red-soft:rgba(248,113,113,.14);
	--ac-sky:#8fb0ff; --ac-sky-soft:rgba(59,108,246,.18);
	--ac-shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
	--ac-shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 24px 48px rgba(0,0,0,.5);
	--bs-primary:#4f56d9; --bs-primary-rgb:79,86,217;
	--bs-link-color:#a8c7fa; --bs-link-hover-color:#d3e3fd; --bs-body-color:#e6e7ee; --bs-border-color:#2f3341;
	background:var(--ac-bg); color:var(--ac-ink);
}
/* nền xanh đậm + chữ trắng: giữ nền đậm vì --ac-navy giờ là màu chữ sáng */
[data-bs-theme=dark] .ac-btn.pri, [data-bs-theme=dark] .ac-steps .st.on .n, [data-bs-theme=dark] .ac-tabs a.on, [data-bs-theme=dark] .ac-sw input:checked + span{background:#4f56d9; border-color:#4f56d9; color:#fff;}
[data-bs-theme=dark] .ac-btn.pri:hover{background:#646bea; color:#fff;}
[data-bs-theme=dark] .ac-hello{background:linear-gradient(120deg,#23266b 0%,#363b9e 100%);}
[data-bs-theme=dark] .ac-btn.dg{border-color:rgba(248,113,113,.4);}
/* nền vàng: chữ phải tối, không dùng --ac-navy (đã thành màu sáng) */
[data-bs-theme=dark] .ac-btn.amb, [data-bs-theme=dark] .ac-btn.amb:hover{color:#1b1e26;}