/* =====================================================================
   v4 — "Ivory & Sage": sáng, sang trọng, nịnh mắt. Nạp SAU site.css để ghi đè.
   ===================================================================== */
:root{
  --ink:#27312b; --ink-2:#68726b; --ink-3:#919990;
  --bg:#fdfbf7; --bg-2:#f6f1e8; --sage:#e9f0ea; --sage-2:#dbe7de;
  --line:rgba(39,49,43,.1);
  --green:#3f7d5f; --green-d:#244d3a; --green-l:#7fb99a; --gold:#b8975a; --gold-l:#e6d3a8;
  --red:#d9534f; --amber:#c98a1a;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --serif:"Be Vietnam Pro","Plus Jakarta Sans",sans-serif;
  --font:"Be Vietnam Pro","Inter",-apple-system,sans-serif;
  --sh-1:0 1px 2px rgba(39,49,43,.04),0 6px 18px rgba(39,49,43,.05);
  --sh-2:0 2px 4px rgba(39,49,43,.04),0 16px 40px rgba(39,49,43,.08);
  --sh-3:0 4px 8px rgba(39,49,43,.04),0 30px 70px rgba(39,49,43,.12);
}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--ink);font-family:var(--font);animation:pagein 1s var(--ease) both}
*, *::before, *::after {
  font-family: "Be Vietnam Pro", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
@keyframes pagein{from{opacity:0}to{opacity:1}}
::selection{background:var(--sage-2)}

/* Chữ: serif sang trọng cho tiêu đề */
h1,h2,h3.serif,.h-hero,.h-sec{font-family:var(--serif);font-weight:600;letter-spacing:normal}
.h-hero{font-size:clamp(52px,9vw,118px);line-height:1.05;letter-spacing:normal}
.h-sec{font-size:clamp(40px,5.6vw,68px);line-height:1.15;letter-spacing:normal}
.grad-text{background:linear-gradient(110deg,#2f6b50 0%,#5f9e80 45%,#b8975a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;padding-right:.08em}
.eyebrow,.dark .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before,.eyebrow::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow::after{transform:scaleX(-1)}
.lead,.dark .lead{color:var(--ink-2);font-weight:400;letter-spacing:normal;line-height:1.55}
.facts b,.tier .big,.calc-top b{font-family:var(--serif);font-weight:600;letter-spacing:normal}
.facts b{font-size:clamp(34px,4.4vw,54px)}

/* Nền các khu vực — thay thế phần tối */
.dark{background:var(--bg);color:var(--ink)}
.dark .muted,.muted{color:var(--ink-2)}
.gray{background:var(--bg-2)}
#mission{background:linear-gradient(180deg,var(--sage),#f1f5ef)}
#scanner{background:var(--bg)}
#b2b{background:var(--bg-2)}
#careers{background:var(--sage)}
#club{background:var(--bg)!important}
.sec{padding:128px 0}

/* HERO sáng */
.hero{min-height:clamp(680px,88vh,880px);padding:120px 0 64px;background:radial-gradient(70% 55% at 50% 70%,rgba(127,185,154,.28),transparent 70%),radial-gradient(40% 30% at 85% 15%,rgba(230,211,168,.45),transparent 70%),radial-gradient(40% 30% at 10% 25%,rgba(219,231,222,.8),transparent 70%),var(--bg);color:var(--ink)}
.hero .tag{color:var(--green-d);border:1px solid rgba(184,151,90,.4);background:rgba(255,255,255,.6);backdrop-filter:blur(8px);letter-spacing:.04em}
.hero .lead{color:var(--ink-2)}
.hero-stage::before{content:"";position:absolute;left:50%;bottom:-18px;width:min(760px,92%);height:90px;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(39,49,43,.16),transparent 70%);filter:blur(6px)}
.hero-stage::after{content:"";position:absolute;left:50%;bottom:30px;width:min(520px,70%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(233,240,234,.5) 55%,transparent 70%);z-index:0}
.hero-stage .bottle{filter:drop-shadow(0 28px 36px rgba(39,49,43,.22))}
.orb{border:1px solid rgba(63,125,95,.35);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(127,185,154,.25))}
.facts{border-top:1px solid var(--line)}
.facts div{border-right:1px solid var(--line)}
.facts span{color:var(--ink-2)}
@media(max-width:700px){.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* NAV sáng, kính mờ */
.nav{height:60px;background:rgba(253,251,247,.72);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid transparent;color:var(--ink);transition:background .5s var(--ease),border-color .5s,box-shadow .5s,height .5s var(--ease)}
.nav.scrolled{background:rgba(253,251,247,.9);border-bottom-color:var(--line);box-shadow:0 8px 30px rgba(39,49,43,.06);height:54px}
.nav .in{max-width:1440px;margin:0 auto;padding:0 24px;gap:16px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--green-d);font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em;text-decoration:none;flex-shrink:0}
.brand-logo{width:34px;height:34px;min-width:34px;object-fit:contain;transition:transform .4s var(--ease);filter:drop-shadow(0 2px 6px rgba(36,77,58,.18))}
.brand:hover .brand-logo{transform:scale(1.08) rotate(3deg)}
.brand-text{display:flex;flex-direction:column;line-height:1.15;justify-content:center}
.brand-text .corp{font-size:9.5px;font-weight:700;color:var(--ink-2);letter-spacing:0.8px;text-transform:uppercase}
.brand-text .brand-title{font-size:15px;font-weight:700;color:var(--green-d);letter-spacing:-0.2px}
@media(max-width:1340px){.brand{font-size:15px}}
@media(max-width:1200px){.brand-text .corp{display:none}}
.footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.footer-logo{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(36,77,58,.18))}
.footer-brand .brand-title{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--green-d)}
.menu{display:flex;gap:2px;position:relative;font-size:12.5px;font-weight:500;flex:1;justify-content:center}
.menu a{color:var(--ink-2);opacity:1;padding:7px 10px;border-radius:999px;position:relative;z-index:1;white-space:nowrap;transition:color .35s var(--ease)}
.menu a:hover{color:var(--green-d)}
.menu a.on{color:var(--green-d)}
.menu a.alert{color:#c4524e}
.nav-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{color:var(--ink)}.icon-btn:hover{background:rgba(63,125,95,.1)}
.icon-btn{transition:background .3s var(--ease),transform .4s var(--ease)}.icon-btn:active{transform:scale(.92)}
.badge-n{background:var(--gold);color:#fff;animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(0)}}
.burger{display:none}
@media(max-width:1020px){.burger{display:grid}
  .menu.open{background:rgba(253,251,247,.98);backdrop-filter:blur(20px);animation:dropin .5s var(--ease)}
  .menu.open a{border-bottom:1px solid var(--line);border-radius:0;color:var(--ink)}
  .menu .thumb{display:none}}
@keyframes dropin{from{opacity:0;transform:translateY(-10px)}}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:linear-gradient(90deg,var(--green-l),var(--gold));transform-origin:0 50%;transform:scaleX(0)}

/* Thumb trượt dùng chung (tab, toggle, menu) */
.has-thumb{position:relative}
.thumb{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:999px;transition:transform .55s var(--ease),width .55s var(--ease),height .55s var(--ease),opacity .3s}
.menu .thumb{background:rgba(63,125,95,.12)}
.pill-toggle{background:rgba(39,49,43,.07);padding:3px}
.pill-toggle .thumb{background:#fff;box-shadow:0 2px 8px rgba(39,49,43,.15)}
.pill-toggle button{position:relative;z-index:1;color:var(--ink-2);background:none!important;transition:color .35s var(--ease)}
.pill-toggle button.on{color:var(--green-d)}
.dtabs{position:relative;margin:12px 24px 0;padding:3px;background:var(--bg-2);border-radius:999px;width:max-content}
.dtabs .thumb{background:var(--green-d);box-shadow:0 4px 12px rgba(36,77,58,.3)}
.dtabs button{position:relative;z-index:1;background:none!important;color:var(--ink-2);transition:color .35s var(--ease)}
.dtabs button.on{color:#fff}
.seg{position:relative;background:var(--bg-2)}
.seg .thumb{background:#fff;box-shadow:0 2px 8px rgba(39,49,43,.15);border-radius:9px}
.seg button{position:relative;z-index:1;background:none!important;box-shadow:none!important;transition:color .35s var(--ease)}
.seg button.on{color:var(--green-d)}

/* NÚT — mượt, có ánh quét */
.btn{position:relative;overflow:hidden;isolation:isolate;font-weight:500;letter-spacing:-.005em;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s var(--ease),color .4s,border-color .4s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.15s}
.btn-p{background:linear-gradient(180deg,#4a8a6a,#356d52);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 22px rgba(53,109,82,.28)}
.btn-p:hover{background:linear-gradient(180deg,#52956f,#3b7658);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 30px rgba(53,109,82,.35)}
.btn-p:disabled{opacity:.6;transform:none;cursor:wait}
.btn-w{background:#fff;color:var(--green-d);box-shadow:var(--sh-1);border:1px solid var(--line)}
.btn-w:hover{background:#fff;box-shadow:var(--sh-2)}
.btn-g{background:rgba(255,255,255,.7);color:var(--green-d);border:1px solid rgba(184,151,90,.45);backdrop-filter:blur(8px)}
.btn-g:hover{background:#fff;border-color:var(--gold);box-shadow:0 10px 26px rgba(184,151,90,.2)}
.btn-s{background:rgba(39,49,43,.06);color:var(--ink)}.btn-s:hover{background:rgba(63,125,95,.14);color:var(--green-d)}
.link{color:var(--green)}
.link::after{content:"›";transition:transform .4s var(--ease)}.link:hover::after{transform:translateX(4px)}
:focus-visible{outline:2px solid var(--green-l);outline-offset:3px}

/* Thẻ sản phẩm */
.tile{box-shadow:var(--sh-1);border:1px solid rgba(255,255,255,.7);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.tile:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.tile.l{background:linear-gradient(180deg,#fff,#faf6ee);color:var(--ink)}
.tile.d{background:linear-gradient(180deg,#eef4ef,#dfeae2);color:var(--ink)}
.tile.d p,.tile p{color:var(--ink-2)}
.tile .cat,.tile.d .cat{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:11px}
.tile h3{font-family:var(--serif);font-weight:600;font-size:clamp(32px,3.4vw,44px);letter-spacing:-.02em}
.tile .glow{background:radial-gradient(60% 70% at 50% 100%,var(--glow,rgba(184,151,90,.22)),transparent 70%)}
.tile .art{transition:transform 1s var(--ease)}
.tile:hover .art{transform:translateY(-12px) scale(1.04)}
.tile .badge-b{background:linear-gradient(120deg,#d8bb85,#b8975a);color:#fff}

/* Công nghệ */
.skin{box-shadow:var(--sh-3);border:1px solid var(--line)}
.layer-list button{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.layer-list button:hover{transform:translateX(6px)}
.layer-list button.on{border-color:var(--green-l);box-shadow:0 12px 34px rgba(63,125,95,.16);transform:translateX(10px)}

/* Máy soi INCI — sáng */
.scan{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3)}
.chip{border:1px solid var(--line);color:var(--ink-2);background:#fff;transition:all .45s var(--ease)}
.chip:hover{border-color:var(--green-l);color:var(--green-d);transform:translateY(-2px);box-shadow:var(--sh-1)}
.chip.on{background:var(--green-d);color:#fff;border-color:var(--green-d)}
.chip.bad:hover{color:#b3322e;border-color:#e8a19e}
.chip.bad.on{background:#c4524e;color:#fff;border-color:#c4524e}
textarea,.field{background:var(--bg);border:1px solid var(--line);color:var(--ink);transition:border-color .35s,box-shadow .35s,background .35s}
textarea:focus,.field:focus{border-color:var(--green-l);box-shadow:0 0 0 4px rgba(127,185,154,.2);background:#fff}
.laser{background:linear-gradient(90deg,transparent,var(--green-l),var(--gold),var(--green-l),transparent);box-shadow:0 0 28px 8px rgba(127,185,154,.45)}
.res-head{border-color:var(--line)}
.ring circle:first-child{stroke:rgba(39,49,43,.08)}
.ring .v span{color:var(--ink-3)}
.ring .v b{font-family:var(--serif);font-weight:600;font-size:44px}
.verdict{font-family:var(--serif);font-weight:600;font-size:28px;letter-spacing:-.01em}
.stats div{background:var(--bg-2)}.stats span{color:var(--ink-2)}
.ing div{background:var(--bg);border-left-color:var(--green-l);transition:transform .4s var(--ease)}
.ing div:hover{transform:translateX(4px)}
.ing div.w{border-color:var(--amber)}.ing div.x{border-color:var(--red);background:#fdeeee}
.ing small{color:var(--ink-2)}
.tagx{background:#e4f1e9;color:#2f6b50}.w .tagx{background:#fbefd3;color:#8a5b00}.x .tagx{background:var(--red);color:#fff}
.warnbox{background:#fdeeee;border:1px solid #f0bcba;color:#8f2a27}

/* Thành viên */
.card{border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.card:hover{box-shadow:var(--sh-2)}
.card h3{font-family:var(--serif);font-size:30px;font-weight:600}
.card.track{background:linear-gradient(120deg,var(--sage),var(--sage-2));display:flex;gap:32px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.day{background:var(--bg-2);transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.day:hover{transform:translateY(-4px)}
.day.done{background:var(--sage);color:var(--green-d);border-color:var(--sage-2)}
.day.now{border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,151,90,.18)}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(184,151,90,.06)}}
.gems{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.quest{transition:transform .4s var(--ease)}.quest:hover{transform:translateX(4px)}
.opt{transition:border-color .35s,transform .4s var(--ease)}.opt:hover{transform:translateY(-1px);border-color:var(--green-l)}
.opt i{background:var(--sage)}

/* Đại lý */
.tier{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .5s}
.tier:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.tier.on{border-color:var(--gold);background:linear-gradient(180deg,#fffaf0,#fff);box-shadow:0 20px 50px rgba(184,151,90,.2)}
.tier ul{color:var(--ink-2)}.tier li::before{color:var(--green)}
.calc{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-3)}
.calc-top .muted{color:var(--ink-2)}
input[type=range]{background:linear-gradient(90deg,var(--green) var(--p,10%),var(--sage-2) var(--p,10%));height:6px}
input[type=range]::-webkit-slider-thumb{background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(39,49,43,.28);transition:transform .3s var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.calc-out div{background:var(--bg-2)}.calc-out span{color:var(--ink-2)}
.calc-out .hi{background:var(--sage)}.calc-out .hi b{color:var(--green-d)}

/* Kiến thức, diễn đàn, pháp lý */
.dict .it,.topic,.post,.agency{box-shadow:var(--sh-1);border:1px solid var(--line);transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .4s}
.dict .it:hover,.topic:hover,.post:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--green-l)}
.agency{background:#fff}
.topic .ic{background:linear-gradient(145deg,#7fb99a,#2f6b50);box-shadow:0 8px 20px rgba(47,107,80,.25)}
.topic h4,.post h4,.agency h4{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15}
.av{background:linear-gradient(145deg,#7fb99a,#2f6b50)}
.search input{box-shadow:var(--sh-1)}
.ewg{background:#e4f1e9;color:#2f6b50}.ewg.w{background:#fbefd3;color:#8a5b00}.ewg.x{background:#fbe0df;color:#a8312d}
.alerts{border-color:#f0cfcd;box-shadow:var(--sh-1)}.alerts-h{background:#fdf1f0;color:#a8312d}
.al{border-top-color:#f6e1e0}

/* Tuyển dụng */
.job{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s}
.job:hover{transform:translateX(8px);box-shadow:var(--sh-2);border-color:var(--green-l)}
.job span{color:var(--ink-2)}.job b{font-family:var(--serif);font-size:24px;font-weight:600}

/* FAQ mượt */
.faq summary{transition:color .3s}.faq summary:hover{color:var(--green)}
.faq summary::after{color:var(--gold)}
.faq details>p{animation:faqin .6s var(--ease)}
@keyframes faqin{from{opacity:0;transform:translateY(-8px)}}

/* Footer sáng */
footer{background:var(--sage);color:var(--ink-2)}
footer .brand{color:var(--green-d)!important}
.fgrid{border-bottom-color:var(--sage-2)}.fgrid h6{color:var(--ink)}.fgrid a{transition:color .3s,transform .4s var(--ease)}.fgrid a:hover{color:var(--green-d);transform:translateX(3px)}

/* Drawer / modal / toast */
.scrim{background:rgba(39,49,43,.28);backdrop-filter:blur(8px)}
.drawer{background:var(--bg);transition:transform .7s var(--ease);box-shadow:-30px 0 90px rgba(39,49,43,.18)}
.dh h3{font-family:var(--serif);font-size:28px;font-weight:600}
.dh .x{transition:transform .5s var(--ease),background .3s}.dh .x:hover{transform:rotate(90deg);background:var(--sage)}
.ci{animation:faqin .6s var(--ease) both}
.modal{background:var(--bg);box-shadow:var(--sh-3);transition:transform .7s var(--ease),opacity .45s var(--ease)}
.modal h3{font-family:var(--serif);font-weight:600;font-size:34px}
.toast{background:rgba(39,49,43,.94);animation:toastin .6s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translateY(16px) scale(.96)}}
.step.d i{background:var(--green)}.step.d::before{background:var(--green)}

/* Hiệu ứng xuất hiện: mờ → rõ, trượt nhẹ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{filter:none}.btn::after{display:none}}

/* Bảo vệ dữ liệu cá nhân & Opt-in Consent (NĐ 13/2023/NĐ-CP) */
.consent-label{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-2);line-height:1.45;cursor:pointer;user-select:none;margin:10px 0}
.consent-label input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px;border:1.5px solid var(--line);border-radius:5px;background:#fff;cursor:pointer;margin-top:2px;display:grid;place-content:center;transition:all .25s var(--ease)}
.consent-label input[type=checkbox]:checked{background:var(--green);border-color:var(--green)}
.consent-label input[type=checkbox]:checked::before{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.consent-label a,.link-privacy{color:var(--green);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.privacy-doc{max-height:65vh;overflow-y:auto;padding-right:8px;font-size:14px;line-height:1.65;color:var(--ink)}
.privacy-doc h4{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--green-d);margin:20px 0 8px}
.privacy-badge{display:inline-block;padding:4px 10px;background:var(--sage);color:var(--green-d);font-size:11px;font-weight:600;border-radius:999px;letter-spacing:.04em;margin-bottom:16px}
.modal.wide-m{max-width:760px;width:min(760px,94vw)}

/* =====================================================================
   3D UI x Neumorphism Authentication (Khóa 3D, PIN 6 số, Soft Clay)
   ===================================================================== */
.modal.neu-auth {
  max-width: 720px !important;
  width: min(720px, 94vw) !important;
  max-height: min(480px, calc(100vh - 30px)) !important;
  padding: 0 !important;
  border-radius: 20px !important;
  overflow-y: auto !important;
  background: #ebf1f6 !important;
  box-shadow: 16px 16px 40px #cad5df, -16px -16px 40px #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
@media (max-height: 700px) {
  .modal.neu-auth {
    top: 16px !important;
    transform: translateX(-50%) !important;
    max-height: calc(100vh - 32px) !important;
  }
}
.neu-card {
  display: grid;
  grid-template-columns: 240px 1fr !important;
  min-height: auto !important;
  position: relative;
}
@media (max-width: 720px) {
  .neu-card {
    grid-template-columns: 1fr !important;
  }
  .neu-well {
    display: none !important;
  }
}

/* Cột trái: Giếng dập chìm (Recessed Well) & Khóa 3D */
.neu-well {
  margin: 10px !important;
  background: #ebf1f6;
  border-radius: 16px;
  box-shadow: inset 4px 4px 8px #c5d2dd, inset -4px -4px 8px #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px 10px !important;
  overflow: hidden;
  height: 310px !important;
}
.neu-concentric {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.neu-ring-1, .neu-ring-2, .neu-ring-3 {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(165, 180, 200, 0.35);
}
.neu-ring-1 { width: 90px; height: 90px; }
.neu-ring-2 { width: 140px; height: 140px; }
.neu-ring-3 { width: 190px; height: 190px; }

/* Ổ khóa 3D */
.neu-lock-box {
  position: relative;
  width: 72px;
  height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.7s var(--ease);
}
.neu-shackle {
  width: 44px;
  height: 40px;
  border: 8px solid #fff;
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  box-shadow: 2px -2px 6px rgba(160, 175, 195, 0.4), -2px -2px 6px #ffffff;
  position: relative;
  z-index: 1;
  margin-bottom: -6px;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.neu-body {
  width: 72px;
  height: 58px;
  background: linear-gradient(145deg, #ffffff, #e2ebf2);
  border-radius: 14px;
  box-shadow: 4px 4px 10px #c1cedb, -4px -4px 10px #ffffff;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s var(--ease);
}
.neu-led {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px 2px #38bdf8;
  animation: pulse-led 2s infinite;
}
@keyframes pulse-led { 0%, 100% { opacity: 1; box-shadow: 0 0 8px 2px #38bdf8; } 50% { opacity: 0.5; box-shadow: 0 0 3px #38bdf8; } }
.neu-keyhole {
  width: 10px;
  height: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.neu-keyhole::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a3b3c3;
  box-shadow: inset 2px 2px 4px #768696, inset -1px -1px 3px #ffffff;
}
.neu-keyhole::after {
  content: "";
  width: 6px;
  height: 10px;
  background: #a3b3c3;
  margin-top: -2px;
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  box-shadow: inset 2px 2px 4px #768696;
}

/* Đĩa tích xanh 3D (Success Medallion) */
.neu-disc-check {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ebf1f6;
  box-shadow: inset 4px 4px 8px #c2cfdc, inset -4px -4px 8px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}
.neu-disc-check svg {
  width: 36px;
  height: 36px;
  color: #10b981;
  filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.35));
}

/* Trạng thái đã mở khóa thành công */
.neu-well.verified .neu-lock-box { transform: scale(0.4); opacity: 0; }
.neu-well.verified .neu-shackle { transform: translateY(-16px) rotate(-14deg); }
.neu-well.verified .neu-disc-check { opacity: 1; transform: scale(1); }
.neu-well.verified .neu-ring-1 { animation: ripple 2s infinite; border-color: #10b981; }
@keyframes ripple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* Chân đế giếng */
.neu-well-foot {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #8a99a8;
  text-transform: uppercase;
  padding-top: 6px;
}
.neu-sys-dot { display: inline-flex; align-items: center; gap: 4px; color: #10b981; }
.neu-sys-dot i { width: 5px; height: 5px; border-radius: 50%; background: #10b981; box-shadow: 0 0 5px #10b981; }

/* Cột phải: Form xác thực / Form đăng ký */
.neu-form-side {
  padding: 14px 20px 14px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-width: 0;
  box-sizing: border-box;
}
.neu-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ebf1f6;
  box-shadow: 2px 2px 5px #c8d4df, -2px -2px 5px #ffffff;
  border: none;
  color: #7e8e9f;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: all 0.25s var(--ease);
}
.neu-close-btn:hover { color: #1e293b; transform: scale(1.05); }
.neu-badge { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #4f6b86; margin-bottom: 2px; display: block; }
.neu-title { font-size: 19px !important; font-weight: 700; color: #1e293b; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 2px !important; font-family: var(--serif); }
.neu-sub { font-size: 11.5px !important; color: #64748b; line-height: 1.35; margin-bottom: 8px !important; }

/* 6 ô nhập mã PIN Neumorphic */
.neu-pin-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px; margin-bottom: 12px; width: 100%; }
.neu-pin-box { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; height: 38px; background: #ebf1f6; border-radius: 8px; box-shadow: inset 2.5px 2.5px 5px #c4d0dc, inset -2.5px -2.5px 5px #ffffff; border: 1.5px solid transparent; font-family: Inter, sans-serif; font-size: 18px; font-weight: 700; color: #1e293b; text-align: center; outline: none; transition: all 0.25s var(--ease); padding: 0; }
.neu-pin-box:focus { border-color: #38bdf8; box-shadow: inset 2px 2px 4px #c4d0dc, inset -2px -2px 4px #ffffff, 0 0 0 3px rgba(56, 189, 248, 0.25); }

/* Nút bấm dập nổi Neumorphic (Verify Access) */
.neu-btn { width: 100%; height: 38px; border-radius: 10px; background: #ebf1f6; border: none; box-shadow: 3px 3px 8px #c2cfdc, -3px -3px 8px #ffffff; color: #2f557a; font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.3s var(--ease); }
.neu-btn:hover { color: #1e40af; transform: translateY(-1px); box-shadow: 5px 5px 12px #bbc8d6, -5px -5px 12px #ffffff; }
.neu-btn:active { box-shadow: inset 3px 3px 6px #c2cfdc, inset -3px -3px 6px #ffffff; transform: translateY(1px); }
.neu-btn.verified { background: #ebf1f6; box-shadow: inset 3px 3px 6px #c2cfdc, inset -3px -3px 6px #ffffff; color: #10b981; font-weight: 700; letter-spacing: 1px; pointer-events: none; }

/* Footer xác thực */
.neu-prot-text { font-size: 10.5px; color: #8a99a8; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.neu-action-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(165, 180, 200, 0.25); font-size: 11.5px; }
.neu-countdown { color: #64748b; font-family: Inter, monospace; font-size: 11px; }
.neu-resend { color: #2563eb; font-weight: 700; text-decoration: none; letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer; background: none; border: none; font-size: 11px; transition: opacity 0.2s; }
.neu-resend:hover { opacity: 0.8; text-decoration: underline; }

/* Chuyển đổi giữa Đăng ký và Xác thực PIN 3D */
.neu-tab-switch { display: flex; background: #e2ecf3; border-radius: 999px; padding: 2px; margin-bottom: 8px; box-shadow: inset 2px 2px 5px #c7d4e0, inset -2px -2px 5px #ffffff; }
.neu-tab-switch button { flex: 1; border: none; background: none; padding: 4px 8px; font-size: 11px; font-weight: 600; color: #64748b; border-radius: 999px; cursor: pointer; transition: all 0.3s var(--ease); }
.neu-tab-switch button.on { background: #ebf1f6; color: #1e293b; box-shadow: 2px 2px 5px #c7d4e0, -2px -2px 5px #ffffff; }
.neu-input { width: 100%; height: 35px; background: #ebf1f6; border-radius: 9px; box-shadow: inset 2px 2px 4px #c4d0dc, inset -2px -2px 4px #ffffff; border: 1.5px solid transparent; padding: 0 10px; font-size: 12.5px; color: #1e293b; outline: none; margin-bottom: 6px; transition: all 0.25s var(--ease); }
.neu-input:focus { border-color: #38bdf8; box-shadow: inset 2px 2px 4px #c4d0dc, inset -2px -2px 4px #ffffff, 0 0 0 3px rgba(56, 189, 248, 0.25); }

/* =====================================================================
   GLASSY DESIGN SYSTEM FOR WEBSITE (Liquid Glass / VisionOS Frosted Glass)
   ===================================================================== */
.nav-dash-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(11, 59, 44, 0.08);
  border: 1px solid rgba(11, 59, 44, 0.2);
  color: var(--green-d);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: all 0.25s var(--ease);
  backdrop-filter: blur(12px);
}
.nav-dash-link:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}
.nav-dash-link .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

/* Glassy Navbar */
.nav {
  background: rgba(255, 255, 255, 0.76) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 30px rgba(11, 59, 44, 0.04) !important;
}
.nav .in {
  max-width: 1360px !important;
  padding: 0 16px !important;
}
@media (min-width: 1080px) {
  #burger {
    display: none !important;
  }
}
.menu { gap: 12px !important; }
.menu a { font-size: 12.5px !important; padding: 4px 6px !important; }
.nav-dash-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px !important;
  border-radius: 999px;
  background: rgba(11, 59, 44, 0.08);
  border: 1px solid rgba(11, 59, 44, 0.2);
  color: var(--green-d);
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap !important;
  transition: all 0.25s var(--ease);
  backdrop-filter: blur(12px);
}
.h-hero {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Ambient Mesh Background Spheres on Hero */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -50px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0) 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0) 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* Glassy Product Cards (Thẻ Kính Mờ Thấu Quang Siêu Mịn) */
.p-card {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 10px 32px rgba(11, 59, 44, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  border-radius: 24px !important;
  transition: all 0.35s var(--ease) !important;
}
.p-card:hover {
  transform: translateY(-6px) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(42, 138, 92, 0.45) !important;
  box-shadow: 0 20px 48px rgba(11, 59, 44, 0.1), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
}

/* Glassy Feature Cards & Knowledge Cards */
.f-card, .k-card, .q-item, .alert-box, .banner {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 8px 28px rgba(11, 59, 44, 0.035), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* Glassy Drawer (Giỏ hàng & Đơn hàng) */
.drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: -10px 0 50px rgba(11, 59, 44, 0.12) !important;
  z-index: 80 !important;
}
.dh {
  flex: 0 0 auto !important;
  padding: 12px 18px !important;
}
.dtabs {
  flex: 0 0 auto !important;
  padding: 6px 18px 0 !important;
}
.db {
  flex: 1 1 auto !important;
  min-height: 60px !important;
  overflow-y: auto !important;
  padding: 8px 18px !important;
}
.df {
  flex: 0 0 auto !important;
  max-height: 52vh !important;
  overflow-y: auto !important;
  padding: 10px 18px 16px !important;
  border-top: 1px solid rgba(36, 77, 58, 0.12) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Glassy Scrim */
.scrim.on {
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  background: rgba(11, 25, 20, 0.42) !important;
}


/* -------------------------------------------------------------
   NAVIGATION DROPDOWN "THÊM ▾" & USER PROFILE MODAL
   ------------------------------------------------------------- */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  background: none;
}
.nav-drop-trigger:hover, .nav-dropdown:hover .nav-drop-trigger {
  color: var(--green-d);
  background: var(--sage);
  border-color: rgba(36, 77, 58, 0.15);
}
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(11, 59, 44, 0.12), inset 0 1px 1px #fff;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
  transition: all 0.25s var(--ease);
  z-index: 150;
}
.nav-dropdown:hover .nav-drop-menu,
.nav-dropdown:focus-within .nav-drop-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.nav-drop-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.nav-drop-menu a:hover {
  background: var(--sage);
  color: var(--green-d);
  transform: translateX(3px);
}
.nav-drop-menu a svg {
  color: var(--green);
}
.nav-drop-menu a.alert-link {
  color: #b91c1c;
}
.nav-drop-menu a.alert-link svg {
  color: #b91c1c;
}
.nav-drop-menu a.alert-link:hover {
  background: #fee2e2;
}

/* User Profile Glassy Modal */
.modal.user-profile {
  max-width: 660px !important;
  width: min(660px, 94vw) !important;
  border-radius: 28px !important;
  padding: 32px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 24px 60px rgba(11, 59, 44, 0.16) !important;
}
.profile-tabs {
  display: flex;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 4px;
  margin: 18px 0 24px;
}
.profile-tabs button {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.profile-tabs button.on {
  background: #fff;
  color: var(--green-d);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.profile-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .profile-grid-2 { grid-template-columns: 1fr; }
}
.profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.profile-actions .btn {
  flex: 1;
}


/* ==================== FREE SHIPPING BANNER STRIP ==================== */
.sec-shipping-strip {
  padding: 10px 0 30px;
}
.glass-shipping-card {
  display: grid;
  grid-template-columns: 460px 1fr;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px -10px rgba(36, 77, 58, 0.12), 0 0 0 1px rgba(201, 169, 110, 0.25);
  align-items: center;
}
.shipping-banner-img-box {
  width: 100%;
  height: 100%;
  min-height: 220px;
  background: #fdfcf9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shipping-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-shipping-card:hover .shipping-banner-img {
  transform: scale(1.03);
}
.shipping-banner-info {
  padding: 28px 36px;
}
.ship-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  color: #065f46;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.live-dot-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-green 1.8s infinite;
}
@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.ship-card-title {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--green-d);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.ship-card-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 16px;
}
.ship-card-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 12px;
  font-size: 12.5px;
}
.meta-phone b {
  color: #059669;
}
.ship-card-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ==================== REAL PRODUCT THUMB & FLAGSHIP STYLING ==================== */
.tile.flagship-card {
  border-color: rgba(201, 169, 110, 0.45) !important;
  box-shadow: 0 16px 36px -8px rgba(201, 169, 110, 0.22), 0 0 0 1px rgba(201, 169, 110, 0.3) !important;
  position: relative;
}
.badge-flagship {
  position: absolute;
  top: 14px;
  right: 14px;
  background: linear-gradient(135deg, #d4af37, #996515);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(153, 101, 21, 0.3);
  z-index: 3;
}
.real-product-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.tile:hover .real-product-thumb {
  transform: scale(1.05);
}

/* Hero Center Real Bottle */
.hero-main-real {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.hero-bottle-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-real-bottle-img {
  width: 170px;
  height: 280px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 20px 50px -10px rgba(212, 175, 55, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.8);
  transition: transform 0.5s ease;
  animation: float-bottle 4s ease-in-out infinite;
}
@keyframes float-bottle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-badge-flagship {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #855d14;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.4);
}

/* ==================== PRODUCT DETAIL GALLERY ==================== */
.pd-media-box {
  background: #fbfbf9;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.pd-real-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pd-real-img {
  width: 100%;
  max-width: 260px;
  height: 280px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.pd-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.pd-tbtn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 2px solid transparent;
  padding: 2px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
}
.pd-tbtn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.pd-tbtn.on {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}
.pd-cert-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
}

/* ==================== CTV & B2B MODULE STYLING ==================== */
.ctv-showcase-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  padding: 28px;
  margin-top: 28px;
  box-shadow: 0 20px 50px -10px rgba(36, 77, 58, 0.12), 0 0 0 1px rgba(201, 169, 110, 0.25);
}
.ctv-tabs-header {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 16px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.ctv-tab-btn {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.ctv-tab-btn:hover {
  background: rgba(16, 185, 129, 0.08);
  color: #065f46;
}
.ctv-tab-btn.on {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}
#ctvBannerTitle {
  color: var(--green-d) !important;
  font-family: var(--serif);
  font-size: 22px !important;
}
#ctvBannerDesc {
  color: var(--ink-2) !important;
}
.ctv-contact-box {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 14px 18px;
  border-radius: 14px;
}
.ctv-reg-box {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 16px 40px -10px rgba(36, 77, 58, 0.08);
}
.ctv-reg-box h3 {
  color: var(--green-d) !important;
  font-family: var(--serif);
}
.ctv-reg-box label {
  color: var(--ink-2) !important;
  font-weight: 600;
}
.ctv-reg-box .field {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
.ctv-banner-viewer {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 28px;
  align-items: center;
}
.ctv-img-wrapper {
  position: relative;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.ctv-banner-main-img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
}
.btn-zoom-float {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-zoom-float:hover {
  background: #10b981;
  border-color: #10b981;
}
.ctv-reg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ctv-reg-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
}
@media (max-width: 900px) {
  .glass-shipping-card { grid-template-columns: 1fr; }
  .ctv-banner-viewer { grid-template-columns: 1fr; }
  .ctv-reg-grid { grid-template-columns: 1fr; }
}


/* ==================== HERO REAL PHOTOGRAPHY BOTTLES ==================== */
.hero-side-real {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}
.hero-side-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.4s ease;
}
.hero-side-frame:hover {
  transform: translateY(-8px) scale(1.05);
}
.hero-side-img {
  width: 110px;
  height: 180px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.hero-side-label {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--green-d);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* ==================== AR HUD SHOWCASE IN SCANNER ==================== */
.ar-hud-glass-card {
  display: grid;
  grid-template-columns: 360px 1fr;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 16px 40px rgba(36, 77, 58, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8);
  align-items: center;
}
.ar-hud-img-wrap {
  position: relative;
  height: 100%;
  min-height: 260px;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.ar-hud-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ar-hud-img-wrap:hover .ar-hud-main-img {
  transform: scale(1.06);
}
.ar-hud-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.ar-hud-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ar-hud-content {
  padding: 24px 32px;
  text-align: left;
}
.ar-hud-title {
  font-size: 24px;
  color: var(--green-d, #1e3d2f);
  margin: 10px 0 8px;
  font-weight: 800;
  line-height: 1.3;
}
.ar-hud-desc {
  font-size: 14px;
  color: var(--ink-2, #4a5568);
  line-height: 1.6;
  margin: 0 0 16px;
}
.ar-hud-pills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2, #334155);
}
.ar-hud-pills-grid div {
  background: rgba(36, 77, 58, 0.05);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(36, 77, 58, 0.1);
}
.ar-hud-pills-grid span {
  color: #0f766e;
  font-weight: 700;
}

/* ==================== REAL PRODUCT LOOKBOOK GALLERY ==================== */
.real-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.real-gallery-item {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 35px -8px rgba(36, 77, 58, 0.1), 0 0 0 1px rgba(201, 169, 110, 0.15);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.real-gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px -10px rgba(36, 77, 58, 0.18), 0 0 0 1px rgba(201, 169, 110, 0.35);
}
.gallery-thumb-box {
  position: relative;
  width: 100%;
  height: 220px;
  background: #fdfcf9;
  overflow: hidden;
}
.gallery-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.real-gallery-item:hover .gallery-thumb-box img {
  transform: scale(1.08);
}
.gallery-zoom-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.real-gallery-item:hover .gallery-zoom-icon {
  opacity: 1;
}
.gallery-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gallery-info b {
  font-size: 13.5px;
  color: var(--green-d);
  line-height: 1.35;
}
.gallery-info span {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .real-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .ar-hud-glass-card { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .real-gallery-grid { grid-template-columns: 1fr; }
}

/* ==================== VOUCHER ENGINE & CART GLASSY STYLES ==================== */
.cart-voucher-container {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.voucher-applied-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  padding: 6px 10px;
  margin-top: 6px;
}
.vc-badge-code {
  background: var(--green-d);
  color: #fff;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  font-size: 11px;
  font-weight: 800;
}
.vc-remove-btn {
  background: none;
  border: none;
  color: #e11d48;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}
.vc-remove-btn:hover {
  background: rgba(225, 29, 72, 0.1);
}
.cart-price-summary {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ci .th img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* COMMUNITY & SCIENCE PLATFORM ENHANCEMENTS */
/* =========================================================================
   1. SỬA LỖI TÁCH CHỮ TIẾNG VIỆT & CHUẨN HÓA TYPOGRAPHY
   ========================================================================= */
*, body, h1, h2, h3, h4, h5, h6, p, span, b, a, button, input, textarea {
  letter-spacing: normal !important;
  font-feature-settings: "liga" 1, "calt" 1;
}
body {
  font-family: 'Be Vietnam Pro', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

/* 2. HEADER & NAVIGATION ENHANCEMENTS */
.nav .in {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.menu {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.menu a.menu-pri {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 6px 8px !important;
  color: var(--ink-2) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.menu a.menu-pri:hover {
  color: var(--green) !important;
}
.nav-r {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.btn-scanner-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.btn-scanner-cta:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* 3. HERO SECTION ENHANCEMENTS */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 56px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(184, 151, 90, 0.25);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
.hero-stat-item b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--green-d);
  line-height: 1.1;
}
.hero-stat-item span {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 4px;
  display: block;
}
.col-gold { color: #b8975a !important; }
.col-red { color: #ef4444 !important; }
.col-green { color: #10b981 !important; }
.col-amber { color: #f59e0b !important; }

/* 4. 8 ĐẠI CÔNG NGHỆ CHẾ XUẤT & BÀO CHẾ */
.tech-tabs-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 40px;
  flex-wrap: wrap;
}
.tech-tab-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(184, 151, 90, 0.3);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tech-tab-btn.active, .tech-tab-btn:hover {
  background: var(--green-d) !important;
  color: #fff !important;
  border-color: var(--green-d) !important;
  box-shadow: 0 4px 16px rgba(11, 59, 44, 0.25);
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
  margin-top: 24px;
}
.tech-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(11, 59, 44, 0.1);
  border-color: rgba(16, 185, 129, 0.4);
}
.tech-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.tech-era-badge {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(184, 151, 90, 0.12);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(184, 151, 90, 0.25);
}
.tech-cat-pill {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 999px;
}
.tech-diagram-wrap {
  margin: 12px 0 20px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #092019 0%, #133a2e 100%);
  padding: 20px 16px;
  color: #fff;
  border: 1px solid rgba(52, 199, 123, 0.2);
}
.diagram-canvas {
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
.diag-steam, .diag-co2, .diag-ferment, .diag-lipo, .diag-stem, .diag-peptide, .diag-nanoemul, .diag-freeze {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diag-steam i, .diag-co2 i, .diag-stem i {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 8px;
  font-style: normal;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.steam-flow-arrow {
  color: #34d399;
  font-size: 12px;
  font-weight: 600;
}
.lipo-shell {
  background: rgba(16, 185, 129, 0.18);
  border: 2px dashed #10b981;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lipo-core {
  background: #10b981;
  color: #062b1b;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-block;
}
.lipo-bilayer {
  font-size: 11px;
  opacity: 0.85;
}
.lipo-target {
  font-size: 11px;
  color: #fbbf24;
  margin-top: 4px;
}
.tech-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--green-d);
  line-height: 1.25;
  margin-bottom: 4px;
}
.tech-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
}
.tech-sec-label, .tech-app-label {
  font-size: 13px;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}
.tech-principle {
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
  margin-bottom: 16px;
}
.tech-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.tech-pro-box, .tech-con-box {
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}
.tech-pro-box { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.2); }
.tech-con-box { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.2); }
.tech-pro-box ul, .tech-con-box ul {
  padding-left: 16px;
  margin: 6px 0 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
}
.tech-app-box {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: auto;
}
.tech-app-text {
  font-size: 12.5px;
  color: #334155;
  margin: 0;
  line-height: 1.45;
}

/* 5. MEDICAL SCANNER RESULT STYLING */
.scan-presets-bar {
  margin-bottom: 16px;
}
.scan-presets-bar .chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.chip-safe { border-color: rgba(16, 185, 129, 0.4) !important; color: #10b981 !important; }
.chip-warn { border-color: rgba(245, 158, 11, 0.4) !important; color: #f59e0b !important; }
.chip-bad { border-color: rgba(239, 68, 68, 0.4) !important; color: #ef4444 !important; }
.chip-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  margin-right: 6px;
}
/* ==========================================================================
   SCAN SUMMARY BANNER - HIGH CONTRAST & WCAG AAA COMPLIANT (EXECUTIVE CARDS)
   ========================================================================== */
.scan-summary-banner {
  border-radius: 20px !important;
  padding: 26px 28px !important;
  margin-top: 28px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* SẢN PHẨM CHÍNH HÃNG CÔNG TY: GRADE COMPANY GOLD */
.scan-summary-banner.grade-company-gold {
  background: linear-gradient(135deg, #052618 0%, #0c1f17 50%, #1f1a07 100%) !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 158, 11, 0.35) inset !important;
}

.scan-summary-banner.grade-company-gold .summary-verdict-title {
  color: #34d399 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.scan-summary-banner.grade-company-gold .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.scan-summary-banner.grade-company-gold .summary-narrative {
  color: #f1f5f9 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* SẢN PHẨM AN TOÀN SINH HỌC THƯỜNG: GRADE SAFE */
.scan-summary-banner.grade-safe {
  background: linear-gradient(135deg, #052618 0%, #071f16 100%) !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 18px 45px rgba(6, 78, 59, 0.35) !important;
}

.scan-summary-banner.grade-safe .summary-verdict-title {
  color: #34d399 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.scan-summary-banner.grade-safe .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.scan-summary-banner.grade-safe .summary-narrative {
  color: #f1f5f9 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
}

/* SẢN PHẨM CÓ THÀNH PHẦN CẦN LƯU Ý: GRADE RESTRICTED */
.scan-summary-banner.grade-restricted {
  background: linear-gradient(135deg, #241707 0%, #160f04 100%) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 18px 45px rgba(180, 83, 9, 0.35) !important;
}

.scan-summary-banner.grade-restricted .summary-verdict-title {
  color: #fbbf24 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.scan-summary-banner.grade-restricted .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.scan-summary-banner.grade-restricted .summary-narrative {
  color: #fef3c7 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
}

/* SẢN PHẨM CHỨA CHẤT CẤM: GRADE BANNED */
.scan-summary-banner.grade-banned {
  background: linear-gradient(135deg, #2e0909 0%, #1a0505 100%) !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 18px 45px rgba(220, 38, 38, 0.45) !important;
}

.scan-summary-banner.grade-banned .summary-verdict-title {
  color: #f87171 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.scan-summary-banner.grade-banned .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.scan-summary-banner.grade-banned .summary-narrative {
  color: #fee2e2 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
}

.summary-top {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}

.summary-icon {
  font-size: 38px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ĐỒNG BỘ CÁC THẺ METRIC-BOX ĐẠT ĐỘ TƯƠNG PHẢN TỐI ĐA */
.summary-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.metric-box {
  background: #020617 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.metric-box b {
  display: block !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

.metric-box span {
  font-size: 12px !important;
  color: #cbd5e1 !important;
  display: block !important;
  margin-top: 5px !important;
  font-weight: 600 !important;
}

.metric-box.safe {
  border-color: rgba(16, 185, 129, 0.45) !important;
}
.metric-box.safe b {
  color: #34d399 !important;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.4) !important;
}

.metric-box.warn {
  border-color: rgba(245, 158, 11, 0.45) !important;
}
.metric-box.warn b {
  color: #fbbf24 !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.4) !important;
}

.metric-box.bad {
  border-color: rgba(239, 68, 68, 0.5) !important;
}
.metric-box.bad b {
  color: #f87171 !important;
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.4) !important;
}

.metric-box.ewg {
  border-color: rgba(96, 165, 250, 0.45) !important;
}
.metric-box.ewg b {
  color: #60a5fa !important;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.4) !important;
}
.auto-enrichment-alert {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fef3c7;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.enrich-star { font-size: 20px; flex-shrink: 0; }
.scan-ingredients-list {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.list-heading-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
  margin-bottom: 8px;
}
.list-heading-bar h4 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.list-legend {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}
.inci-detail-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 24px;
  transition: all 0.3s ease;
}
.inci-detail-card.ing-card-safe {
  border-left: 5px solid #10b981;
}
.inci-detail-card.ing-card-restricted {
  border-left: 5px solid #f59e0b;
}
.inci-detail-card.ing-card-banned {
  border-left: 5px solid #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.inci-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.inci-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.status-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.status-badge.badge-allowed { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.status-badge.badge-restricted { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.status-badge.badge-banned { background: rgba(239, 68, 68, 0.25); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.5); font-weight: 900; }
.ewg-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}
.ewg-green { background: #10b981; color: #042f1a; }
.ewg-amber { background: #f59e0b; color: #351a02; }
.ewg-red { background: #ef4444; color: #fff; }
.cat-pill {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
}
.enriched-pill {
  font-size: 11px;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.inci-main-name {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
}
.inci-sub-names {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.inci-sub-names code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  color: #38bdf8;
}
.inci-eval-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .inci-eval-grid { grid-template-columns: 1fr; }
}
.eval-col {
  padding: 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.eval-col.pro-col {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.04);
}
.eval-col.con-col {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.04);
}
.eval-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #fff;
  margin-bottom: 8px;
}
.eval-narrative {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}
.eval-points b {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  margin-bottom: 4px;
}
.eval-points ul {
  padding-left: 18px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.inci-clinical-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.clinical-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
}
.clinical-badge {
  font-size: 12px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.5px;
}
.legal-limit-text {
  font-size: 12px;
  color: #fbbf24;
}
.clinical-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}
.inci-meta-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .inci-meta-footer { grid-template-columns: 1fr; }
}
.meta-sec-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  margin-bottom: 6px;
}
.source-tags, .product-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.source-tag {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
}
.product-pill {
  font-size: 11px;
  background: rgba(184, 151, 90, 0.15);
  color: #e9d6a3;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(184, 151, 90, 0.25);
}
.inci-skin-fit-bar {
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* 6. BÁCH KHOA HOẠT CHẤT & TABS */
.kb-search-wrap {
  max-width: 640px;
  margin: 24px auto 16px;
}
.kb-tabs-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 12px;
  flex-wrap: wrap;
}
.kb-tab-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.kb-tab-btn.active, .kb-tab-btn:hover {
  background: var(--green-d) !important;
  color: #fff !important;
  border-color: var(--green-d) !important;
  box-shadow: 0 4px 12px rgba(11, 59, 44, 0.2);
}
.kb-counter {
  font-size: 13.5px;
  color: #64748b;
  margin-top: 8px;
}
.dict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.kb-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 22px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.kb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--green);
}
.kb-card.status-banned {
  border-left: 4px solid #ef4444;
}
.kb-card.status-restricted {
  border-left: 4px solid #f59e0b;
}
.kb-card.status-allowed {
  border-left: 4px solid #10b981;
}
.kb-card-pills {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.kb-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.kb-status-pill.status-allowed { background: #ecfdf5; color: #059669; }
.kb-status-pill.status-restricted { background: #fffbeb; color: #d97706; }
.kb-status-pill.status-banned { background: #fef2f2; color: #dc2626; font-weight: 800; }
.kb-enriched-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fef3c7;
  color: #b45309;
}
.kb-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
  margin: 8px 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-footer-action {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.kb-view-detail {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
}

/* 7. MODAL CHI TIẾT HOẠT CHẤT */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-card.modal-lg {
  background: #0f172a;
  color: #fff;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 820px;
  width: 100%;
  max-height: 85vh;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}
.modal-scroll-body {
  overflow-y: auto;
  padding: 28px;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s;
}
.modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}


/* ==========================================================================
   BẢN NÂNG CẤP GIAO DIỆN CHUẨN KHOA HỌC & ĐỘ TƯƠNG PHẢN WCAG AAA
   ========================================================================== */

/* 1. THANH TIÊU ĐỀ (NAVBAR) GLASSY PILL ĐỒNG ĐỀU, NỔI BẬT & KHÔNG BỊ TRÀN */
.nav {
  height: 64px !important;
  background: rgba(253, 251, 247, 0.92) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(22, 101, 52, 0.15) !important;
  box-shadow: 0 4px 20px rgba(11, 59, 44, 0.05) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

.nav .in {
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.brand-logo {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  object-fit: contain !important;
}

.brand-text .corp {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  letter-spacing: 0.8px !important;
  display: block !important;
}

.brand-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0b3b2c !important;
  letter-spacing: -0.3px !important;
  display: block !important;
}

/* Tắt thumb trượt lệch lạc trên menu để các nút đồng bộ hoàn toàn */
.menu > .thumb {
  display: none !important;
}

.menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 1 !important;
  margin: 0 8px !important;
  position: relative !important;
}

/* Nút bấm thanh tiêu đề nổi bật, kích thước đồng nhất chuẩn mực */
.menu a.menu-pri {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 34px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(22, 101, 52, 0.06) !important;
  border: 1.5px solid rgba(22, 101, 52, 0.24) !important;
  color: #14532d !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(11, 59, 44, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.menu a.menu-pri:hover {
  background: rgba(22, 101, 52, 0.12) !important;
  border-color: rgba(22, 101, 52, 0.38) !important;
  color: #0b3b2c !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.12) !important;
}

.menu a.menu-pri.on,
.menu a.menu-pri.active {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(22, 101, 52, 0.32) !important;
  transform: translateY(-1px) !important;
}

/* Khối bên phải và nút CTA Soi Thành Phần nổi bật cao cấp */
.nav-r {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.btn-scanner-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.btn-scanner-cta:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45) !important;
}

/* Responsive navbar hoàn hảo mọi kích thước */
@media (max-width: 1400px) {
  .menu { gap: 6px !important; margin: 0 6px !important; }
  .menu a.menu-pri { padding: 0 11px !important; font-size: 12.5px !important; }
}

@media (max-width: 1280px) {
  .menu { gap: 4px !important; }
  .menu a.menu-pri { padding: 0 9px !important; font-size: 12px !important; height: 36px !important; }
  .btn-scanner-cta { padding: 0 14px !important; font-size: 12.5px !important; height: 36px !important; }
}

@media (max-width: 1100px) {
  .menu { gap: 3px !important; }
  .menu a.menu-pri { padding: 0 7px !important; font-size: 11.5px !important; }
  .brand-title { font-size: 14px !important; }
}

/* 2. KHẮC PHỤC TRIỆT ĐỂ LỖI CHỮ KHÓ ĐỌC TRONG MỤC PHÂN TÍCH Y KHOA & CẢNH BÁO (WCAG AAA) */
.inci-detail-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  color: #0f172a !important;
}

.inci-detail-card.ing-card-safe {
  border-left: 6px solid #16a34a !important;
}

.inci-detail-card.ing-card-restricted {
  border-left: 6px solid #d97706 !important;
}

.inci-detail-card.ing-card-banned {
  border-left: 6px solid #dc2626 !important;
  background: #fff5f5 !important;
}

.inci-main-name {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 6px 0 4px 0 !important;
  line-height: 1.25 !important;
}

.inci-sub-names {
  font-size: 13.5px !important;
  color: #475569 !important;
  margin-bottom: 16px !important;
}

.inci-sub-names code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
}

/* Khung hình ảnh / minh chứng trực quan hoạt chất */
.inci-visual-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.inci-visual-img-box {
  width: 68px;
  height: 68px;
  min-width: 68px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.inci-visual-meta {
  flex: 1;
}

.inci-visual-type-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
}

.inci-visual-caption {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

.inci-visual-purity {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

/* LƯỚI ĐÁNH GIÁ 2 CỘT TƯƠNG PHẢN CAO, SIÊU DỄ ĐỌC */
.inci-eval-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

@media (max-width: 768px) {
  .inci-eval-grid { grid-template-columns: 1fr !important; }
}

/* Cột TẠI SAO TỐT? */
.eval-col.pro-col {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-left: 5px solid #16a34a !important;
  border-radius: 14px !important;
  padding: 18px !important;
}

.eval-col.pro-col .eval-box-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #14532d !important;
  margin-bottom: 10px !important;
}

.eval-col.pro-col .eval-narrative {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #14532d !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}

.eval-col.pro-col .eval-points b {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.eval-col.pro-col .eval-points ul {
  padding-left: 20px !important;
  margin: 0 !important;
}

.eval-col.pro-col .eval-points li {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #14532d !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

/* Cột TẠI SAO CẦN LƯU Ý / TÁC HẠI TIỀM ẨN */
.eval-col.con-col {
  background: #fffbeb !important;
  border: 1.5px solid #fcd34d !important;
  border-left: 5px solid #d97706 !important;
  border-radius: 14px !important;
  padding: 18px !important;
}

.eval-col.con-col .eval-box-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #78350f !important;
  margin-bottom: 10px !important;
}

.eval-col.con-col .eval-narrative {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #78350f !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}

.eval-col.con-col .eval-points b {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #92400e !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.eval-col.con-col .eval-points ul {
  padding-left: 20px !important;
  margin: 0 !important;
}

.eval-col.con-col .eval-points li {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #78350f !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

/* Biến thể dành cho CHẤT CẤM ĐỘC HẠI PHỤ LỤC II (Cảnh báo đỏ khẩn cấp) */
.ing-card-banned .eval-col.con-col {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  border-left: 5px solid #dc2626 !important;
}

.ing-card-banned .eval-col.con-col .eval-box-header {
  color: #7f1d1d !important;
  font-size: 14.5px !important;
}

.ing-card-banned .eval-col.con-col .eval-narrative {
  color: #7f1d1d !important;
  font-weight: 600 !important;
}

.ing-card-banned .eval-col.con-col .eval-points b {
  color: #991b1b !important;
  font-weight: 800 !important;
}

.ing-card-banned .eval-col.con-col .eval-points li {
  color: #7f1d1d !important;
  font-weight: 600 !important;
}

/* HỘP ĐÁNH GIÁ Y KHOA & DA LIỄU CHUYÊN SÂU */
.inci-clinical-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 5px solid #0284c7 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 18px !important;
}

.clinical-badge {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0369a1 !important;
  letter-spacing: 0.5px !important;
}

.legal-limit-text {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #92400e !important;
  background: #fef3c7 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid #fde68a !important;
}

.clinical-text {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #0f172a !important;
  font-weight: 500 !important;
  margin: 8px 0 0 0 !important;
}

/* Lưới trích dẫn y khoa & sản phẩm thị trường */
.inci-meta-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-bottom: 14px !important;
}

@media (max-width: 768px) {
  .inci-meta-grid { grid-template-columns: 1fr !important; }
}

.meta-block-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 8px !important;
}

.citation-list {
  padding-left: 18px !important;
  margin: 0 !important;
}

.citation-list li {
  font-size: 12.5px !important;
  color: #475569 !important;
  margin-bottom: 4px !important;
}

.citation-link {
  color: #0284c7 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

.prod-chips-wrap {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.prod-chip {
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #e2e8f0 !important;
  color: #1e293b !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
}

.inci-skin-advice {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  line-height: 1.5 !important;
}

/* Modal chi tiết hoạt chất chuẩn ánh sáng */
.modal-card.modal-lg {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
}

.modal-close {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

.modal-close:hover {
  background: #e2e8f0 !important;
}

/* 3. TRUNG TÂM GIÁM SÁT CẢNH BÁO AN TOÀN & HẬU KIỂM DƯỢC MỸ PHẨM CHÍNH THỨC */
.alerts-dashboard-card {
  background: #ffffff !important;
  border: 1.5px solid #fca5a5 !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 10px 35px rgba(220, 38, 38, 0.08) !important;
  margin-top: 32px !important;
}

.alerts-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid #fee2e2;
  margin-bottom: 24px;
}

.alerts-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.alerts-siren-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  animation: pulse-alert 2s infinite;
}

@keyframes pulse-alert {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.alerts-main-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #991b1b !important;
  margin: 0 0 4px 0 !important;
}

.alerts-sub-desc {
  font-size: 13.5px !important;
  color: #475569 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.alerts-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.alert-filter-btn {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
}

.alert-filter-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.alert-filter-btn.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
}

.alerts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.official-alert-card {
  opacity: 1 !important;
  transform: none !important;
  background: #ffffff !important;
  border: 1.5px solid #fecaca !important;
  border-left: 6px solid #dc2626 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
  color: #1e293b !important;
}

.official-alert-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.12) !important;
}

.alert-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.alert-doc-pill {
  font-size: 11.5px;
  font-weight: 800;
  color: #991b1b;
  background: #fee2e2;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #fca5a5;
}

.alert-agency-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
}

.alert-date-text {
  font-size: 12px;
  color: #64748b;
}

.alert-card-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #7f1d1d !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.35 !important;
}

.alert-meta-box {
  background: #ffffff;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: #1e293b;
}

.alert-meta-box b {
  color: #0f172a;
}

.alert-meta-box code {
  background: #f1f5f9;
  color: #b91c1c;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.alert-reasons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .alert-reasons-grid { grid-template-columns: 1fr; }
}

.alert-violation-box {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #881337;
}

.alert-risk-box {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #7c2d12;
}

.alert-actions-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #fee2e2;
}

.alert-action-guide {
  font-size: 12.5px;
  font-weight: 600;
  color: #b91c1c;
}

.alert-btn-dav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #dc2626;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}

.alert-btn-dav:hover {
  background: #b91c1c;
}

/* ==========================================================================
   OCR PHOTO SCANNER (CHỤP VÀ TẢI ẢNH BẢNG THÀNH PHẦN)
   ========================================================================== */
.ocr-switcher-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 14px;
  flex-wrap: wrap;
}

.ocr-switcher-tabs {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 3px;
  gap: 4px;
}

.ocr-mode-tab {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ocr-mode-tab:hover {
  color: #e2e8f0;
}

.ocr-mode-tab.active {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ocr-mode-hint {
  font-size: 12px;
  color: #94a3b8;
}

.ocr-mode-hint kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: #cbd5e1;
}

.ocr-panel {
  margin-bottom: 16px;
  animation: fadeIn 0.25s ease-out;
}

.ocr-dropzone {
  background: rgba(15, 23, 42, 0.65);
  border: 1.5px dashed rgba(16, 185, 129, 0.35);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
}

.ocr-dropzone.dragover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.ocr-drop-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ocr-drop-title {
  display: block;
  font-size: 15px;
  color: #f8fafc;
  font-weight: 700;
  margin-bottom: 6px;
}

.ocr-drop-sub {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 16px;
}

.ocr-btn-browse {
  background: none;
  border: none;
  color: #34d399;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
}

.ocr-btn-browse:hover {
  color: #6ee7b7;
}

.ocr-sample-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ocr-sample-title {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.ocr-chip-sample {
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: all 0.2s !important;
  cursor: pointer;
}

.ocr-chip-sample:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #34d399 !important;
}

.ocr-chip-bad {
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.06) !important;
}

.ocr-chip-bad:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
}

.ocr-preview-card {
  display: flex;
  gap: 18px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 16px;
  padding: 18px;
  align-items: flex-start;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.ocr-thumb-wrap {
  position: relative;
  width: 140px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  background: #020617;
}

#ocrPreviewImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ocr-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #34d399, #10b981, #34d399, transparent);
  box-shadow: 0 0 12px 3px rgba(52, 211, 153, 0.85);
  animation: ocrSweep 1.6s ease-in-out infinite;
}

@keyframes ocrSweep {
  0% { top: 0%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.ocr-preview-info {
  flex: 1;
  min-width: 0;
}

.ocr-status-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ocr-status-title-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ocr-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  display: inline-block;
  animation: pulseDot 1s infinite alternate;
}

@keyframes pulseDot {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

#ocrStatusTitle {
  font-size: 14px;
  color: #f8fafc;
}

.ocr-btn-cancel {
  font-size: 12px !important;
  padding: 4px 10px !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
}

.ocr-btn-cancel:hover {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.ocr-progress-wrap {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.ocr-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #06b6d4, #10b981);
  transition: width 0.3s ease;
}

.ocr-status-desc {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0 0 8px;
}

.ocr-extracted-preview {
  font-size: 12px;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(52, 211, 153, 0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .ocr-preview-card {
    flex-direction: column;
  }
  .ocr-thumb-wrap {
    width: 100%;
    height: 140px;
  }
  .ocr-switcher-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   BẢO CHỨNG PHÁP LÝ & KIỂM NGHIỆM BỘ Y TẾ (CÔNG TY TNHH NATUR LIFE CARE)
   ========================================================================== */
.company-proof-accreditation {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 42, 0.9) 50%, rgba(245, 158, 11, 0.08) 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.45);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 20px 0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  animation: fadeIn 0.3s ease-out;
}

.proof-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.proof-badge-gold {
  background: linear-gradient(90deg, #059669, #d97706);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.proof-corp-tag {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

.proof-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.proof-doc-card {
  background: rgba(2, 6, 23, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 12px;
  transition: all 0.2s ease;
}

.proof-doc-card:hover {
  border-color: rgba(52, 211, 153, 0.35);
  transform: translateY(-2px);
}

.proof-doc-card.highlighted {
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}

.proof-doc-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.proof-doc-info {
  flex: 1;
  min-width: 0;
}

.proof-doc-label {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.4px;
}

.proof-doc-val {
  font-size: 13.5px;
  color: #f8fafc;
  font-weight: 800;
  display: block;
  margin-bottom: 5px;
}

.proof-doc-desc {
  font-size: 12px;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.5;
}

.botanical-allergy-alert {
  margin-top: 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.allergy-alert-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1.2;
}

.allergy-alert-body b {
  color: #34d399;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

.allergy-alert-body p {
  color: #e2e8f0;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

.company-star-pill {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.25), rgba(245, 158, 11, 0.25));
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.4);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* FINAL OVERRIDES FOR SCAN SUMMARY BANNER */
/* ==========================================================================
   SCAN SUMMARY BANNER - HIGH CONTRAST & WCAG AAA COMPLIANT (EXECUTIVE CARDS)
   ========================================================================== */
.scan-summary-banner {
  border-radius: 20px !important;
  padding: 26px 28px !important;
  margin-top: 28px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* SẢN PHẨM CHÍNH HÃNG CÔNG TY: GRADE COMPANY GOLD */
.scan-summary-banner.grade-company-gold {
  background: linear-gradient(135deg, #052618 0%, #0c1f17 50%, #1f1a07 100%) !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 158, 11, 0.35) inset !important;
}

.scan-summary-banner.grade-company-gold .summary-verdict-title {
  color: #34d399 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.scan-summary-banner.grade-company-gold .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.scan-summary-banner.grade-company-gold .summary-narrative {
  color: #f1f5f9 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* SẢN PHẨM AN TOÀN SINH HỌC THƯỜNG: GRADE SAFE */
.scan-summary-banner.grade-safe {
  background: linear-gradient(135deg, #052618 0%, #071f16 100%) !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 18px 45px rgba(6, 78, 59, 0.35) !important;
}

.scan-summary-banner.grade-safe .summary-verdict-title {
  color: #34d399 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.scan-summary-banner.grade-safe .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.scan-summary-banner.grade-safe .summary-narrative {
  color: #f1f5f9 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
}

/* SẢN PHẨM CÓ THÀNH PHẦN CẦN LƯU Ý: GRADE RESTRICTED */
.scan-summary-banner.grade-restricted {
  background: linear-gradient(135deg, #241707 0%, #160f04 100%) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 18px 45px rgba(180, 83, 9, 0.35) !important;
}

.scan-summary-banner.grade-restricted .summary-verdict-title {
  color: #fbbf24 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.scan-summary-banner.grade-restricted .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.scan-summary-banner.grade-restricted .summary-narrative {
  color: #fef3c7 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
}

/* SẢN PHẨM CHỨA CHẤT CẤM: GRADE BANNED */
.scan-summary-banner.grade-banned {
  background: linear-gradient(135deg, #2e0909 0%, #1a0505 100%) !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 18px 45px rgba(220, 38, 38, 0.45) !important;
}

.scan-summary-banner.grade-banned .summary-verdict-title {
  color: #f87171 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
}

.scan-summary-banner.grade-banned .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

.scan-summary-banner.grade-banned .summary-narrative {
  color: #fee2e2 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
}

.summary-top {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
}

.summary-icon {
  font-size: 38px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ĐỒNG BỘ CÁC THẺ METRIC-BOX ĐẠT ĐỘ TƯƠNG PHẢN TỐI ĐA */
.summary-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

.metric-box {
  background: #020617 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  text-align: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.metric-box b {
  display: block !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

.metric-box span {
  font-size: 12px !important;
  color: #cbd5e1 !important;
  display: block !important;
  margin-top: 5px !important;
  font-weight: 600 !important;
}

.metric-box.safe {
  border-color: rgba(16, 185, 129, 0.45) !important;
}
.metric-box.safe b {
  color: #34d399 !important;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.4) !important;
}

.metric-box.warn {
  border-color: rgba(245, 158, 11, 0.45) !important;
}
.metric-box.warn b {
  color: #fbbf24 !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.4) !important;
}

.metric-box.bad {
  border-color: rgba(239, 68, 68, 0.5) !important;
}
.metric-box.bad b {
  color: #f87171 !important;
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.4) !important;
}

.metric-box.ewg {
  border-color: rgba(96, 165, 250, 0.45) !important;
}
.metric-box.ewg b {
  color: #60a5fa !important;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.4) !important;
}


/* ==========================================================================
   OFFICIAL RECALL ALERTS - ACCREDITED PRESS & DETAILED PRODUCT SHOWCASE
   ========================================================================== */
.alert-product-showcase-row {
  display: flex !important;
  gap: 18px !important;
  align-items: stretch !important;
  margin-bottom: 14px !important;
}

@media (max-width: 640px) {
  .alert-product-showcase-row {
    flex-direction: column !important;
  }
}

.alert-official-seal-box {
  position: relative !important;
  width: 145px !important;
  min-width: 145px !important;
  height: 140px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 2px solid #f87171 !important;
  background: linear-gradient(180deg, #fff1f2 0%, #fee2e2 100%) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 12px !important;
  text-align: center !important;
}

.alert-seal-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
}

.alert-seal-svg {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
}

.alert-seal-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  padding: 0 4px !important;
}

.alert-seal-heading {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #991b1b !important;
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
}

.alert-seal-agency {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #b91c1c !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
}

.alert-seal-sub {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: #7f1d1d !important;
  line-height: 1.15 !important;
}

.alert-prod-badge-tag {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(185, 28, 28, 0.92) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-align: center !important;
  padding: 4px 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  backdrop-filter: blur(4px) !important;
}

.alert-meta-box {
  flex: 1 !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

.alert-target-name {
  color: #991b1b !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
}

.alert-count-pill {
  display: inline-block !important;
  background: #fee2e2 !important;
  color: #991b1b !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  border: 1px solid #fca5a5 !important;
}

/* DANH SÁCH CHI TIẾT SẢN PHẨM TRONG QUYẾT ĐỊNH */
.alert-itemized-details {
  margin: 14px 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.05) !important;
}

.alert-itemized-summary {
  padding: 11px 16px !important;
  background: #fff7ed !important;
  cursor: pointer !important;
  font-weight: 750 !important;
  font-size: 13.5px !important;
  color: #9a3412 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  user-select: none !important;
  transition: background 0.2s !important;
}

.alert-itemized-summary:hover {
  background: #ffedd5 !important;
}

.alert-toggle-indicator {
  font-size: 12px !important;
  color: #c2410c !important;
  transition: transform 0.25s ease !important;
}

.alert-itemized-details[open] .alert-toggle-indicator {
  transform: rotate(180deg) !important;
}

.alert-itemized-table-wrap {
  max-height: 290px !important;
  overflow-y: auto !important;
  border-top: 1px solid #fed7aa !important;
}

.alert-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12.5px !important;
  text-align: left !important;
}

.alert-table th {
  background: #ffedd5 !important;
  color: #7c2d12 !important;
  padding: 9px 12px !important;
  font-weight: 750 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  border-bottom: 1px solid #fed7aa !important;
}

.alert-table td {
  padding: 9px 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
}

.alert-table tr:hover td {
  background: #fff1f2 !important;
}

.alert-brand-tag {
  background: #f1f5f9 !important;
  color: #334155 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid #cbd5e1 !important;
}

.alert-itemized-note {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  color: #92400e !important;
  line-height: 1.55 !important;
  margin: 12px 0 !important;
}

/* KHỐI BẢO CHỨNG TRUY XUẤT NGUỒN GỐC BÁO CHÍ CHÍNH THỐNG */
.alert-press-box {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 6px solid #0284c7 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
}

.press-box-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 10px !important;
}

.press-badge-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.press-box-badge {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  border: 1px solid #bae6fd !important;
  letter-spacing: 0.3px !important;
}

.press-doc-tag {
  font-size: 12.5px !important;
  font-weight: 750 !important;
  color: #334155 !important;
}

.press-date-tag {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.press-content-grid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.press-meta-info {
  flex: 1 !important;
  min-width: 280px !important;
}

.press-source-line {
  font-size: 13.5px !important;
  color: #0f172a !important;
  margin-bottom: 5px !important;
}

.press-source-name {
  color: #0369a1 !important;
  font-weight: 800 !important;
}

.press-headline {
  font-size: 14.5px !important;
  font-weight: 750 !important;
  color: #1e293b !important;
  margin-bottom: 6px !important;
  font-style: italic !important;
  line-height: 1.45 !important;
}

.press-legal-proof {
  font-size: 12.5px !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.press-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.btn-press-verify {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-press-verify:hover {
  background: #0369a1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

.btn-dav-verify {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: 1px solid #cbd5e1 !important;
  transition: all 0.2s ease !important;
}

.btn-dav-verify:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* ĐẢM BẢO KHU VỰC CẢNH BÁO PHÁP QUY LUÔN HIỂN THỊ RÕ NÉT 100% */
#alerts, .alerts, .alerts-dashboard-card, .official-alert-card {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* TRÍCH LỤC BÀI BÁO BẢO CHỨNG & DANH MỤC DIỆN THU HỒI CHI TIẾT */
.press-excerpt-quote {
  margin: 10px 0 12px 0 !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  border-left: 4px solid #0284c7 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #1e293b !important;
}

.press-quote-badge {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0369a1 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.3px !important;
}

.press-excerpt-quote em {
  font-style: italic !important;
  color: #0f172a !important;
}

.alert-table th {
  background: #ffedd5 !important;
  color: #7c2d12 !important;
  padding: 10px 12px !important;
  font-weight: 750 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  border-bottom: 1.5px solid #fed7aa !important;
  font-size: 12.5px !important;
}

.alert-table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   COMMUNITY REVIEWS, REAL-TIME TELEMETRY & AUDIT LEDGER (MASTER V5.1)
   ========================================================================== */

/* 1. KHUNG QUY CHẾ ĐÁNH GIÁ & ĐÓNG GÓP (CHUẨN THEO ẢNH USER GỬI) */
.nlc-policy-banner {
  background: #1a1d26 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 16px 22px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-top: 24px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.nlc-policy-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

.nlc-policy-content {
  color: #fbbf24 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  font-family: var(--font, 'Be Vietnam Pro', sans-serif) !important;
}

.nlc-policy-title {
  font-weight: 700 !important;
  color: #fbbf24 !important;
  margin-right: 4px !important;
}

.nlc-policy-content strong {
  font-weight: 800 !important;
  color: #f59e0b !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* 2. BỘ ĐẾM SỐ LIỆU HOẠT ĐỘNG & LƯU LƯỢNG THỰC TẾ */
.nlc-telemetry-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

@media (max-width: 1024px) {
  .nlc-telemetry-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .nlc-telemetry-grid {
    grid-template-columns: 1fr !important;
  }
}

.nlc-telemetry-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  padding: 20px 18px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.nlc-telemetry-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
}

.nlc-telemetry-highlight {
  border: 1.5px solid #10b981 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
}

.nlc-telemetry-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.nlc-telemetry-highlight .nlc-telemetry-badge {
  color: #059669 !important;
}

.pulse-live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  display: inline-block !important;
  animation: nlcPulseLive 1.8s infinite !important;
}

.pulse-live-dot.green {
  background: #34d399 !important;
}

@keyframes nlcPulseLive {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.nlc-telemetry-value {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  font-family: 'Plus Jakarta Sans', var(--font, sans-serif) !important;
  line-height: 1.15 !important;
}

.nlc-telemetry-highlight .nlc-telemetry-value {
  color: #059669 !important;
}

.nlc-telemetry-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-top: 6px !important;
}

.nlc-telemetry-sub {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 3px !important;
}

/* 3. SỔ CÁI BẰNG CHỨNG HOẠT ĐỘNG THỜI GIAN THỰC */
.nlc-ledger-panel {
  margin-top: 24px !important;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  color: #e2e8f0 !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.3) !important;
}

.nlc-ledger-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}

.nlc-ledger-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.nlc-ledger-title .ledger-icon {
  font-size: 26px !important;
}

.nlc-ledger-title h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  margin: 0 0 4px !important;
  letter-spacing: 0.3px !important;
}

.nlc-ledger-title p {
  font-size: 13px !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}

.nlc-ledger-status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #34d399 !important;
  font-family: monospace !important;
  background: rgba(16, 185, 129, 0.1) !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.nlc-ledger-stream {
  max-height: 250px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-right: 6px !important;
}

.nlc-ledger-stream::-webkit-scrollbar {
  width: 6px !important;
}
.nlc-ledger-stream::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 4px !important;
}
.nlc-ledger-stream::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
}

.nlc-ledger-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 3.5px solid #10b981 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  transition: background 0.2s ease !important;
}

.nlc-ledger-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

.nlc-ledger-item.newest {
  animation: nlcLedgerHighlight 2.5s ease-out !important;
}

@keyframes nlcLedgerHighlight {
  0% { background: rgba(16, 185, 129, 0.25); transform: translateY(-2px); }
  100% { background: rgba(255, 255, 255, 0.04); transform: translateY(0); }
}

.nlc-ledger-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 65% !important;
}

.ledger-txid {
  font-family: monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
}

.ledger-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

.badge-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }
.badge-gold { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }
.badge-green { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
.badge-purple { background: rgba(192, 132, 252, 0.15); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.3); }
.badge-cyan { background: rgba(34, 211, 238, 0.15); color: #22d3ee; border: 1px solid rgba(34, 211, 238, 0.3); }
.badge-teal { background: rgba(45, 212, 191, 0.15); color: #2dd4bf; border: 1px solid rgba(45, 212, 191, 0.3); }

.ledger-summary {
  font-size: 13px !important;
  color: #f1f5f9 !important;
}

.nlc-ledger-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.ledger-hash {
  font-family: monospace !important;
  font-size: 11px !important;
  color: #64748b !important;
  background: rgba(0, 0, 0, 0.25) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

/* 4. KHU VỰC ĐÁNH GIÁ SAO & CẢM NHẬN */
.nlc-reviews-section {
  margin-top: 32px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
}

.nlc-reviews-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 28px !important;
}

.nlc-rating-overview {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

.nlc-rating-score {
  text-align: center !important;
  padding-right: 28px !important;
  border-right: 1px solid #e2e8f0 !important;
}

.score-num {
  font-size: 48px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.score-stars {
  color: #f59e0b !important;
  font-size: 20px !important;
  letter-spacing: 2px !important;
  margin: 4px 0 !important;
}

.score-count {
  font-size: 12px !important;
  color: #64748b !important;
  display: block !important;
}

.nlc-rating-bars {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 220px !important;
}

.bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #64748b !important;
}

.bar-lbl {
  width: 36px !important;
  font-weight: 600 !important;
}

.bar-track {
  flex: 1 !important;
  height: 6px !important;
  background: #f1f5f9 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.bar-fill {
  height: 100% !important;
  background: #f59e0b !important;
  border-radius: 3px !important;
}

.bar-val {
  width: 32px !important;
  text-align: right !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

.nlc-reviews-cta {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* FILTER PILLS */
.nlc-review-filters {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 24px 0 20px !important;
}

.nlc-filter-btn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.nlc-filter-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.nlc-filter-btn.active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

/* REVIEWS LIST */
.nlc-reviews-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.nlc-review-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.nlc-review-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  border-color: #cbd5e1 !important;
}

.nlc-review-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.nlc-author-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.nlc-author-av {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  border: 1.5px solid #e2e8f0 !important;
}

.nlc-author-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nlc-verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.08) !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}

.nlc-author-role {
  font-size: 13px !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

.nlc-review-meta {
  text-align: right !important;
}

.nlc-review-stars {
  color: #f59e0b !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}

.nlc-review-date {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}

.nlc-review-category-pill {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0369a1 !important;
  background: #e0f2fe !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  margin: 12px 0 6px !important;
}

.nlc-review-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 6px 0 8px !important;
}

.nlc-review-content {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #334155 !important;
}

/* FOUNDER REPLY CARD */
.founder-reply-card {
  margin-top: 16px !important;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08) !important;
}

.founder-reply-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.founder-reply-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #065f46 !important;
  letter-spacing: 0.5px !important;
}

.founder-reply-date {
  font-size: 12px !important;
  color: #059669 !important;
  font-weight: 600 !important;
}

.founder-reply-body {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #166534 !important;
  font-style: italic !important;
}

.founder-reply-signature {
  font-size: 13px !important;
  color: #065f46 !important;
  margin-top: 10px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* REPLY BUTTON FOR FOUNDER */
.btn-founder-reply {
  margin-top: 14px !important;
  background: #f8fafc !important;
  border: 1px dashed #0284c7 !important;
  color: #0284c7 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.btn-founder-reply:hover {
  background: #f0f9ff !important;
  border-style: solid !important;
  transform: translateY(-1px) !important;
}

/* FLOATING CONTACT QUICK ACTION (HOTLINE & ZALO) */
.nlc-floating-contact {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.float-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-radius: 9999px !important;
  color: #ffffff !important;
  font-family: var(--font, 'Be Vietnam Pro', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.float-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.float-zalo {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.float-phone {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  animation: nlcPhonePulse 2.5s infinite !important;
}

@keyframes nlcPhonePulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.float-icon {
  font-size: 18px !important;
}

.float-text {
  letter-spacing: 0.3px !important;
}

@media (max-width: 640px) {
  .nlc-floating-contact {
    bottom: 16px !important;
    right: 16px !important;
    gap: 8px !important;
  }
  .float-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
}


/* ==========================================================================
   TỐI ƯU CÂN ĐỐI GIAO DIỆN THEO CHỈ ĐẠO CỦA FOUNDER (MASTER V5.1)
   ========================================================================== */

/* 1. HERO STATS STRIP: CÂN ĐỐI ĐỐI XỨNG 6 MỤC TRÊN 1 HÀNG */
.hero-stats-strip {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
  margin-top: 52px !important;
  padding: 22px 24px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(184, 151, 90, 0.3) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  align-items: stretch !important;
}

.hero-stat-item {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 4px !important;
}

.hero-stat-item b {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  display: block !important;
  color: #0f3e2e !important;
  letter-spacing: -0.5px !important;
}

.hero-stat-item b.col-gold {
  color: #d97706 !important;
}

.hero-stat-item b.col-red {
  color: #dc2626 !important;
}

.hero-stat-item span {
  font-size: 12px !important;
  font-weight: 550 !important;
  color: #475569 !important;
  line-height: 1.35 !important;
  margin-top: 4px !important;
  display: block !important;
}

@media (max-width: 991px) {
  .hero-stats-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 580px) {
  .hero-stats-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 2. FOOTER CÂN ĐỐI & KHÔNG LẶP TÊN CÔNG TY */
.fgrid {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr 1fr 1.1fr !important;
  gap: 36px !important;
  padding-bottom: 36px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.footer-brand .brand-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f3e2e !important;
  line-height: 1.3 !important;
}

.footer-info-compact {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}

.finfo-row {
  margin-bottom: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.finfo-lbl {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.finfo-sub {
  color: #94a3b8 !important;
  font-size: 12px !important;
  margin-left: 4px !important;
}

.finfo-link {
  color: #0f3e2e !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.finfo-link:hover {
  color: #10b981 !important;
  text-decoration: underline !important;
}

.finfo-highlight {
  padding: 4px 0 !important;
}

.finfo-phone {
  color: #0f3e2e !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.finfo-zalo {
  color: #0284c7 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.finfo-sep {
  color: #cbd5e1 !important;
  margin: 0 4px !important;
}

@media (max-width: 900px) {
  .fgrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 580px) {
  .fgrid {
    grid-template-columns: 1fr !important;
  }
}

/* 3. DIỄN ĐÀN CHUYÊN ĐỀ 2026: CARD BÀI VIẾT HIỆN ĐẠI */
.posts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 22px !important;
  margin-top: 20px !important;
}

.post-card-2026 {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 22px 24px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

.post-card-2026:hover {
  transform: translateY(-4px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 16px 36px rgba(15, 62, 46, 0.08) !important;
}

.post-card-2026:active {
  transform: scale(0.98) !important;
}

.post-top-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  gap: 8px !important;
}

.post-category-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.hot-badge-fire {
  display: inline-flex !important;
  align-items: center !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.3px !important;
}

.post-cat-name {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0f3e2e !important;
  background: #ecfdf5 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.post-date-tag {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.post-headline {
  font-size: 16.5px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  line-height: 1.45 !important;
  margin: 0 0 10px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.post-excerpt-text {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 0 14px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.post-tags-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.post-tag-chip {
  font-size: 11.5px !important;
  color: #3b82f6 !important;
  background: #eff6ff !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.post-footer-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  gap: 12px !important;
}

.post-author-box {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.post-author-av {
  font-size: 22px !important;
  line-height: 1 !important;
}

.post-author-info {
  display: flex !important;
  flex-direction: column !important;
}

.author-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
}

.author-role {
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

.post-stats-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 12px !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

.p-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* 4. TỐI ƯU ĐỘ TƯƠNG PHẢN CHO BANNER KẾT LUẬN TỔNG THỂ SOI THÀNH PHẦN (WCAG AAA) */
.scan-summary-banner {
  border-radius: 20px !important;
  padding: 26px 28px !important;
  margin-top: 28px !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #052618 0%, #0d2a1d 60%, #163826 100%) !important;
  border: 2px solid #10b981 !important;
  color: #ffffff !important;
}

.scan-summary-banner .summary-verdict-title {
  color: #6ee7b7 !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.scan-summary-banner .summary-grade {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 850 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.scan-summary-banner .summary-narrative {
  color: #f1f5f9 !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  font-weight: 450 !important;
  margin: 14px 0 22px 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.scan-summary-banner .metric-box {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  text-align: center !important;
}

.scan-summary-banner .metric-box b {
  font-size: 20px !important;
  font-weight: 800 !important;
  display: block !important;
  color: #ffffff !important;
}

.scan-summary-banner .metric-box.safe b {
  color: #34d399 !important;
}

.scan-summary-banner .metric-box.warn b {
  color: #fbbf24 !important;
}

.scan-summary-banner .metric-box.banned b {
  color: #f87171 !important;
}

.scan-summary-banner .metric-box span {
  font-size: 11.5px !important;
  color: #cbd5e1 !important;
  margin-top: 4px !important;
  display: block !important;
}


/* ==========================================================================
   CSS CHO CHÍNH SÁCH BẢO VỆ DỮ LIỆU & ĐỔI TRẢ CHUẨN Y KHOA (NĐ 13 & LUẬT BVQLNTD)
   ========================================================================== */
.policy-modal-container {
  max-width: 780px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 6px 4px;
}

.policy-modal-header {
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.policy-badge-legal {
  display: inline-flex;
  align-items: center;
  background: #f0fdf4;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.policy-modal-title {
  font-size: 20px;
  font-weight: 850;
  color: #0f172a;
  line-height: 1.35;
  margin: 6px 0 12px 0;
}

.policy-meta-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.policy-modal-body {
  overflow-y: auto;
  max-height: 52vh;
  padding-right: 12px;
  margin-bottom: 16px;
}

.policy-section-block {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e2e8f0;
}

.policy-sec-heading {
  font-size: 15px;
  font-weight: 750;
  color: #0f3e2e;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.policy-sec-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #475569;
  margin: 0;
  text-align: justify;
}

.policy-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
  gap: 12px;
}

.return-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.return-hl-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.return-hl-icon {
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
}

.return-hl-card b {
  font-size: 12.5px;
  font-weight: 750;
  color: #0f172a;
  display: block;
  line-height: 1.3;
}

.return-hl-card span {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-top: 2px;
  line-height: 1.3;
}

@media (max-width: 650px) {
  .return-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* FAQ STYLES */
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-item[open] {
  border-color: #10b981;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.08);
}

.faq-summary {
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 700;
  color: #0f172a;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  user-select: none;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-cat-tag {
  font-size: 11px;
  font-weight: 750;
  color: #047857;
  background: #ecfdf5;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.faq-q-text {
  flex: 1;
  line-height: 1.4;
}

.faq-answer-body {
  padding: 0 20px 18px 20px;
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
  padding-top: 14px;
  text-align: justify;
}