/* NETSPOT: bảng màu và biến dùng chung. Mọi trang nạp file này đầu tiên.
   Sửa màu ở đây là cả web đổi theo, kể cả trang sản phẩm. */
:root{
  --canvas:#050C1E; --canvas-deep:#020814; --panel:#0C1730; --panel-hi:#142140;
  --line:#1E2C4E; --line-strong:#55628F;
  --cyan:#7ED8EC; --cyan-dim:#4E93AC; --cyan-whisper:#223851; --violet:#8C82D6;
  --accent:#CFC4FF; --accent-hover:#E2DBFF; --accent-glow:#8E7FC4; --accent-muted:#3D3566;
  --text-primary:#EDF1FB; --text-secondary:#9BA6C8;
  /* Tím dùng cho chữ lớn và giá tiền. Ở nền tối nó trùng --accent; ở nền sáng nó
     nhạt hơn --accent một bậc, vì chữ càng to thì mắt càng chịu được màu nhạt. */
  --accent-soft:#CFC4FF;
  --on-accent:#0B0F1E;              /* chữ nằm trên nền tím */
  /* Bộ ba số RGB, để viết rgba(var(--x),.4) rồi đổi một chỗ là cả theme đổi theo */
  --acc-rgb:207,196,255;            /* tím thương hiệu */
  --cy-rgb:126,216,236;             /* xanh ngọc */
  --neon-rgb:124,77,255;            /* tím neon của viền LED */
  --hair:96,112,158;                /* vạch kẻ mảnh */
  --hair2:85,98,143;                /* vạch kẻ đậm hơn */
  --ln-rgb:30,44,78;                /* đường viền khối */
  --surf-rgb:5,12,30;               /* mặt trang phủ lên nền sao */
  --deep-rgb:4,9,24;                /* chân trang, thanh nav */
  --card-a:rgba(14,26,54,.86);      /* thẻ sản phẩm, đỉnh */
  --card-b:rgba(8,16,38,.88);       /* thẻ sản phẩm, đáy */
  --card-bd:rgba(124,77,255,.18);
  --glass-a:rgba(27,42,78,.74);
  --glass-b:rgba(10,19,44,.66);
  --glass-bd:rgba(112,130,180,.26);
  --glass-top:rgba(178,205,255,.5); /* sợi sáng mép trên khối kính */
  --ftext:#7C88AC; --ftext-dim:#6F7D9F;
  --go-hover:#C79BFF;
  --star-op:1; --aur-op:1;          /* trời sao và cực quang */
  --led-w:1.4px; --led-op:.5;       /* viền LED: dày và mờ bao nhiêu */
  --led-hot:#FFFFFF; --led-warm:#D8C6FF;
  --icbg:rgba(4,10,26,.82);         /* ô vuông bọc logo trong thẻ */
  --pop-bg:rgba(10,17,40,.96);      /* bảng bật lên: chú giải, chọn ngôn ngữ */
  --box-bg:rgba(9,18,42,.62);       /* khối con số, khối giờ mở cửa */
  --mq-bg:linear-gradient(90deg,rgba(12,23,48,.94),rgba(20,33,64,.94),rgba(12,23,48,.94));
  --shead-fade:linear-gradient(rgba(5,12,30,.40) 0%,rgba(5,12,30,.56) 44%,rgba(5,12,30,.90) 86%,var(--canvas) 100%);
  --nav-bg:#080E1F;                 /* thanh trên cùng: đặc hẳn, không cho chữ chui qua */
  /* Khung hero trang chủ */
  --hero-bg:#03060E;
  --hero-sub:#6C7899;               /* dòng chữ mờ trong tiêu đề */
  --ray-col:rgba(255,255,255,.30);  /* tia tốc độ manga */
  --glow-a:rgba(207,196,255,.72); --glow-b:rgba(184,168,255,.34);
  --glow-c:rgba(150,128,230,.16); --glow-d:rgba(110,92,190,.06);
  --hero-fade:linear-gradient(90deg,#03060E 0%,#03060E 24%,rgba(3,6,14,.9) 40%,
    rgba(3,6,14,.42) 56%,rgba(3,6,14,.06) 72%,transparent 82%);
  --logo-sh:drop-shadow(0 0 18px rgba(207,196,255,.55)) drop-shadow(0 5px 12px rgba(0,0,0,.7));
  --agent-sh:drop-shadow(0 0 34px rgba(207,196,255,.4)) drop-shadow(0 14px 30px rgba(0,0,0,.7));
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Be Vietnam Pro",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --tshadow:0 1px 2px rgba(3,5,14,.95),0 3px 12px rgba(3,5,14,.8),0 10px 44px rgba(3,5,14,.82);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --gut:clamp(20px,5vw,72px);
  --rail:clamp(20px,4vw,54px);
}

/* ============ THEME SÁNG ============
   Nền không phải trắng tinh mà là giấy oải hương, lấy từ vòng tròn pastel của logo.
   Tím đổi thành hai bậc: --accent-soft cho chữ lớn, --accent đậm hơn cho chữ nhỏ,
   để chỗ nào cũng đủ tương phản mà tổng thể vẫn nhạt. */
:root[data-theme="light"]{
  --canvas:#EFE8FB; --canvas-deep:#E5DCF8; --panel:#FFFFFF; --panel-hi:#F8F5FE;
  --line:#DCD2F1; --line-strong:#B3A7D6;
  --cyan:#287289; --cyan-dim:#337187; --cyan-whisper:#DDEDF3; --violet:#6D5FAE;
  --accent:#6D3BFF; --accent-soft:#8B5CF6; --accent-hover:#5A28EE;
  --accent-glow:#A78BFA; --accent-muted:#E4D9FE;
  --text-primary:#14122B; --text-secondary:#57527D;
  --on-accent:#FFFFFF;
  --acc-rgb:109,59,255; --cy-rgb:43,124,149; --neon-rgb:109,59,255;
  --hair:150,136,196; --hair2:150,136,196; --ln-rgb:220,210,241;
  --surf-rgb:239,232,251; --deep-rgb:229,220,248;
  --card-a:#FFFFFF; --card-b:#FFFFFF;
  --card-bd:rgba(109,59,255,.15);
  --glass-a:rgba(255,255,255,.9); --glass-b:rgba(250,247,255,.94);
  --glass-bd:rgba(150,136,196,.3);
  --glass-top:rgba(109,59,255,.22);
  --ftext:#57527D; --ftext-dim:#625D84;
  --go-hover:#5A28EE;
  --star-op:0; --aur-op:.42;
  --led-w:2.4px; --led-op:.62;
  --led-hot:#FFFFFF; --led-warm:#A78BFA;
  /* Ô vuông bọc logo giữ nền tối ở cả hai theme: kho logo có vài cái là hình
     trắng (X, ChatGPT, CapCut), đặt lên nền sáng là mất hút. */
  --icbg:#111634;
  --pop-bg:rgba(255,255,255,.98);
  --box-bg:rgba(255,255,255,.72);
  --mq-bg:linear-gradient(90deg,#E9E0F9,#F3EDFC,#E9E0F9);
  /* Dải ảnh đầu trang con vẫn tối, nhưng ở nền sáng thì kết thúc bằng một mép
     dứt khoát chứ không tan dần vào nền, vì tan từ đen sang oải hương nhìn bẩn. */
  --shead-fade:linear-gradient(rgba(5,12,30,.38) 0%,rgba(5,12,30,.56) 44%,rgba(5,12,30,.92) 100%);
  --nav-bg:#F2ECFC;
  /* Khung hero ở nền sáng: nền đậm hơn nền trang một bậc để nó vẫn là một dải
     riêng; tia tốc độ và quầng sáng đổi sang tím đậm, không thì mất hút. */
  --hero-bg:#E6DCF8;
  --hero-sub:#7872A4;
  --ray-col:rgba(109,59,255,.16);
  --glow-a:rgba(139,92,246,.46); --glow-b:rgba(139,92,246,.26);
  --glow-c:rgba(167,139,250,.14); --glow-d:rgba(167,139,250,.05);
  --hero-fade:linear-gradient(90deg,#E6DCF8 0%,#E6DCF8 24%,rgba(230,220,248,.9) 40%,
    rgba(230,220,248,.42) 56%,rgba(230,220,248,.06) 72%,transparent 82%);
  --logo-sh:drop-shadow(0 2px 5px rgba(34,20,80,.12)) drop-shadow(0 8px 18px rgba(34,20,80,.16));
  --agent-sh:drop-shadow(0 0 30px rgba(139,92,246,.3)) drop-shadow(0 14px 30px rgba(34,20,80,.22));
  --tshadow:none;
}
/* Dải ảnh đầu trang con luôn tối vì nền nó là ảnh chụp tối. Nó khai báo lại
   token tối cho riêng mình, nên chữ bên trong không bị đảo màu theo theme. */
:root[data-theme="light"] .shead{
  --box-bg:rgba(9,18,42,.62); --icbg:rgba(4,10,26,.82); --pop-bg:rgba(10,17,40,.96);
  --text-primary:#EDF1FB; --text-secondary:#9BA6C8;
  --accent:#CFC4FF; --accent-soft:#CFC4FF; --accent-hover:#E2DBFF;
  --acc-rgb:207,196,255; --cy-rgb:126,216,236; --cyan:#7ED8EC;
  --on-accent:#0B0F1E; --line-strong:#55628F;
  --tshadow:0 1px 2px rgba(3,5,14,.95),0 3px 12px rgba(3,5,14,.8),0 10px 44px rgba(3,5,14,.82);
  /* Phải tự đặt màu chữ, không thì chữ thừa kế màu đã tính sẵn từ body theo nền
     sáng, và chữ đen sẽ nằm trên nền đen. */
  color:var(--text-primary);
}

/* ==================================================================
   THÀNH PHẦN DÙNG CHUNG: nút đổi theme, nút tròn bên phải,
   hàng logo thanh toán, dải dưới chân trang.
   Mọi trang đều nạp file này nên chỉ cần viết một lần.
   ================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- nút đổi sáng tối, nằm cạnh menu trên thanh nav ---- */
.tsw{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:transparent;color:var(--text-secondary);
  cursor:pointer;padding:0;transition:color .3s var(--ease),border-color .3s var(--ease),
  background .3s var(--ease),transform .3s var(--ease)}
.tsw:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.tsw svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tsw .i-sun{display:none}
:root[data-theme="light"] .tsw .i-sun{display:block}
:root[data-theme="light"] .tsw .i-moon{display:none}
.nav-r{display:flex;align-items:center;gap:clamp(9px,1.3vw,15px);flex:none}

/* ---- cụm nút tròn neo góc phải dưới ---- */
.fab{position:fixed;right:clamp(12px,2.2vw,26px);bottom:clamp(12px,2.2vw,26px);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.fab>*{pointer-events:auto}
.fab button{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;padding:0;
  cursor:pointer;position:relative;border:1px solid rgba(var(--acc-rgb),.34);
  background:var(--pop-bg);backdrop-filter:blur(10px);color:var(--accent);
  box-shadow:0 6px 20px rgba(3,6,16,.34);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),
             opacity .3s var(--ease),visibility .3s}
.fab button:hover{transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 8px 26px rgba(var(--acc-rgb),.34)}
.fab button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fab .msg{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fab .msg svg{stroke-width:1.9}
/* nút lên đầu trang chỉ hiện khi khách đã cuộn */
.fab .top{opacity:0;visibility:hidden;transform:translateY(8px)}
.fab.scrolled .top{opacity:1;visibility:visible;transform:none}
/* các kênh nhắn tin, xếp trên nút tin nhắn */
.fab-ch{position:absolute;bottom:calc(100% + 10px);right:0;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.fab-ch a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid transparent;position:relative;
  box-shadow:0 5px 16px rgba(3,6,16,.3);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fab-ch a:hover{transform:translateY(-2px) scale(1.04)}
.fab-ch a svg{width:21px;height:21px}
.fab-ch .c-zalo{background:#0068FF}
.fab-ch .c-mes{background:linear-gradient(45deg,#0099FF,#A033FF 60%,#FF5280)}
.fab-ch .c-tele{background:#2AABEE}
/* chú giải hiện khi rê chuột, ẩn trên thiết bị cảm ứng */
.fab .lb{position:absolute;right:calc(100% + 11px);top:50%;transform:translateY(-50%);
  white-space:nowrap;background:var(--pop-bg);border:1px solid var(--glass-bd);
  border-radius:8px;padding:6px 11px;font-size:12.5px;color:var(--text-primary);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
  box-shadow:0 6px 18px rgba(3,6,16,.3)}
.fab button:hover .lb,.fab-ch a:hover .lb{opacity:1}
@media (hover:none){.fab .lb{display:none}}
/* mở ra và đóng lại: chồng lên nhau rồi bung lên */
.fab-ch{opacity:0;visibility:hidden;transform:translateY(12px) scale(.86);transform-origin:bottom center;
  transition:opacity .26s var(--ease),transform .3s var(--ease),visibility .3s}
.fab.open .fab-ch{opacity:1;visibility:visible;transform:none}
/* nở lần lượt từ dưới lên, kênh gần nút nhất hiện trước */
.fab-ch a{transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .26s var(--ease)}
.fab .pays-gap{display:none}
.fab .msg svg.i-x{display:none}
.fab.open .msg svg.i-chat{display:none}
.fab.open .msg svg.i-x{display:block}
@media (max-width:600px){
  .fab button{width:46px;height:46px}
  .fab-ch a{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){.fab *,.fab{transition:none!important}}

/* ---- hàng logo thanh toán ở chân trang ---- */
/* Cu the hon .f3 ul va .fcols ul cua chan trang, khong thi bi bien thanh grid
   mot cot va bon logo xep doc. */
.f3 ul.pays,.fcols ul.pays,.pays{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:2px}
.pays li{display:flex;align-items:center;line-height:0}
.pays li img+img{margin-left:0}
.pays img{width:auto;display:block;opacity:.92;transition:opacity .3s var(--ease)}
.pays li:hover img{opacity:1}
.pays .sq img{height:30px}      /* logo vuông cần to hơn mới nhìn ngang bằng */
.pays .wd img{height:20px}      /* logo chữ nằm ngang */
.pays .t-light{display:none}
:root[data-theme="light"] .pays .t-dark{display:none}
:root[data-theme="light"] .pays .t-light{display:block}

/* ---- dải dưới cùng: mạng xã hội bên trái, chọn ngôn ngữ bên phải ---- */
.fend{margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid rgba(var(--hair2),.26);
  display:flex;justify-content:space-between;align-items:center;gap:14px 22px;flex-wrap:wrap}
.socs{display:flex;gap:10px}
.socs a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(var(--hair2),.4);background:var(--box-bg);
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.socs a:hover{transform:translateY(-2px);border-color:var(--accent)}
.socs svg{width:17px;height:17px}
.lang{position:relative}
.lang-b{display:flex;align-items:center;gap:8px;border:1px solid rgba(var(--hair2),.4);
  border-radius:999px;padding:8px 15px;font-family:var(--body);font-size:13px;
  color:var(--text-secondary);background:var(--box-bg);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.lang-b:hover{border-color:var(--accent);color:var(--text-primary)}
.lang-b svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:1.6}
.lang-b .ar{transition:transform .28s var(--ease);font-size:10px}
.lang[data-open="1"] .lang-b .ar{transform:rotate(180deg)}
.lang-m{position:absolute;bottom:calc(100% + 8px);right:0;min-width:206px;z-index:20;
  background:var(--pop-bg);border:1px solid var(--glass-bd);border-radius:12px;padding:5px;
  box-shadow:0 16px 44px rgba(3,6,16,.42);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
.lang[data-open="1"] .lang-m{opacity:1;visibility:visible;transform:none}
.lang-m li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border-radius:8px;font-size:13.5px}
.lang-m .cur{background:rgba(var(--acc-rgb),.13);color:var(--text-primary)}
.lang-m .cur b{color:var(--accent);font-weight:400}
.lang-m .soon{color:var(--text-secondary);opacity:.72;cursor:not-allowed}
.lang-m .soon i{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid rgba(var(--cy-rgb),.42);border-radius:999px;
  padding:3px 8px;color:var(--cyan);white-space:nowrap}
@media (max-width:520px){.fend{justify-content:center}}
/* Chua cho cum nut tron o goc phai duoi, khong thi no de len nut ngon ngu */
@media (min-width:521px){.fend{padding-right:86px}}
@media (max-width:520px){footer{padding-bottom:clamp(96px,22vw,118px)}}