/* MỚI (01/10/2026): 3 GIAO DIỆN "KIỂU KHÁC" cho khách insolar.vn (phẳng/cổ điển, không kính mờ): NES.css (~21,8 nghìn sao),
   Pico CSS (~16,9 nghìn sao), 98.css (~11,5 nghìn sao) — chỉ mô phỏng phong cách bằng CSS tự viết. Mặc định tắt; khách chọn bằng nút 🎨. */
html[data-flat] {
  --f-desk: #e5e7eb; --f-bg: #ffffff; --f-surface: #ffffff; --f-surface2: #f3f4f6; --f-text: #1f2937; --f-text2: #4b5563; --f-line: #d1d5db;
  --f-accent: #2563eb; --f-accent-text: #ffffff; --f-radius: 8px; --f-radius-lg: 12px; --f-border: 1px solid var(--f-line); --f-shadow: 0 1px 2px rgba(0,0,0,.06);
  --f-frame: 1px solid var(--f-line); --f-input-bg: #ffffff; --f-input-border: 1px solid var(--f-line); --f-input-shadow: none; --f-btn-shadow: none; --f-card-shadow: var(--f-shadow);
  --f-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-hd-bg: #ffffff; --f-hd-text: #1f2937; --f-hd-muted: #6b7280; --f-sb-bg: #f8fafc; --f-sb-text: #374151; --f-sb-muted: #6b7280; --f-sb-accent: #2563eb; --f-sb-badge: #eef2f7;
  --f-nav-bg: #e8f1fb; --f-nav-text: #0b5394; --f-th-bg: #f3f4f6; --f-th-text: #374151;
  color-scheme: light;
}
/* ---------- Pico CSS (xanh Azure, sáng, thoáng) ---------- */
html[data-theme="pico"] {
  --f-desk: #eef1f6; --f-bg: #fbfcfd; --f-surface: #ffffff; --f-surface2: #f4f6fa; --f-text: #373c44; --f-text2: #4d535d; --f-line: #dfe3eb;
  --f-accent: #0172ad; --f-accent-text: #ffffff; --f-radius: 6px; --f-radius-lg: 10px; --f-shadow: 0 1px 1px rgba(0,0,0,.02), 0 2px 8px rgba(115,130,140,.12);
  --f-input-bg: #fbfcfc; --f-input-border: 1px solid #cfd5e2;
  --f-hd-bg: #ffffff; --f-hd-text: #181c25; --f-hd-muted: #646b79; --f-sb-bg: #f7f9fc; --f-sb-text: #373c44; --f-sb-muted: #646b79; --f-sb-accent: #0172ad; --f-sb-badge: #eaeff6;
  --f-nav-bg: #e6f1f8; --f-nav-text: #015887; --f-th-bg: #f1f4f9; --f-th-text: #4d535d;
}
/* ---------- NES.css (8-bit: viền đen dày, bóng cứng, chữ mono) ---------- */
html[data-theme="nes"] {
  --f-desk: #212529; --f-bg: #f4f1e8; --f-surface: #ffffff; --f-surface2: #ece7d8; --f-text: #212529; --f-text2: #343a40; --f-line: #212529;
  --f-accent: #209cee; --f-accent-text: #ffffff; --f-radius: 0px; --f-radius-lg: 0px; --f-border: 4px solid #212529; --f-shadow: 4px 4px 0 #212529;
  --f-frame: 4px solid #212529; --f-input-bg: #ffffff; --f-input-border: 4px solid #212529; --f-btn-shadow: inset -4px -4px #0a6ebd; --f-card-shadow: 4px 4px 0 #212529;
  --f-font: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --f-hd-bg: #212529; --f-hd-text: #ffffff; --f-hd-muted: #c7cdd4; --f-sb-bg: #212529; --f-sb-text: #ffffff; --f-sb-muted: #c7cdd4; --f-sb-accent: #f7d51d; --f-sb-badge: #343a40;
  --f-nav-bg: #f7d51d; --f-nav-text: #212529; --f-th-bg: #ece7d8; --f-th-text: #212529;
}
/* ---------- 98.css (Windows 98: xám bạc, viền nổi/chìm, thanh tiêu đề navy) ---------- */
html[data-theme="win98"] {
  --f-desk: #008080; --f-bg: #c0c0c0; --f-surface: #c0c0c0; --f-surface2: #dfdfdf; --f-text: #222222; --f-text2: #222222; --f-line: #808080;
  --f-accent: #000080; --f-accent-text: #ffffff; --f-radius: 0px; --f-radius-lg: 0px; --f-border: 0 solid transparent;
  --f-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --f-frame: 0 solid transparent; --f-input-bg: #ffffff; --f-input-border: 0 solid transparent;
  --f-input-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --f-btn-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; --f-card-shadow: var(--f-shadow);
  --f-font: Tahoma, 'Segoe UI', Verdana, Arial, sans-serif;
  --f-hd-bg: linear-gradient(90deg, #000080, #1084d0); --f-hd-text: #ffffff; --f-hd-muted: #dbe7ff; --f-sb-bg: #c0c0c0; --f-sb-text: #111111; --f-sb-muted: #444444; --f-sb-accent: #000080; --f-sb-badge: #dfdfdf;
  --f-nav-bg: #000080; --f-nav-text: #ffffff; --f-th-bg: #c0c0c0; --f-th-text: #111111;
}


html[data-flat], html[data-flat] body { background: var(--f-bg) !important; color: var(--f-text); }
html[data-flat] body, html[data-flat] button, html[data-flat] input, html[data-flat] select, html[data-flat] textarea { font-family: var(--f-font) !important; }
html[data-theme="nes"] body, html[data-theme="win98"] body { letter-spacing: 0; }
html[data-flat] { --noir: var(--f-text); --ivory: var(--f-bg); --paper: var(--f-surface); --mist: var(--f-line); --gold: var(--f-accent); --olive: var(--f-accent);
  --ckh-olive: var(--f-accent); --ckh-gold: var(--f-accent); --ckh-paper: var(--f-surface); --ckh-line: var(--f-line); --ckh-text: var(--f-text); --ckh-muted: var(--f-text2); --ckh-price: #c0392b; }
html[data-theme="win98"] { --ckh-price: #800000; }

/* trang tra cứu bảo hành */
html[data-flat] .luxury-page { background: var(--f-bg) !important; }
html[data-flat] .luxury-page::before { display: none; }
html[data-flat] .luxury-brand, html[data-flat] .luxury-copy h1, html[data-flat] .luxury-copy h1 em { color: var(--f-text) !important; font-family: var(--f-font) !important; }
html[data-flat] .luxury-copy > p, html[data-flat] .luxury-promise div, html[data-flat] .luxury-nav, html[data-flat] #warrEmptyState { color: var(--f-text2) !important; }
html[data-flat] .luxury-promise strong, html[data-flat] #warrSearchForm label { color: var(--f-text) !important; }
html[data-flat] .luxury-eyebrow, html[data-flat] .card-kicker, html[data-flat] .luxury-nav span:first-child { color: var(--f-accent) !important; }
html[data-flat] .luxury-eyebrow::before { background: var(--f-accent); }
html[data-flat] .luxury-promise { border-color: var(--f-line) !important; }
html[data-flat] .luxury-wordmark { font-family: var(--f-font) !important; }
html[data-flat] .luxury-mark, html[data-flat] .ckh-logo { border-color: var(--f-accent) !important; }
html[data-flat] .luxury-footer { color: var(--f-text2) !important; }
html[data-flat] .luxury-copy h1 { font-weight: 700; }

/* thẻ, khối trắng */
html[data-flat] .warranty-card, html[data-flat] .ckh-panel, html[data-flat] #ckPanelBody .bg-white, html[data-flat] .bg-white, html[data-flat] #warrChatPanel {
  background: var(--f-surface) !important; border: var(--f-border) !important; border-radius: var(--f-radius-lg) !important; box-shadow: var(--f-card-shadow) !important; color: var(--f-text);
}
html[data-flat] .warranty-card::before { display: none; }
html[data-flat] .bg-ink-50, html[data-flat] #warrResultBox .bg-ink-50, html[data-flat] #ckPanelBody .bg-ink-50, html[data-flat] #ckPanelBody .bg-brand-50 { background: var(--f-surface2) !important; border-color: var(--f-line) !important; border-radius: var(--f-radius) !important; }
html[data-flat] .border-ink-100, html[data-flat] .border-ink-200, html[data-flat] .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--f-line) !important; }
html[data-flat] [class*="rounded-md"], html[data-flat] [class*="rounded-lg"], html[data-flat] [class*="rounded-xl"], html[data-flat] [class*="rounded-2xl"], html[data-flat] .badge, html[data-flat] .ckh-chip, html[data-flat] .ckh-cats button { border-radius: var(--f-radius) !important; }

/* cửa hàng: lớp phủ, thanh trên, thanh dưới, ô chức năng */
html[data-flat] #ckOverlay { background: var(--f-bg) !important; color: var(--f-text); }
html[data-flat] #ckOverlay > div:first-child { background: var(--f-hd-bg) !important; border-color: var(--f-line) !important; box-shadow: none !important; }
html[data-flat] #ckPanelTitle { color: var(--f-hd-text) !important; font-family: var(--f-font) !important; }
html[data-flat] #ckOverlay > div:first-child .ckh-search-box input { color: var(--f-text) !important; }
html[data-flat] #ckCloseBtn, html[data-flat] #ckBackBtn, html[data-flat] #ckMenuBtn, html[data-flat] .ckh-iconbtn { border: var(--f-border) !important; color: var(--f-hd-text) !important; background: var(--f-surface) !important; border-radius: var(--f-radius) !important; box-shadow: var(--f-btn-shadow) !important; }
html[data-flat] #ckBottomNav { background: var(--f-sb-bg) !important; border-top: var(--f-border) !important; }
html[data-flat] #ckBottomNav button { color: var(--f-sb-muted) !important; }
html[data-flat] #ckBottomNav button.ckh-nav-active { color: var(--f-accent) !important; }
html[data-theme="nes"] #ckBottomNav button.ckh-nav-active, html[data-theme="win98"] #ckBottomNav button.ckh-nav-active { color: var(--f-sb-text) !important; text-decoration: underline; }
html[data-flat] #ckBottomNav button.ckh-nav-active::before { background: var(--f-accent) !important; }
html[data-flat] #ckPanelBody [data-ckopen], html[data-flat] .ckh-sc-wrap { background: var(--f-surface) !important; border: var(--f-border) !important; border-radius: var(--f-radius) !important; box-shadow: var(--f-card-shadow) !important; }
html[data-flat] #ckPanelBody [data-ckopen] p:first-child { color: var(--f-text) !important; }
html[data-flat] #ckPanelBody [data-ckopen] p:nth-child(2) { color: var(--f-text2) !important; }
html[data-flat] #ckPanelBody [data-ckopen] > div:first-child { background: var(--f-surface2) !important; border: var(--f-border) !important; border-radius: var(--f-radius) !important; color: var(--f-accent) !important; }

/* chữ */
html[data-flat] .text-ink-900, html[data-flat] .text-ink-800, html[data-flat] .text-ink-700, html[data-flat] #ckPanelBody .text-ink-900 { color: var(--f-text) !important; }
html[data-flat] .text-ink-600, html[data-flat] .text-ink-500 { color: var(--f-text2) !important; }
html[data-flat] .text-brand-600, html[data-flat] .text-brand-700, html[data-flat] #ckPanelBody .text-brand-600, html[data-flat] .ckh-more-link, html[data-flat] .ckh-link { color: var(--f-accent) !important; }
html[data-flat] .ckh-sc-label, html[data-flat] .ckh-mini-name, html[data-flat] .ckh-pname, html[data-flat] .ckh-news-title, html[data-flat] .ckh-field, html[data-flat] .ckh-stages button, html[data-flat] .ckh-stage-ic svg { color: var(--f-text) !important; }
html[data-flat] .ckh-sec-head h3 { color: var(--f-text) !important; }
html[data-flat] .ckh-news { border-top-color: var(--f-line) !important; }
html[data-flat] .ckh-tone-rose, html[data-flat] .ckh-tone-gold, html[data-flat] .ckh-tone-amber, html[data-flat] .ckh-tone-olive, html[data-flat] .ckh-tone-plum, html[data-flat] .ckh-tone-sky { background: var(--f-surface2) !important; color: var(--f-accent) !important; border: var(--f-border); border-radius: var(--f-radius) !important; }

/* nút + ô nhập */
html[data-flat] #warrSearchForm button[type="submit"], html[data-flat] #ckPanelBody button.bg-brand-600, html[data-flat] .bg-brand-600, html[data-flat] .ckh-btn-primary, html[data-flat] .ckh-cats button.on, html[data-flat] .ckh-pd-buy, html[data-flat] .ckbot-buy, html[data-flat] #warrChatBubble, html[data-flat] #ckCartFab {
  background: var(--f-accent) !important; color: var(--f-accent-text) !important; border: var(--f-border) !important; border-radius: var(--f-radius) !important; box-shadow: var(--f-btn-shadow) !important;
}
html[data-theme="win98"] #warrSearchForm button[type="submit"], html[data-theme="win98"] .bg-brand-600, html[data-theme="win98"] .ckh-btn-primary, html[data-theme="win98"] .ckh-pd-buy, html[data-theme="win98"] .ckbot-buy, html[data-theme="win98"] #warrChatBubble, html[data-theme="win98"] #ckCartFab, html[data-theme="win98"] .ckh-cats button.on { background: #c0c0c0 !important; color: #000 !important; }
html[data-flat] #warrChatBubble, html[data-flat] #ckCartFab { border-radius: var(--f-radius-lg) !important; }
html[data-flat] #warrChatPanel > div:first-child, html[data-flat] .ckbot-head { background: var(--f-hd-bg) !important; color: var(--f-hd-text) !important; }
html[data-flat] .ckh-pd-bar { background: var(--f-sb-bg) !important; border-top: var(--f-border) !important; }
html[data-flat] .ckh-pd-cart, html[data-flat] #warrScanBtn { background: var(--f-surface) !important; border: var(--f-border) !important; border-radius: var(--f-radius) !important; color: var(--f-text) !important; box-shadow: var(--f-btn-shadow) !important; }
html[data-flat] .ckh-pd-bar button { border-radius: var(--f-radius) !important; }
html[data-flat] input:not([type="checkbox"]):not([type="radio"]), html[data-flat] select, html[data-flat] textarea, html[data-flat] #warrSerialInput, html[data-flat] #ckPanelBody input, html[data-flat] #ckPanelBody textarea, html[data-flat] #ckPanelBody select, html[data-flat] .ckh-search-box input {
  background: var(--f-input-bg) !important; color: var(--f-text) !important; border: var(--f-input-border) !important; box-shadow: var(--f-input-shadow) !important; border-radius: var(--f-radius) !important;
}
html[data-flat] input:focus, html[data-flat] select:focus, html[data-flat] textarea:focus { outline: 2px solid var(--f-accent) !important; outline-offset: 1px; box-shadow: none !important; }
html[data-flat] .warr-chat-bubble-assistant { background: var(--f-surface2) !important; color: var(--f-text) !important; }
html[data-flat] .warr-chat-bubble-user { background: var(--f-accent) !important; color: var(--f-accent-text) !important; }
html[data-theme="win98"] .warr-chat-bubble-user { background: #000080 !important; color: #fff !important; }
html[data-flat] .ckh-slide-voucher, html[data-flat] .ckh-slide-lucky, html[data-flat] .ckh-me-head { background: var(--f-accent) !important; border: var(--f-border); border-radius: var(--f-radius) !important; }
html[data-flat] #ckPanelBody .ck-product-image-stage, html[data-flat] #ckPanelBody .ck-product-image-stage-sm { border-color: var(--f-line) !important; }