@import url('fonts.css');

/* ============================================================
   Rabit POS — Landing page styles
   Tokens gốc: Marketing/brand/tokens.css (rút gọn cho landing).
   Theme-aware: light mặc định + prefers-color-scheme dark
   + override thủ công qua [data-theme].
   ============================================================ */

:root{
  /* Brand — tông chủ đạo CAM NHẠT #FF9933 (giữ tên --rb-teal-* nhưng gán thang cam) */
  --rb-teal-50:#FFF6EC; --rb-teal-100:#FFEAD1; --rb-teal-300:#FFBD70;
  --rb-teal-400:#FFB04D; --rb-teal-500:#FFA333; --rb-teal-600:#FF9933;
  --rb-teal-700:#E67E00; --rb-teal-800:#CC7000; --rb-teal-900:#A85A00;
  --rb-carrot-50:#FFF7ED; --rb-carrot-300:#FDBA74; --rb-carrot-400:#FB923C;
  --rb-carrot-500:#F97316; --rb-carrot-600:#EA580C; --rb-carrot-700:#C2410C;
  --rb-slate-50:#F8FAFC; --rb-slate-100:#F1F5F9; --rb-slate-200:#E2E8F0;
  --rb-slate-300:#CBD5E1; --rb-slate-400:#94A3B8; --rb-slate-500:#64748B;
  --rb-slate-600:#475569; --rb-slate-700:#334155; --rb-slate-800:#1E293B;
  --rb-slate-900:#0F172A;

  /* Roles — LIGHT */
  --rb-primary:var(--rb-teal-600);
  --rb-primary-strong:var(--rb-teal-700);
  --rb-primary-hover:var(--rb-teal-800);
  --rb-primary-soft:var(--rb-teal-50);
  --rb-accent:var(--rb-carrot-500);
  --rb-accent-strong:var(--rb-carrot-600);
  --rb-accent-hover:var(--rb-carrot-700);
  --rb-accent-soft:var(--rb-carrot-50);

  --rb-bg:var(--rb-slate-100);
  --rb-surface:#FFFFFF;
  --rb-surface-2:var(--rb-slate-50);
  --rb-border:var(--rb-slate-200);
  --rb-border-strong:var(--rb-slate-300);
  --rb-text:var(--rb-slate-900);
  --rb-text-muted:var(--rb-slate-600);
  --rb-text-subtle:var(--rb-slate-500);
  --rb-link:var(--rb-teal-700);
  --rb-focus:var(--rb-teal-500);

  /* Hero gradient (light) */
  --hero-grad:linear-gradient(135deg,#E67E00 0%,#FF9933 55%,#CC7000 100%);
  --hero-on:#FFFFFF;
  --hero-on-muted:rgba(240,253,250,.85);

  --rb-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
  --rb-shadow-md:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --rb-shadow-lg:0 12px 28px rgba(15,23,42,.12),0 4px 8px rgba(15,23,42,.06);

  --rb-font-display:'Be Vietnam Pro',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --rb-font-body:'Inter','Be Vietnam Pro',system-ui,'Segoe UI',Roboto,Arial,sans-serif;

  --maxw:1120px;
  --radius:14px;
  --radius-lg:20px;
}

/* Dark: bật tự động theo hệ + thủ công qua [data-theme="dark"] */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --rb-primary:var(--rb-teal-500);
    --rb-primary-strong:var(--rb-teal-500);
    --rb-primary-hover:var(--rb-teal-400);
    --rb-primary-soft:rgba(20,184,166,.14);
    --rb-accent:var(--rb-carrot-400);
    --rb-accent-strong:var(--rb-carrot-500);
    --rb-accent-hover:var(--rb-carrot-400);
    --rb-accent-soft:rgba(249,115,22,.16);
    --rb-bg:#0B1220;
    --rb-surface:#0F172A;
    --rb-surface-2:#1E293B;
    --rb-border:#24324A;
    --rb-border-strong:#334155;
    --rb-text:#F1F5F9;
    --rb-text-muted:#CBD5E1;
    --rb-text-subtle:#94A3B8;
    --rb-link:var(--rb-teal-300);
    --rb-focus:var(--rb-teal-400);
    --hero-grad:linear-gradient(135deg,#0B1220 0%,#0F3D3A 60%,#0B1220 100%);
    --hero-on:#F1F5F9;
    --hero-on-muted:rgba(203,213,225,.82);
    --rb-shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --rb-shadow-md:0 4px 12px rgba(0,0,0,.5);
    --rb-shadow-lg:0 12px 28px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --rb-primary:var(--rb-teal-500);--rb-primary-strong:var(--rb-teal-500);
  --rb-primary-hover:var(--rb-teal-400);--rb-primary-soft:rgba(20,184,166,.14);
  --rb-accent:var(--rb-carrot-400);--rb-accent-strong:var(--rb-carrot-500);
  --rb-accent-hover:var(--rb-carrot-400);--rb-accent-soft:rgba(249,115,22,.16);
  --rb-bg:#0B1220;--rb-surface:#0F172A;--rb-surface-2:#1E293B;
  --rb-border:#24324A;--rb-border-strong:#334155;
  --rb-text:#F1F5F9;--rb-text-muted:#CBD5E1;--rb-text-subtle:#94A3B8;
  --rb-link:var(--rb-teal-300);--rb-focus:var(--rb-teal-400);
  --hero-grad:linear-gradient(135deg,#0B1220 0%,#0F3D3A 60%,#0B1220 100%);
  --hero-on:#F1F5F9;--hero-on-muted:rgba(203,213,225,.82);
  --rb-shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --rb-shadow-md:0 4px 12px rgba(0,0,0,.5);
  --rb-shadow-lg:0 12px 28px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--rb-bg);color:var(--rb-text);
  font-family:var(--rb-font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:var(--rb-link);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--rb-font-display);line-height:1.18;margin:0 0 .4em;letter-spacing:-.01em;}
:focus-visible{outline:3px solid var(--rb-focus);outline-offset:2px;border-radius:6px;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.section{padding:72px 0;}
.section-head{max-width:680px;margin:0 auto 40px;text-align:center;}
.section-head h2{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;}
.section-head p{color:var(--rb-text-muted);font-size:1.05rem;margin:0;}
.eyebrow{display:inline-block;font-family:var(--rb-font-display);font-weight:700;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rb-primary-strong);margin-bottom:10px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--rb-font-display);
  font-weight:700;font-size:1rem;padding:13px 24px;border-radius:var(--radius);
  border:2px solid transparent;cursor:pointer;transition:transform .12s ease,
  background .2s ease,box-shadow .2s ease;text-decoration:none;line-height:1;}
.btn:hover{text-decoration:none;transform:translateY(-2px);}
.btn svg{width:20px;height:20px;flex:none;}
.btn-accent{background:var(--rb-accent-strong);color:#fff;box-shadow:var(--rb-shadow-md);}
.btn-accent:hover{background:var(--rb-accent-hover);color:#fff;}
.btn-primary{background:var(--rb-primary-strong);color:#fff;box-shadow:var(--rb-shadow-md);}
.btn-primary:hover{background:var(--rb-primary-hover);color:#fff;}
.btn-ghost-on{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);}
.btn-ghost-on:hover{background:rgba(255,255,255,.22);color:#fff;}
.btn-outline{background:transparent;color:var(--rb-primary-strong);border-color:var(--rb-border-strong);}
.btn-outline:hover{border-color:var(--rb-primary);background:var(--rb-primary-soft);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--rb-surface) 88%,transparent);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--rb-border);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px;}
.nav-brand{display:flex;align-items:center;gap:10px;}
.nav-brand .logo-full{height:34px;width:auto;}
.nav-brand .logo-dark{display:none;}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a.navlink{font-weight:500;color:var(--rb-text-muted);font-size:.95rem;white-space:nowrap;}
.nav-links a.navlink:hover{color:var(--rb-primary-strong);text-decoration:none;}
.nav-actions{display:flex;align-items:center;gap:12px;}
.navlink-login{font-weight:600;color:var(--rb-text);font-size:.92rem;white-space:nowrap;}
.navlink-login:hover{color:var(--rb-primary-strong);text-decoration:none;}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;border:1px solid var(--rb-border);background:var(--rb-surface-2);
  color:var(--rb-text-muted);cursor:pointer;}
.theme-toggle:hover{color:var(--rb-primary-strong);border-color:var(--rb-primary);}
.theme-toggle svg{width:20px;height:20px;}
.theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--hero-grad);color:var(--hero-on);overflow:hidden;}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 85% 15%,rgba(249,115,22,.28),transparent 60%);}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:48px;align-items:center;padding:76px 0 84px;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;
  font-size:.82rem;font-weight:600;margin-bottom:20px;color:var(--hero-on);}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--rb-carrot-400);}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.4rem);font-weight:800;color:var(--hero-on);margin-bottom:.35em;}
.hero h1 .accent{color:var(--rb-carrot-300);}
.hero .tagline{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--hero-on-muted);
  max-width:520px;margin:0 0 30px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px;}
.hero-meta{display:flex;flex-wrap:wrap;gap:20px 28px;font-size:.9rem;color:var(--hero-on-muted);}
.hero-meta span{display:inline-flex;align-items:center;gap:8px;}
.hero-meta svg{width:18px;height:18px;color:var(--rb-carrot-300);flex:none;}
.hero-visual{position:relative;}
.hero-shot{border-radius:var(--radius-lg);box-shadow:var(--rb-shadow-lg);
  border:1px solid rgba(255,255,255,.25);overflow:hidden;background:#fff;transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);}
.hero-shot img{width:100%;display:block;}
.hero-float{position:absolute;bottom:-22px;left:-18px;background:var(--rb-surface);
  color:var(--rb-text);border-radius:14px;box-shadow:var(--rb-shadow-lg);
  padding:12px 16px;display:flex;align-items:center;gap:12px;border:1px solid var(--rb-border);}
.hero-float .fico{width:38px;height:38px;border-radius:10px;background:var(--rb-primary-soft);
  color:var(--rb-primary-strong);display:flex;align-items:center;justify-content:center;flex:none;}
.hero-float .fico svg{width:22px;height:22px;}
.hero-float strong{font-family:var(--rb-font-display);font-size:1.05rem;display:block;line-height:1.2;}
.hero-float small{color:var(--rb-text-subtle);font-size:.78rem;}

/* ---------- Industries strip ---------- */
.industries{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--rb-surface);
  border:1px solid var(--rb-border);border-radius:999px;padding:10px 18px;
  font-weight:600;font-size:.95rem;box-shadow:var(--rb-shadow-sm);}
.chip svg{width:20px;height:20px;color:var(--rb-primary);flex:none;}

/* ---------- Features ---------- */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.feature{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius-lg);
  padding:28px 24px;box-shadow:var(--rb-shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.feature:hover{transform:translateY(-4px);box-shadow:var(--rb-shadow-md);border-color:var(--rb-primary);}
.feature .ico{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--rb-primary-soft);color:var(--rb-primary-strong);margin-bottom:16px;}
.feature .ico.carrot{background:var(--rb-accent-soft);color:var(--rb-accent-hover);}
.feature .ico svg{width:28px;height:28px;}
.feature h3{font-size:1.18rem;font-weight:700;}
.feature p{margin:0;color:var(--rb-text-muted);font-size:.96rem;}

/* ---------- Showcase ---------- */
.showcase{background:var(--rb-surface-2);border-top:1px solid var(--rb-border);border-bottom:1px solid var(--rb-border);}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.showcase-shot{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--rb-shadow-lg);
  border:1px solid var(--rb-border);background:var(--rb-surface);}
.showcase-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px;}
.showcase-list li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;}
.showcase-list .tick{width:24px;height:24px;border-radius:50%;background:var(--rb-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;}
.showcase-list .tick svg{width:15px;height:15px;}
.showcase-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
.showcase-thumbs figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--rb-border);
  box-shadow:var(--rb-shadow-sm);background:var(--rb-surface);}
.showcase-thumbs figcaption{font-size:.82rem;color:var(--rb-text-subtle);padding:8px 12px;}

/* ---------- Download ---------- */
.download{background:var(--rb-surface);}
.download-card{background:linear-gradient(160deg,var(--rb-primary-strong),var(--rb-primary-hover));
  color:#fff;border-radius:var(--radius-lg);padding:44px 40px;box-shadow:var(--rb-shadow-lg);position:relative;overflow:hidden;}
.download-card::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.35),transparent 70%);}
.download-card h2{color:#fff;font-size:clamp(1.5rem,3.5vw,2rem);position:relative;z-index:1;}
.download-card p{color:rgba(240,253,250,.9);position:relative;z-index:1;margin-top:0;}
.os-buttons{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 8px;position:relative;z-index:1;}
.os-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--rb-primary-hover);
  font-family:var(--rb-font-display);font-weight:700;padding:13px 22px;border-radius:var(--radius);
  box-shadow:var(--rb-shadow-md);transition:transform .12s ease;}
.os-btn:hover{transform:translateY(-2px);text-decoration:none;color:var(--rb-primary-hover);}
.os-btn svg{width:24px;height:24px;flex:none;}
.os-btn small{display:block;font-weight:500;font-size:.72rem;color:var(--rb-text-subtle);font-family:var(--rb-font-body);}
.note-pending{position:relative;z-index:1;margin-top:14px;font-size:.85rem;color:rgba(240,253,250,.82);
  display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.16);padding:8px 14px;border-radius:10px;}
.note-pending svg{width:16px;height:16px;flex:none;}

.install-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;}
.step{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius);
  padding:22px 20px;box-shadow:var(--rb-shadow-sm);}
.step .num{font-family:var(--rb-font-display);font-weight:800;font-size:1.1rem;width:34px;height:34px;
  border-radius:9px;background:var(--rb-accent-soft);color:var(--rb-accent-hover);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.step h4{font-size:1.02rem;font-weight:700;margin-bottom:6px;}
.step p{margin:0;color:var(--rb-text-muted);font-size:.9rem;}
.step code{font-family:ui-monospace,'SF Mono',Menlo,monospace;background:var(--rb-surface-2);
  border:1px solid var(--rb-border);border-radius:6px;padding:1px 6px;font-size:.85em;color:var(--rb-accent-hover);}
.sysreq{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;
  color:var(--rb-text-muted);font-size:.9rem;}
.sysreq span{display:inline-flex;align-items:center;gap:8px;}
.sysreq svg{width:17px;height:17px;color:var(--rb-primary);flex:none;}

/* ---------- Help CTA ---------- */
.help-band{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;
  background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius-lg);
  padding:38px 40px;box-shadow:var(--rb-shadow-sm);}
.help-band h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;}
.help-band p{color:var(--rb-text-muted);margin:0 0 4px;}
.help-visual{display:flex;align-items:center;justify-content:center;}
.help-visual .book{width:112px;height:112px;border-radius:26px;background:var(--rb-primary-soft);
  color:var(--rb-primary-strong);display:flex;align-items:center;justify-content:center;}
.help-visual .book svg{width:64px;height:64px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--rb-slate-900);color:#CBD5E1;padding:52px 0 30px;}
:root[data-theme="dark"] .site-footer{background:#070C16;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px;}
.footer-brand .logo-dark{height:36px;margin-bottom:14px;}
.footer-brand p{color:#94A3B8;font-size:.92rem;max-width:320px;margin:0;}
.footer-col h4{color:#fff;font-size:.95rem;font-weight:700;margin-bottom:14px;font-family:var(--rb-font-display);}
.footer-col a{display:block;color:#CBD5E1;padding:5px 0;font-size:.92rem;}
.footer-col a:hover{color:var(--rb-teal-300);text-decoration:none;}
.footer-bottom{border-top:1px solid #24324A;padding-top:22px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:10px;color:#64748B;font-size:.85rem;}

/* ---------- Section alt background ---------- */
.section.alt{background:var(--rb-surface-2);border-top:1px solid var(--rb-border);border-bottom:1px solid var(--rb-border);}

/* ---------- Advantages (ưu điểm) ---------- */
.adv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.adv-card{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius);
  padding:22px 18px;text-align:left;box-shadow:var(--rb-shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.adv-card:hover{transform:translateY(-4px);box-shadow:var(--rb-shadow-md);border-color:var(--rb-primary);}
.adv-card .ico{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--rb-primary-soft);color:var(--rb-primary-strong);margin-bottom:14px;}
.adv-card .ico.carrot{background:var(--rb-accent-soft);color:var(--rb-accent-hover);}
.adv-card .ico svg{width:24px;height:24px;}
.adv-card h3{font-size:1rem;font-weight:700;margin-bottom:6px;}
.adv-card p{margin:0;color:var(--rb-text-muted);font-size:.88rem;line-height:1.5;}

/* ---------- Industry grid (9 ngành hàng) ---------- */
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.industry-card{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius);
  padding:22px 20px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--rb-shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.industry-card:hover{transform:translateY(-3px);box-shadow:var(--rb-shadow-md);border-color:var(--rb-primary);}
.industry-card .ico{flex:none;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--rb-primary-soft);color:var(--rb-primary-strong);}
.industry-card .ico svg{width:22px;height:22px;}
.industry-card h3{font-size:1rem;font-weight:700;margin-bottom:4px;}
.industry-card p{margin:0;color:var(--rb-text-muted);font-size:.86rem;line-height:1.5;}

/* ---------- Feature sub (theo ngành) ---------- */
.feature-sub{margin-top:34px;padding-top:30px;border-top:1px solid var(--rb-border);text-align:center;}
.feature-sub-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;}
.sub-chip{display:inline-block;background:var(--rb-surface-2);border:1px solid var(--rb-border);
  border-radius:999px;padding:8px 16px;font-size:.85rem;color:var(--rb-text-muted);font-weight:500;}

/* ---------- Split section (Hoá đơn điện tử / Vận chuyển / App mobile) ---------- */
.split-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;}
.split-grid.reverse{grid-template-columns:1.15fr .85fr;}
.split-grid.reverse .split-copy{order:1;}
.split-grid.reverse .split-visual{order:2;}
.split-visual{display:flex;align-items:center;justify-content:center;}
.split-ico{width:180px;height:180px;border-radius:50%;background:var(--rb-primary-soft);
  color:var(--rb-primary-strong);display:flex;align-items:center;justify-content:center;flex:none;}
.split-ico svg{width:84px;height:84px;}
.split-copy h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;}
.split-copy p{color:var(--rb-text-muted);font-size:1.02rem;}
.tick-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;}
.tick-list li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;}
.tick-list .tick{width:22px;height:22px;border-radius:50%;background:var(--rb-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;}
.tick-list .tick svg{width:13px;height:13px;}

/* ---------- Shipping badges (Vận chuyển) ---------- */
.shipping-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.ship-badge{display:inline-flex;align-items:center;gap:8px;background:var(--rb-surface);
  border:1px solid var(--rb-border);border-radius:999px;padding:9px 16px;font-weight:600;font-size:.88rem;}
.ship-badge.active{border-color:var(--rb-primary);color:var(--rb-primary-strong);background:var(--rb-primary-soft);}
.ship-badge em{font-style:normal;font-weight:500;color:var(--rb-text-subtle);font-size:.78rem;}

/* ---------- Phone mock (App mobile) ---------- */
.phone-mock{width:220px;height:440px;border-radius:34px;background:var(--rb-slate-900);
  padding:12px;box-shadow:var(--rb-shadow-lg);flex:none;}
:root[data-theme="dark"] .phone-mock{background:#000;}
.phone-mock-screen{width:100%;height:100%;border-radius:24px;background:var(--rb-surface);
  padding:22px 16px;position:relative;overflow:hidden;}
.pm-dot{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:44px;height:6px;
  border-radius:4px;background:var(--rb-border-strong);}
.pm-row{height:12px;border-radius:6px;background:var(--rb-primary-soft);margin:22px 0 10px;width:100%;}
.pm-row.w70{width:70%;background:var(--rb-border);}
.pm-row.w50{width:50%;background:var(--rb-border);}
.pm-card{height:120px;border-radius:14px;background:linear-gradient(135deg,var(--rb-primary),var(--rb-accent));margin:14px 0;}

/* ---------- Store badges (placeholder — chưa phát hành) ---------- */
.store-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:var(--rb-slate-800);
  color:#fff;border-radius:10px;padding:9px 16px;opacity:.55;cursor:not-allowed;}
:root:not([data-theme="dark"]) .store-badge{background:var(--rb-slate-700);}
.store-badge svg{width:24px;height:24px;flex:none;}
.store-badge span{display:block;font-family:var(--rb-font-display);font-weight:700;font-size:.9rem;line-height:1.15;}
.store-badge em{display:block;font-style:normal;font-weight:500;font-size:.68rem;color:#CBD5E1;}

/* ---------- Rabit Cloud CTA ---------- */
.cloud-cta{background:var(--rb-surface);}
.cloud-card{background:linear-gradient(150deg,var(--rb-teal-800),var(--rb-teal-900) 65%,#3a2400);
  border-radius:var(--radius-lg);padding:48px 44px;box-shadow:var(--rb-shadow-lg);color:#fff;
  display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;position:relative;overflow:hidden;}
.cloud-card::after{content:"";position:absolute;left:-60px;bottom:-60px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,153,51,.35),transparent 70%);}
.cloud-copy{position:relative;z-index:1;}
.cloud-copy h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.1rem);}
.cloud-copy p{color:rgba(255,246,236,.88);font-size:1.02rem;max-width:520px;}
.cloud-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;}
.cloud-visual{position:relative;z-index:1;display:flex;justify-content:center;}
.cloud-url-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  border-radius:14px;padding:18px 22px;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:1rem;display:flex;align-items:center;gap:10px;backdrop-filter:blur(6px);}
.cloud-url-chip b{color:var(--rb-carrot-300);}
.dot-live{width:9px;height:9px;border-radius:50%;background:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.25);flex:none;}

/* ============================================================
   AUTH PAGES (Đăng ký / Đăng nhập / Dashboard) — Rabit Cloud
   ============================================================ */
.auth-shell{min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--rb-primary-soft) 0%,var(--rb-bg) 340px);}
.auth-topbar{padding:22px 0;}
.auth-topbar .container{display:flex;align-items:center;justify-content:space-between;}
.auth-back{display:inline-flex;align-items:center;gap:8px;color:var(--rb-text-muted);font-weight:600;font-size:.92rem;}
.auth-back:hover{color:var(--rb-primary-strong);text-decoration:none;}
.auth-back svg{width:18px;height:18px;}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 20px 60px;}
.auth-card{width:100%;max-width:420px;background:var(--rb-surface);border:1px solid var(--rb-border);
  border-radius:var(--radius-lg);box-shadow:var(--rb-shadow-lg);padding:36px 32px;}
.auth-card.wide{max-width:640px;}
.auth-mark{width:52px;height:52px;margin-bottom:16px;}
.auth-card h1{font-size:1.5rem;font-weight:800;margin-bottom:6px;}
.auth-sub{color:var(--rb-text-muted);font-size:.95rem;margin:0 0 26px;}
.auth-field{margin-bottom:16px;}
.auth-field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:7px;color:var(--rb-text);}
.auth-field input{width:100%;padding:11px 13px;border:1px solid var(--rb-border-strong);
  border-radius:10px;font-size:.96rem;font-family:var(--rb-font-body);background:var(--rb-surface);
  color:var(--rb-text);transition:border-color .15s ease,box-shadow .15s ease;}
.auth-field input:focus{outline:none;border-color:var(--rb-primary);
  box-shadow:0 0 0 3px var(--rb-primary-soft);}
.auth-field textarea{width:100%;padding:11px 13px;border:1px solid var(--rb-border-strong);
  border-radius:10px;font-size:.96rem;font-family:var(--rb-font-body);background:var(--rb-surface);
  color:var(--rb-text);resize:vertical;}
.auth-field textarea:focus{outline:none;border-color:var(--rb-primary);
  box-shadow:0 0 0 3px var(--rb-primary-soft);}
.auth-submit{width:100%;justify-content:center;margin-top:6px;}
.auth-submit:disabled{opacity:.65;cursor:not-allowed;transform:none;}
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--rb-text-subtle);
  font-size:.8rem;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--rb-border);}
.auth-google{width:100%;justify-content:center;}
.auth-google svg{width:19px;height:19px;}
.auth-msg{margin-top:16px;font-size:.88rem;padding:10px 13px;border-radius:9px;display:none;line-height:1.5;}
.auth-msg:not(:empty){display:block;}
.auth-msg.is-ok{background:rgba(16,185,129,.12);color:#0F9D6E;border:1px solid rgba(16,185,129,.3);}
.auth-msg.is-err{background:rgba(220,38,38,.1);color:#DC2626;border:1px solid rgba(220,38,38,.28);}
.auth-footline{margin:22px 0 0;text-align:center;font-size:.88rem;color:var(--rb-text-muted);}
.auth-footline a{font-weight:700;}
.auth-hint{font-size:.78rem;color:var(--rb-text-subtle);margin-top:6px;}

/* ---------- Dashboard ---------- */
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;
  flex-wrap:wrap;}
.dash-hello{color:var(--rb-text-muted);font-size:.92rem;margin:2px 0 0;}
.dash-status{display:inline-flex;align-items:center;gap:9px;background:var(--rb-surface-2);
  border:1px solid var(--rb-border);border-radius:999px;padding:8px 15px;font-weight:600;font-size:.88rem;
  margin-bottom:20px;}
.dash-dot{width:9px;height:9px;border-radius:50%;background:var(--rb-slate-400);flex:none;}
.dash-dot.on{background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.2);}
.dash-dot.pending{background:var(--rb-accent);box-shadow:0 0 0 4px var(--rb-accent-soft);}
.dash-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--rb-border);}
.dash-section label{display:block;font-size:.82rem;font-weight:700;color:var(--rb-text);margin-bottom:8px;}
.dash-url-box{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--rb-surface-2);border:1px solid var(--rb-border);border-radius:10px;
  padding:13px 15px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.92rem;
  word-break:break-all;color:var(--rb-primary-strong);font-weight:600;}
.dash-copy-btn{flex:none;background:var(--rb-surface);border:1px solid var(--rb-border-strong);
  border-radius:8px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--rb-text-muted);}
.dash-copy-btn:hover{color:var(--rb-primary-strong);border-color:var(--rb-primary);}
.dash-copy-btn svg{width:16px;height:16px;}
.dash-note{font-size:.82rem;color:var(--rb-text-subtle);margin-top:8px;}
.dash-steps{font-size:.88rem;color:var(--rb-text-muted);padding-left:20px;margin:10px 0 16px;}
.dash-steps li{margin-bottom:5px;}
.dash-code-box{text-align:center;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:1.7rem;font-weight:800;letter-spacing:.12em;padding:18px;border:2px dashed var(--rb-primary);
  border-radius:12px;margin-top:14px;background:var(--rb-primary-soft);color:var(--rb-primary-strong);
  display:none;}
.dash-code-note{text-align:center;font-size:.8rem;color:var(--rb-text-subtle);margin-top:8px;display:none;}
.dash-instance{font-size:.9rem;color:var(--rb-text-muted);}
.dash-logout{color:var(--rb-text-muted);}

/* ---------- Tên miền cá nhân ưng ý + Ủng hộ tác giả (dashboard.html) ---------- */
.dreq-note{border-radius:10px;padding:12px 14px;font-size:.88rem;margin-bottom:14px;line-height:1.5;}
.dreq-note-ok{background:rgba(16,185,129,.12);color:#0F9D6E;border:1px solid rgba(16,185,129,.3);}
.dreq-note-err{background:rgba(220,38,38,.1);color:#DC2626;border:1px solid rgba(220,38,38,.28);}
.dreq-form{margin-top:6px;}
.dreq-form-actions{display:flex;gap:10px;flex-wrap:wrap;}
.dreq-support{margin-top:6px;background:var(--rb-primary-soft);border:1px solid var(--rb-border);
  border-radius:var(--radius);padding:22px;}
.dreq-status-line{font-weight:700;font-size:.9rem;margin:0 0 14px;color:var(--rb-primary-strong);}
.dreq-support-title{font-size:1.05rem;font-weight:800;margin:0 0 16px;text-align:center;line-height:1.4;}
.dreq-qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;}
.support-qr{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius);
  padding:16px;text-align:center;}
.support-qr-media{width:100%;max-width:180px;aspect-ratio:1/1;margin:0 auto 10px;display:flex;
  align-items:center;justify-content:center;background:var(--rb-surface-2);border-radius:10px;overflow:hidden;}
.support-qr-media img{width:100%;height:100%;object-fit:contain;}
.support-qr-media svg{width:100%;height:100%;}
.support-qr-placeholder{display:none;align-items:center;justify-content:center;text-align:center;
  font-size:.78rem;color:var(--rb-text-subtle);padding:12px;line-height:1.4;height:100%;}
.support-qr-label{display:block;font-size:.82rem;color:var(--rb-text-muted);font-weight:600;}
.dreq-fb-btn{width:100%;justify-content:center;font-size:1.02rem;padding:15px 20px;}
.dreq-hint{margin:14px 0 0;font-size:.84rem;color:var(--rb-text-muted);text-align:center;line-height:1.5;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav-links{gap:14px;}
  .nav-links a.navlink{font-size:.88rem;}
}
@media (max-width:960px){
  .nav-links{display:none;}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:38px;padding:56px 0 64px;}
  .hero-visual{order:-1;}
  .hero-shot{transform:none;}
  .adv-grid{grid-template-columns:1fr 1fr;}
  .industry-grid{grid-template-columns:1fr 1fr;}
  .features-grid{grid-template-columns:1fr 1fr;}
  .split-grid,.split-grid.reverse{grid-template-columns:1fr;text-align:center;}
  .split-grid .split-copy,.split-grid.reverse .split-copy{order:2;}
  .split-grid .split-visual,.split-grid.reverse .split-visual{order:1;}
  .tick-list li{text-align:left;}
  .shipping-badges,.store-badges{justify-content:center;}
  .showcase-grid{grid-template-columns:1fr;gap:28px;}
  .install-steps{grid-template-columns:1fr;}
  .help-band{grid-template-columns:1fr;text-align:center;}
  .help-visual{order:-1;}
  .cloud-card{grid-template-columns:1fr;text-align:center;padding:40px 28px;}
  .cloud-actions{justify-content:center;}
  .cloud-visual{order:-1;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .section{padding:52px 0;}
  .nav-links{display:none;}
  .navlink-login{display:none;}
  .adv-grid{grid-template-columns:1fr;}
  .industry-grid{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr;}
  .feature-sub-list{flex-direction:column;align-items:center;}
  .showcase-thumbs{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .download-card{padding:32px 22px;}
  .hero-float{left:0;right:0;margin:0 auto;bottom:-26px;width:max-content;max-width:90%;}
  .phone-mock{width:170px;height:340px;}
  .split-ico{width:130px;height:130px;}
  .split-ico svg{width:60px;height:60px;}
  .auth-card{padding:28px 20px;}
  .dash-top{flex-direction:column;align-items:flex-start;}
  .dreq-qr-grid{grid-template-columns:1fr;}
  .support-qr-media{max-width:220px;}
  .dreq-support{padding:18px 16px;}
}

/* ============================================================
   GÓP Ý / BÁO CÁO — feed kiểu mạng xã hội (gopy.html)
   ============================================================ */
.fb-main{align-items:flex-start;padding-top:32px;}
.fb-shell{width:100%;max-width:720px;margin:0 auto;}
.fb-page-title{font-size:1.7rem;font-weight:800;margin-bottom:4px;}

.fb-composer-card{max-width:none;padding:26px 24px;margin-bottom:26px;}
.fb-composer-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.fb-composer-card select,
.fb-composer-card textarea{width:100%;padding:11px 13px;border:1px solid var(--rb-border-strong);
  border-radius:10px;font-size:.96rem;font-family:var(--rb-font-body);background:var(--rb-surface);
  color:var(--rb-text);resize:vertical;}
.fb-composer-card select:focus,
.fb-composer-card textarea:focus{outline:none;border-color:var(--rb-primary);box-shadow:0 0 0 3px var(--rb-primary-soft);}
.fb-composer-card input[type="file"]{width:100%;font-size:.85rem;color:var(--rb-text-muted);}

.fb-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:12px;}
.fb-preview-item{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--rb-border);
  aspect-ratio:1/1;background:var(--rb-surface-2);}
.fb-preview-item img{width:100%;height:100%;object-fit:cover;}
.fb-preview-remove{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(15,23,42,.72);color:#fff;border:none;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;}
.fb-preview-remove:hover{background:var(--rb-accent-strong);}

.fb-filters{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;background:var(--rb-surface);
  border:1px solid var(--rb-border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--rb-shadow-sm);}
.fb-filter-item{display:flex;flex-direction:column;gap:5px;flex:1;min-width:140px;}
.fb-filter-item label{font-size:.78rem;font-weight:700;color:var(--rb-text-muted);}
.fb-filter-item select{padding:8px 10px;border:1px solid var(--rb-border-strong);border-radius:8px;
  font-size:.88rem;background:var(--rb-surface);color:var(--rb-text);}

.fb-empty{text-align:center;color:var(--rb-text-muted);padding:40px 0;}

.fb-feed{display:flex;flex-direction:column;gap:18px;}
.fb-card{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius-lg);
  padding:22px 22px 18px;box-shadow:var(--rb-shadow-sm);}
.fb-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.fb-card-headinfo{flex:1;min-width:0;}
.fb-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--rb-primary-soft);
  color:var(--rb-primary-strong);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-family:var(--rb-font-display);}
.fb-avatar-sm{width:30px;height:30px;font-size:.85rem;}
.fb-author{font-weight:700;font-size:.94rem;}
.fb-meta{font-size:.78rem;color:var(--rb-text-subtle);}
.fb-status-slot select.fb-admin-status{padding:7px 10px;border-radius:8px;border:1px solid var(--rb-border-strong);
  background:var(--rb-surface);color:var(--rb-text);font-size:.82rem;font-weight:600;}

.fb-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.fb-badge{display:inline-block;font-size:.74rem;font-weight:700;padding:4px 11px;border-radius:999px;
  letter-spacing:.01em;}
.fb-badge.is-bug{background:rgba(220,38,38,.12);color:#DC2626;}
.fb-badge.is-suggestion{background:var(--rb-accent-soft);color:var(--rb-accent-hover);}
.fb-badge.is-field{background:var(--rb-surface-2);color:var(--rb-text-muted);border:1px solid var(--rb-border);}
.fb-badge.is-status{background:var(--rb-surface-2);color:var(--rb-text-muted);}
.fb-badge.is-status-new{background:rgba(100,116,139,.14);color:var(--rb-slate-600);}
.fb-badge.is-status-in-progress{background:rgba(245,158,11,.14);color:#B45309;}
.fb-badge.is-status-resolved{background:rgba(34,197,94,.14);color:#15803D;}
.fb-badge.is-status-wont-fix{background:rgba(220,38,38,.1);color:#B91C1C;}

.fb-title{font-size:1.08rem;font-weight:700;margin:0 0 6px;}
.fb-body{margin:0 0 12px;color:var(--rb-text);font-size:.94rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;}

.fb-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:14px;}
.fb-image-thumb{padding:0;border:1px solid var(--rb-border);border-radius:10px;overflow:hidden;
  cursor:pointer;aspect-ratio:1/1;background:var(--rb-surface-2);}
.fb-image-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease;}
.fb-image-thumb:hover img{transform:scale(1.05);}

.fb-reactions{border-top:1px solid var(--rb-border);padding-top:10px;}
.fb-summary-slot .fb-summary{display:block;font-size:.8rem;color:var(--rb-text-subtle);margin-bottom:8px;}
.fb-reactions-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.fb-picker{display:flex;gap:4px;}
.fb-react-btn{width:36px;height:36px;border-radius:50%;border:1px solid transparent;background:transparent;
  font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;}
.fb-react-btn:hover{background:var(--rb-surface-2);transform:translateY(-2px) scale(1.08);}
.fb-react-btn.is-active{background:var(--rb-primary-soft);border-color:var(--rb-primary);}
.fb-comment-toggle{background:transparent;border:none;color:var(--rb-text-muted);font-weight:600;
  font-size:.86rem;cursor:pointer;padding:6px 10px;border-radius:8px;}
.fb-comment-toggle:hover{background:var(--rb-surface-2);color:var(--rb-primary-strong);}

.fb-comments{margin-top:14px;padding-top:14px;border-top:1px solid var(--rb-border);}
.fb-comment-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;}
.fb-no-comments{font-size:.85rem;color:var(--rb-text-subtle);margin:0;}
.fb-comment{display:flex;gap:10px;align-items:flex-start;}
.fb-comment-body{flex:1;background:var(--rb-surface-2);border-radius:12px;padding:9px 13px;}
.fb-comment-author{font-size:.82rem;font-weight:700;}
.fb-comment-text{font-size:.88rem;color:var(--rb-text);white-space:pre-wrap;word-break:break-word;}
.fb-comment-time{font-size:.72rem;color:var(--rb-text-subtle);margin-top:3px;}
.fb-comment-form{display:flex;gap:8px;}
.fb-comment-input{flex:1;padding:9px 12px;border:1px solid var(--rb-border-strong);border-radius:20px;
  font-size:.88rem;background:var(--rb-surface);color:var(--rb-text);}
.fb-comment-input:focus{outline:none;border-color:var(--rb-primary);}
.fb-comment-form .btn{padding:8px 16px;font-size:.85rem;}

.fb-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;}
.fb-lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);}

@media (max-width:640px){
  .fb-composer-row{grid-template-columns:1fr;}
  .fb-filters{flex-direction:column;}
  .fb-card{padding:18px 16px 14px;}
}

/* ============================================================
   TRANG ADMIN (admin.html) — Rabit Cloud
   ============================================================ */
.adm-shell{min-height:100vh;display:flex;background:var(--rb-bg);}
/* Đặc tả CSS: [hidden] (UA stylesheet) và .adm-shell/.adm-gate (author, cùng
   độ đặc hiệu 0-1-0) — rule author nạp sau nên thắng, làm [hidden] mất tác
   dụng nếu không khai lại tường minh ở đây (đã bắt lỗi qua browser-testing:
   4 màn hình gate/shell chồng nhau trong 1 screenshot). */
.adm-shell[hidden],.adm-gate[hidden]{display:none;}

/* ---------- Sidebar ---------- */
.adm-sidebar{width:248px;flex:none;background:var(--rb-surface);border-right:1px solid var(--rb-border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.adm-sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 18px;border-bottom:1px solid var(--rb-border);}
.adm-sidebar-brand img{width:30px;height:30px;border-radius:8px;flex:none;}
.adm-sidebar-brand strong{display:block;font-family:var(--rb-font-display);font-size:.98rem;line-height:1.25;}
.adm-sidebar-brand span{display:block;font-size:.72rem;color:var(--rb-text-subtle);font-weight:600;letter-spacing:.03em;text-transform:uppercase;}
.adm-nav{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:2px;}
.adm-nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:10px;
  border:none;background:transparent;color:var(--rb-text-muted);font-family:var(--rb-font-body);
  font-size:.92rem;font-weight:600;cursor:pointer;text-align:left;transition:background .15s ease,color .15s ease;}
.adm-nav-item svg{width:19px;height:19px;flex:none;}
.adm-nav-item:hover{background:var(--rb-surface-2);color:var(--rb-text);}
.adm-nav-item.is-active{background:var(--rb-primary-soft);color:var(--rb-primary-strong);}
.adm-nav-item span.lbl{flex:1;}
.adm-nav-badge{flex:none;background:var(--rb-accent);color:#fff;font-size:.72rem;font-weight:700;
  border-radius:999px;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;}
.adm-nav-badge[hidden]{display:none;}
.adm-sidebar-foot{border-top:1px solid var(--rb-border);padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.adm-sidebar-email{font-size:.8rem;color:var(--rb-text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.adm-sidebar-actions{display:flex;align-items:center;gap:8px;}
.adm-sidebar-actions .btn{padding:8px 12px;font-size:.82rem;flex:1;justify-content:center;}

/* ---------- Main ---------- */
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.adm-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 26px;background:color-mix(in srgb,var(--rb-bg) 88%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rb-border);}
.adm-topbar h1{font-size:1.25rem;font-weight:800;margin:0;flex:none;}
.adm-topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;}
.adm-mobile-toggle{display:none;flex:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--rb-border);
  background:var(--rb-surface);color:var(--rb-text);align-items:center;justify-content:center;cursor:pointer;}
.adm-mobile-toggle svg{width:20px;height:20px;}
.adm-content{flex:1;padding:24px 26px 60px;max-width:1280px;width:100%;}
.adm-panel[hidden]{display:none;}

/* ---------- Select / input controls dùng trong topbar & filter ---------- */
.adm-select,.adm-input{padding:8px 12px;border:1px solid var(--rb-border-strong);border-radius:9px;
  font-size:.86rem;font-family:var(--rb-font-body);background:var(--rb-surface);color:var(--rb-text);}
.adm-select:focus,.adm-input:focus{outline:none;border-color:var(--rb-primary);box-shadow:0 0 0 3px var(--rb-primary-soft);}

/* ---------- Stat tiles ---------- */
.adm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:26px;}
.adm-tile{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--rb-shadow-sm);}
.adm-tile .ico{width:36px;height:36px;border-radius:10px;background:var(--rb-primary-soft);
  color:var(--rb-primary-strong);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.adm-tile .ico svg{width:20px;height:20px;}
.adm-tile .ico.carrot{background:var(--rb-accent-soft);color:var(--rb-accent-hover);}
.adm-tile .val{font-family:var(--rb-font-display);font-size:1.5rem;font-weight:800;line-height:1.2;
  font-variant-numeric:tabular-nums;}
.adm-tile .lbl{font-size:.82rem;color:var(--rb-text-muted);margin-top:3px;}

/* ---------- Card chứa biểu đồ / bảng ---------- */
.adm-card{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius-lg);
  padding:20px 22px;box-shadow:var(--rb-shadow-sm);margin-bottom:22px;}
.adm-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.adm-card-head h2{font-size:1.02rem;font-weight:700;margin:0;}
.adm-card-head .adm-sub{font-size:.8rem;color:var(--rb-text-subtle);margin-top:2px;}
.adm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.adm-grid-2.tight{gap:16px;}

/* ---------- Legend ---------- */
.adm-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;}
.adm-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--rb-text-muted);}
.adm-legend-dot{width:10px;height:10px;border-radius:3px;flex:none;}

/* ---------- Tooltip dùng chung cho chart ---------- */
.adm-tooltip{position:fixed;z-index:300;pointer-events:none;background:var(--rb-slate-900);color:#fff;
  font-size:.78rem;line-height:1.5;padding:7px 10px;border-radius:8px;box-shadow:var(--rb-shadow-lg);
  max-width:220px;opacity:0;transform:translateY(4px);transition:opacity .1s ease;}
:root[data-theme="dark"] .adm-tooltip{background:#000;}
.adm-tooltip.is-visible{opacity:1;}
.adm-tooltip b{color:var(--rb-carrot-300);}

/* ---------- Biểu đồ cột ngang (HTML/CSS, xem admin.js hBarChart) ---------- */
.adm-hbar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;cursor:default;}
.adm-hbar-label{width:130px;flex:none;font-size:.82rem;color:var(--rb-text);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.adm-hbar-track{flex:1;height:14px;background:var(--rb-surface-2);border-radius:4px;position:relative;overflow:hidden;}
.adm-hbar-fill{height:100%;border-radius:4px;transition:width .3s ease;}
.adm-hbar-value{width:auto;flex:none;font-size:.82rem;font-weight:700;color:var(--rb-text);
  font-variant-numeric:tabular-nums;min-width:78px;}

/* ---------- SVG chart chung ---------- */
.adm-chart-svg{width:100%;height:auto;display:block;}
.adm-chart-svg .grid-line{stroke:var(--rb-border);stroke-width:1;}
.adm-chart-svg .axis-line{stroke:var(--rb-border-strong);stroke-width:1;}
.adm-chart-svg .axis-label{fill:var(--rb-text-subtle);font-size:10.5px;font-family:var(--rb-font-body);}
.adm-chart-svg .value-label{fill:var(--rb-text);font-size:11px;font-weight:700;font-family:var(--rb-font-body);}
.adm-chart-svg .bar-mark{cursor:pointer;transition:opacity .12s ease;}
.adm-chart-svg .bar-mark:hover{opacity:.82;}
.adm-chart-svg .pie-mark{cursor:pointer;transition:opacity .12s ease;stroke:var(--rb-surface);stroke-width:2;}
.adm-chart-svg .pie-mark:hover{opacity:.82;}
.adm-chart-svg .line-path{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.adm-chart-svg .line-dot{cursor:pointer;}
.adm-chart-svg .line-dot:hover{r:6;}
.adm-chart-empty{padding:40px 0;text-align:center;color:var(--rb-text-subtle);font-size:.9rem;}

/* ---------- Bảng dữ liệu ---------- */
.adm-table-wrap{overflow-x:auto;}
.adm-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.adm-table th{text-align:left;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--rb-text-subtle);padding:9px 12px;border-bottom:2px solid var(--rb-border);white-space:nowrap;}
.adm-table td{padding:11px 12px;border-bottom:1px solid var(--rb-border);color:var(--rb-text);vertical-align:middle;}
.adm-table td.num,.adm-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
.adm-table tbody tr:hover{background:var(--rb-surface-2);}
.adm-table tbody tr:last-child td{border-bottom:none;}

/* ---------- Badge trạng thái ---------- */
.adm-badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;
  padding:4px 10px;border-radius:999px;white-space:nowrap;}
.adm-badge.is-pending{background:rgba(245,158,11,.14);color:#B45309;}
.adm-badge.is-approved{background:rgba(34,197,94,.14);color:#15803D;}
.adm-badge.is-rejected{background:rgba(220,38,38,.1);color:#B91C1C;}
.adm-badge.is-ok{background:rgba(34,197,94,.14);color:#15803D;}
.adm-badge.is-fail{background:rgba(220,38,38,.1);color:#B91C1C;}
.adm-badge.is-admin{background:var(--rb-primary-soft);color:var(--rb-primary-strong);}

/* ---------- Phân trang ---------- */
.adm-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;flex-wrap:wrap;}
.adm-page-btn{min-width:34px;height:34px;padding:0 8px;border-radius:8px;border:1px solid var(--rb-border-strong);
  background:var(--rb-surface);color:var(--rb-text);font-size:.85rem;font-weight:600;cursor:pointer;}
.adm-page-btn:hover:not(:disabled){border-color:var(--rb-primary);color:var(--rb-primary-strong);}
.adm-page-btn:disabled{opacity:.4;cursor:not-allowed;}
.adm-page-btn.is-active{background:var(--rb-primary-strong);border-color:var(--rb-primary-strong);color:#fff;}
.adm-page-info{font-size:.8rem;color:var(--rb-text-subtle);margin:0 6px;}

/* ---------- Filter bar dùng trong 1 card ---------- */
.adm-filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.adm-filterbar .adm-field{display:flex;flex-direction:column;gap:5px;}
.adm-filterbar label{font-size:.76rem;font-weight:700;color:var(--rb-text-muted);}

/* ---------- Yêu cầu tên miền — thẻ duyệt ---------- */
.adm-req-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.adm-req-tab{padding:8px 16px;border-radius:999px;border:1px solid var(--rb-border-strong);background:var(--rb-surface);
  color:var(--rb-text-muted);font-size:.86rem;font-weight:700;cursor:pointer;}
.adm-req-tab:hover{border-color:var(--rb-primary);color:var(--rb-primary-strong);}
.adm-req-tab.is-active{background:var(--rb-primary-strong);border-color:var(--rb-primary-strong);color:#fff;}
.adm-req-list{display:flex;flex-direction:column;gap:14px;}
.adm-req-card{background:var(--rb-surface);border:1px solid var(--rb-border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--rb-shadow-sm);}
.adm-req-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.adm-req-title{font-size:.94rem;color:var(--rb-text);}
.adm-req-title b{font-family:ui-monospace,'SF Mono',Menlo,monospace;color:var(--rb-primary-strong);}
.adm-req-time{font-size:.78rem;color:var(--rb-text-subtle);flex:none;}
.adm-req-reason{font-size:.86rem;color:var(--rb-text-muted);margin:4px 0 10px;}
.adm-req-note{font-size:.83rem;color:var(--rb-text-muted);margin:6px 0 0;padding:8px 11px;
  background:var(--rb-surface-2);border-radius:8px;}
.adm-req-actions{display:flex;gap:10px;margin-top:10px;}
.adm-req-actions .btn{padding:8px 16px;font-size:.85rem;}
.adm-req-reject-form{display:none;gap:8px;margin-top:10px;}
.adm-req-reject-form.is-open{display:flex;flex-wrap:wrap;}
.adm-req-reject-form textarea{flex:1;min-width:200px;padding:8px 11px;border:1px solid var(--rb-border-strong);
  border-radius:8px;font-size:.85rem;font-family:var(--rb-font-body);background:var(--rb-surface);color:var(--rb-text);resize:vertical;}

/* ---------- Màn "không có quyền" / loading toàn trang ---------- */
.adm-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;}
.adm-gate-box{max-width:380px;}
.adm-gate-ico{width:64px;height:64px;border-radius:18px;background:var(--rb-accent-soft);color:var(--rb-accent-hover);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.adm-gate-ico svg{width:32px;height:32px;}
.adm-gate-box h1{font-size:1.3rem;font-weight:800;margin-bottom:8px;}
.adm-gate-box p{color:var(--rb-text-muted);font-size:.92rem;margin:0 0 20px;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .adm-grid-2{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .adm-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:100;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:var(--rb-shadow-lg);}
  .adm-sidebar.is-open{transform:translateX(0);}
  .adm-mobile-toggle{display:inline-flex;}
  .adm-content{padding:20px 16px 50px;}
  .adm-topbar{padding:14px 16px;}
}
@media (max-width:640px){
  .adm-tiles{grid-template-columns:1fr 1fr;}
  .adm-topbar h1{font-size:1.08rem;}
  .adm-card{padding:16px;}
}
@media (max-width:420px){
  .adm-tiles{grid-template-columns:1fr;}
}