/* =====================================================================
   THEME SETTINGS - lớp cá nhân hoá giao diện (nạp SAU style.css)
   - Định nghĩa biến theme + remap token cũ của style.css
   - Dark mode premium, bo góc, mật độ
   - Nâng cấp UI cao cấp hơn
   - FAB Setting + Back-to-top + Drawer / Bottom sheet
   ===================================================================== */

:root{
  --primary:#ff7fa6;            --primary-rgb:255,127,166;
  --secondary:#7fe0c8;          --secondary-rgb:127,224,200;
  --bg1:#fff5f8; --bg2:#f3fbf8; --bg3:#fef6ea; --bg4:#f6f3ff;
  --bg:#fff5f8;
  --surface:#ffffff;
  --surface-glass:rgba(255,255,255,.62);
  --surface-glass-strong:rgba(255,255,255,.80);
  --text:#3a3340;
  --muted:#8a8194;
  --border:rgba(120,90,110,.12);
  --radius:26px;  --radius-sm:16px;
  --section-space:30px; --card-padding:14px; --grid-gap:18px;
  --font-main:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* ---- remap token cũ trong style.css sang theme ---- */
  --pink:var(--primary);
  --pink-soft:rgba(var(--primary-rgb),.16);
  --pink-bg:var(--bg);
  --mint:var(--secondary);
  --mint-soft:rgba(var(--secondary-rgb),.16);
  --lav:rgba(var(--secondary-rgb),.22);
  --ink:var(--text);
  --line:var(--border);
  --glass:var(--surface-glass);
  --glass-strong:var(--surface-glass-strong);
  --font:var(--font-main);
  --shadow:0 18px 50px -18px rgba(var(--primary-rgb),.40);
  --shadow-sm:0 10px 28px -14px rgba(60,40,60,.30);
}

/* ===================== DARK MODE PREMIUM ===================== */
html[data-mode="dark"]{
  --bg1:#0d1018; --bg2:#10131f; --bg3:#0f1320; --bg4:#12101e;
  --bg:#0d1018;
  --surface:#171b29;
  --surface-glass:rgba(26,31,46,.62);
  --surface-glass-strong:rgba(30,36,54,.80);
  --text:#e9e8f2;
  --muted:#9d9bb4;
  --border:rgba(255,255,255,.09);
  --shadow:0 20px 54px -18px rgba(0,0,0,.65);
  --shadow-sm:0 12px 30px -16px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ===================== BO GÓC ===================== */
html[data-radius="soft"]{ --radius:16px; --radius-sm:11px; }
html[data-radius="round"]{ --radius:26px; --radius-sm:16px; }
html[data-radius="xround"]{ --radius:36px; --radius-sm:24px; }

/* ===================== MẬT ĐỘ ===================== */
html[data-density="airy"]{ --section-space:48px; --card-padding:20px; --grid-gap:24px; }
html[data-density="cozy"]{ --section-space:32px; --card-padding:15px; --grid-gap:18px; }
html[data-density="compact"]{ --section-space:20px; --card-padding:11px; --grid-gap:12px; }

/* mượt khi đổi theme (chỉ bật sau lần sơn đầu để tránh chớp) */
html.theme-anim body,
html.theme-anim .site-header,
html.theme-anim .site-footer,
html.theme-anim .bottom-nav,
html.theme-anim .p-card,
html.theme-anim .glass,
html.theme-anim .glass-strong,
html.theme-anim .btn{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* ===================== ÁP DỤNG BIẾN TOÀN SITE ===================== */
body{
  background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 38%,var(--bg3) 70%,var(--bg4) 100%);
  color:var(--text);
}
html[data-font] body,
html[data-font] .btn,
html[data-font] input,
html[data-font] select,
html[data-font] textarea,
html[data-font] h1, html[data-font] h2, html[data-font] h3, html[data-font] h4,
html[data-font] .logo, html[data-font] .footer-logo{
  font-family:var(--font-main);
}

.bg-orbs span:nth-child(1){ background:rgba(var(--primary-rgb),.42); }
.bg-orbs span:nth-child(2){ background:rgba(var(--secondary-rgb),.42); }
.bg-orbs span:nth-child(3){ background:rgba(var(--primary-rgb),.26); }
html[data-mode="dark"] .bg-orbs span{ opacity:.30; filter:blur(70px); }

/* Header glass cao cấp + sticky */
.site-header{
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  border-bottom:1px solid var(--border);
}
@supports not (background:color-mix(in srgb,red,blue)){
  .site-header{ background:var(--surface-glass-strong); }
}
.logo,.footer-logo{ color:var(--primary); }
.main-nav a{ color:var(--text); }
.main-nav a:hover{ background:rgba(var(--primary-rgb),.10); color:var(--primary); }
.main-nav a.nav-active{
  background:rgba(var(--primary-rgb),.14);
  color:var(--primary); font-weight:600;
}
.icon-btn{ background:var(--surface-glass); border-color:var(--border); color:var(--text); }
.wish-count{ background:var(--primary); }
.search-box{ background:var(--surface-glass); border-color:var(--border); }
.search-box input{ color:var(--text); }
.search-box input::placeholder{ color:var(--muted); }
.search-box button{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.92),var(--primary)); }

/* Hero premium */
.hero-text h1{ color:var(--text); }
.grad{ background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pill{ background:rgba(var(--primary-rgb),.12); color:var(--primary); border-color:rgba(var(--primary-rgb),.22); }
.hero-stats strong{ color:var(--primary); }
.hero-art{ box-shadow:var(--shadow); }

/* Buttons */
.btn-primary{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.92),var(--primary)); color:#fff; box-shadow:0 12px 26px -10px rgba(var(--primary-rgb),.65); }
.btn-primary:hover{ box-shadow:0 16px 34px -10px rgba(var(--primary-rgb),.80); transform:translateY(-1px); }
.btn-ghost{ background:var(--surface-glass); color:var(--text); border:1px solid var(--border); }
.btn-soft{ background:rgba(var(--secondary-rgb),.18); color:color-mix(in srgb,var(--secondary) 60%, #0b3b30); }
html[data-mode="dark"] .btn-soft{ color:var(--secondary); }

/* Section heading + see-all */
.block-head h2{ color:var(--text); letter-spacing:-.01em; }
.see-all{ color:var(--primary); display:inline-flex; align-items:center; gap:4px; }
.see-all:hover{ gap:8px; transition:gap .2s; }
.page-title{ color:var(--text); }
.crumb{ color:var(--muted); }
.crumb a:hover{ color:var(--primary); }

/* Cards */
.p-card,.cat-card,.combo-chip,.combo-big,.post-card,.review-chip,
.glass{ background:var(--surface-glass); border:1px solid var(--border); }
.glass-strong{ background:var(--surface-glass-strong); border:1px solid var(--border); }
.p-card{ border-radius:var(--radius-sm); }
.p-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.p-card-body{ padding:var(--card-padding); }
.p-card-img,.pd-main,.post-thumb,.combo-item .ci-img img{ background:var(--surface); }
.p-name a,.post-card-body h3,.combo-big h3{ color:var(--text); }
.p-price .now,.pd-price .now,.combo-budget strong,.combo-big-foot strong{ color:var(--primary); }
.p-price .was,.pd-price .was{ color:var(--muted); }
.sale-tag{ background:var(--primary); }
.wish-btn{ background:rgba(255,255,255,.82); color:var(--primary); }
html[data-mode="dark"] .wish-btn{ background:rgba(40,46,66,.75); }
.wish-btn.active{ background:var(--primary); color:#fff; }
.cat-ic{ filter:drop-shadow(0 4px 8px rgba(var(--primary-rgb),.25)); }

/* Badge - badge chính theo màu primary */
.badge-mom{ background:rgba(var(--primary-rgb),.16); color:var(--primary); }
.badge-age{ background:rgba(var(--secondary-rgb),.20); color:color-mix(in srgb,var(--secondary) 55%,#0b3b30); }
html[data-mode="dark"] .badge-age{ color:var(--secondary); }
.badge.badge-primary{ background:var(--primary); color:#fff; }

/* Inputs / filter / chip */
.filters input,.filters select,
.ai-field input,.ai-field select,
.compare-pick select{ background:var(--surface); color:var(--text); border-color:var(--border); }
.f-chip,.result-count,.muted{ color:var(--muted); }
.chip{ background:var(--surface-glass); border-color:var(--border); color:var(--text); }
.chip.active{ background:var(--primary); color:#fff; border-color:transparent; }
input:focus,select:focus,textarea:focus,.search-box:focus-within{
  outline:none; border-color:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.22);
}

/* AI assistant + review */
.ai-intro,.ai-chat,.ai-form,.ai-promo{ background:var(--surface-glass-strong); border:1px solid var(--border); }
.ai-promo{ background:linear-gradient(120deg,rgba(var(--primary-rgb),.16),rgba(var(--secondary-rgb),.16)); }
.ai-msg .bub{ background:var(--surface); color:var(--text); }
.ai-msg.user .bub{ background:rgba(var(--primary-rgb),.16); color:var(--primary); }
.ai-prod{ background:var(--surface); }
.ai-prod .pr{ color:var(--primary); }
.rv-stars{ color:#ffb22e; }
.review-chip p,.rv-item p{ color:var(--text); }
.rv-meta a{ color:var(--primary); }

/* Combo detail */
.combo-hero{ background:linear-gradient(120deg,rgba(var(--primary-rgb),.14),rgba(var(--secondary-rgb),.14)); }
.combo-budget div,.ai-sum-card,.pros,.cons,.rv-item{ background:var(--surface); }
.combo-big-foot .link{ color:var(--primary); }
.pri-must{ background:var(--primary); }
.pri-should{ background:#ffb22e; }
.pri-nice{ background:var(--secondary); }

/* Blog */
.toc{ background:var(--surface); border:1px solid var(--border); }
.toc a:hover,.post-tags .chip{ color:var(--primary); }
.post-body{ color:var(--text); }
.rich{ color:var(--text); }

/* Spacing theo mật độ */
.block{ padding:var(--section-space) 0; }
.grid-products,.cat-grid,.post-grid,.combo-grid,.combo-items{ gap:var(--grid-gap); }

/* Footer / bottom nav */
.site-footer{ background:var(--surface-glass); border-top:1px solid var(--border); }
.site-footer a{ color:var(--muted); }
.site-footer a:hover{ color:var(--primary); }
.footer-bottom{ border-top:1px solid var(--border); color:var(--muted); }
.bottom-nav{
  background:color-mix(in srgb,var(--surface) 78%, transparent);
  border-top:1px solid var(--border);
}
@supports not (background:color-mix(in srgb,red,blue)){
  .bottom-nav{ background:var(--surface-glass-strong); }
}
.bottom-nav a{ color:var(--muted); }
.bottom-nav a:hover{ color:var(--primary); }
.bottom-nav .bn-center span{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.92),var(--primary)); box-shadow:0 8px 18px -6px rgba(var(--primary-rgb),.70); }
.pagination .pg{ background:var(--surface-glass); border-color:var(--border); color:var(--text); }
.pagination .pg.active{ background:var(--primary); color:#fff; }
.sticky-buy{ background:var(--surface-glass-strong); border-top:1px solid var(--border); }
.sticky-buy .sb-price{ color:var(--primary); }
.flash-success{ background:rgba(var(--secondary-rgb),.20); color:color-mix(in srgb,var(--secondary) 55%,#0b3b30); }
html[data-mode="dark"] .flash-success{ color:var(--secondary); }

/* Dark mode đọc rõ */
html[data-mode="dark"] .empty-state h1,
html[data-mode="dark"] .empty-state h3,
html[data-mode="dark"] .pd-title,
html[data-mode="dark"] .post-head h1{ color:var(--text); }
html[data-mode="dark"] .skeleton{ background:linear-gradient(90deg,#1b2030 25%,#222a3d 50%,#1b2030 75%); background-size:200% 100%; }
html[data-mode="dark"] img.preview{ background:#222a3d; }

/* =====================================================================
   FAB STACK: Back-to-top + Setting
   ===================================================================== */
.fab-stack{
  position:fixed; right:18px; bottom:24px; z-index:90;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.fab-btn{
  width:50px; height:50px; min-width:50px; border:0; cursor:pointer;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border);
  color:var(--text);
  box-shadow:0 12px 30px -12px rgba(40,30,50,.45);
  transition:transform .2s ease, box-shadow .25s ease, opacity .3s ease, background .3s ease;
}
.fab-btn:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 18px 38px -12px rgba(var(--primary-rgb),.55); color:var(--primary); }
.fab-btn:active{ transform:scale(.94); }
.fab-btn svg{ width:22px; height:22px; }
.fab-btn.fab-setting{
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.92),var(--primary));
  color:#fff; border-color:transparent;
  box-shadow:0 14px 32px -10px rgba(var(--primary-rgb),.65);
}
.fab-btn.fab-setting:hover{ color:#fff; }
.fab-btn.fab-setting svg{ animation:fab-gear 9s linear infinite; }
@keyframes fab-gear{ to{ transform:rotate(360deg); } }
#fabTop{ opacity:0; visibility:hidden; transform:translateY(14px); }
#fabTop.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* không che bottom-nav / sticky-buy trên mobile */
@media(max-width:680px){
  .fab-stack{ right:14px; bottom:calc(78px + env(safe-area-inset-bottom)); gap:10px; }
  .fab-btn{ width:48px; height:48px; min-width:48px; }
}
body.has-sticky-buy .fab-stack{ bottom:calc(150px + env(safe-area-inset-bottom)); }
@media(min-width:681px){ body.has-sticky-buy .fab-stack{ bottom:24px; } }

/* =====================================================================
   THEME DRAWER / BOTTOM SHEET
   ===================================================================== */
.ts-backdrop{
  position:fixed; inset:0; z-index:120;
  background:rgba(20,16,28,.34);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.ts-backdrop.open{ opacity:1; visibility:visible; }

.ts-drawer{
  position:fixed; top:0; right:0; z-index:121;
  width:400px; max-width:92vw; height:100%;
  background:var(--surface-glass-strong);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border-left:1px solid var(--border);
  box-shadow:-30px 0 70px -30px rgba(30,20,40,.5);
  transform:translateX(110%);
  transition:transform .42s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column;
  color:var(--text);
}
.ts-drawer.open{ transform:translateX(0); }

.ts-head{
  padding:22px 22px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:flex-start; gap:12px;
}
.ts-head-txt h2{ font-size:1.18rem; margin:0 0 4px; color:var(--text); }
.ts-head-txt p{ font-size:.84rem; color:var(--muted); margin:0; line-height:1.5; }
.ts-close{
  margin-left:auto; flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition:transform .2s, background .2s;
}
.ts-close:hover{ transform:rotate(90deg); background:rgba(var(--primary-rgb),.12); color:var(--primary); }

.ts-body{ padding:20px 22px 28px; overflow-y:auto; flex:1; }
.ts-group{ margin-bottom:24px; }
.ts-group > label.ts-label{
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-bottom:12px;
}
.ts-label .ts-ic{ font-size:1rem; }

/* segmented control */
.ts-seg{ display:flex; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:4px; gap:4px; }
.ts-seg button{
  flex:1; border:0; background:transparent; cursor:pointer;
  padding:10px 6px; border-radius:10px; font:inherit; font-size:.86rem; font-weight:600;
  color:var(--muted); transition:all .2s;
}
.ts-seg button.active{ background:linear-gradient(135deg,rgba(var(--primary-rgb),.92),var(--primary)); color:#fff; box-shadow:0 6px 16px -8px rgba(var(--primary-rgb),.6); }
.ts-seg button:not(.active):hover{ color:var(--text); background:rgba(var(--primary-rgb),.08); }

/* font list */
.ts-fonts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ts-font{
  border:1px solid var(--border); background:var(--surface);
  border-radius:12px; padding:11px 12px; cursor:pointer; text-align:left;
  color:var(--text); font-size:.95rem; transition:all .2s;
}
.ts-font small{ display:block; font-size:.7rem; color:var(--muted); margin-top:2px; }
.ts-font.active{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18); }
.ts-font:hover{ border-color:var(--primary); }

/* color presets */
.ts-swatches{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.ts-sw{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border), 0 4px 10px -4px rgba(0,0,0,.25);
  position:relative; transition:transform .15s;
}
.ts-sw:hover{ transform:scale(1.12); }
.ts-sw.active::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.ts-pick{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px 12px;
}
.ts-pick span{ font-size:.84rem; color:var(--muted); flex:1; }
.ts-pick input[type=color]{
  width:42px; height:32px; border:0; background:none; cursor:pointer; padding:0;
}
.ts-pick code{ font-size:.78rem; color:var(--text); background:rgba(var(--primary-rgb),.10); padding:3px 7px; border-radius:6px; }

.ts-reset{
  width:100%; margin-top:6px; padding:13px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); border-radius:14px; cursor:pointer;
  font:inherit; font-weight:600; font-size:.9rem; transition:all .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.ts-reset:hover{ border-color:var(--primary); color:var(--primary); background:rgba(var(--primary-rgb),.06); }
.ts-foot{ padding:14px 22px 22px; border-top:1px solid var(--border); }
.ts-note{ font-size:.74rem; color:var(--muted); text-align:center; margin-top:10px; }

/* ===== Bottom sheet trên mobile ===== */
@media(max-width:680px){
  .ts-drawer{
    width:100%; max-width:100%; height:auto; max-height:88vh;
    top:auto; bottom:0; left:0; right:0;
    border-left:0; border-top:1px solid var(--border);
    border-radius:26px 26px 0 0;
    transform:translateY(110%);
    box-shadow:0 -30px 70px -30px rgba(30,20,40,.55);
  }
  .ts-drawer.open{ transform:translateY(0); }
  .ts-drawer::before{
    content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
    width:42px; height:5px; border-radius:3px; background:var(--border);
  }
  .ts-head{ padding-top:26px; }
  .ts-fonts{ grid-template-columns:1fr 1fr; }
}

@media(prefers-reduced-motion:reduce){
  .ts-drawer,.ts-backdrop,.fab-btn,.fab-btn.fab-setting svg{ transition:none; animation:none; }
}