/* ==========================================================================
   WiseEye theme · thân thiện – chuyên nghiệp – thương hiệu
   Màu: xanh #0078B8 (chủ đạo) · đỏ #E82830 (nhấn, báo giá). Mọi màu / bo góc / cỡ chữ lấy từ biến --we-*,
   chỉnh trong admin: Giao diện → Theme → Tùy biến.
   ========================================================================== */

/* ---------- Font (tự host, đủ dấu tiếng Việt) ---------- */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/be-vietnam-pro-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/be-vietnam-pro-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/be-vietnam-pro-vietnamese-800-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/be-vietnam-pro-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Biến thiết kế ---------- */
:root {
    --we-primary: #0078b8; --we-primary-dark: #005688; --we-accent: #e82830; --we-dark: #0a1a2f; --we-soft: #f3f7fb;
    --we-text: #0d1b2a; --we-text-2: #4a5b70; --we-text-3: #8496ab; --we-line: #e3eaf2; --we-line-2: #d2dce8; --we-surface: #fff;
    --we-star: #f5a524; --we-ok: #12a150; --we-zalo: #0068ff;
    --we-fs: 16px; --we-container: 1240px; --we-radius: 16px;
    --we-r-sm: calc(var(--we-radius) * .62); --we-r-lg: calc(var(--we-radius) * 1.5); --we-btn-r: calc(var(--we-radius) * .7);
    --we-ps: color-mix(in srgb, var(--we-primary) 9%, #fff);
    --we-ps-2: color-mix(in srgb, var(--we-primary) 16%, #fff);
    --we-as: color-mix(in srgb, var(--we-accent) 9%, #fff);
    --we-grad: linear-gradient(135deg, var(--we-primary) 0%, var(--we-primary-dark) 100%);
    --we-grad-accent: linear-gradient(135deg, var(--we-accent), color-mix(in srgb, var(--we-accent) 72%, #000));
    --we-grad-brand: linear-gradient(100deg, var(--we-primary), color-mix(in srgb, var(--we-primary) 55%, var(--we-accent)), var(--we-accent));
    --we-shadow-sm: 0 1px 2px rgba(13, 27, 42, .05), 0 3px 10px -3px rgba(13, 27, 42, .07);
    --we-shadow: 0 2px 6px rgba(13, 27, 42, .04), 0 18px 40px -14px rgba(13, 40, 80, .2);
    --we-shadow-lg: 0 30px 70px -20px rgba(13, 40, 80, .32);
    --we-shadow-p: 0 12px 26px -10px color-mix(in srgb, var(--we-primary) 70%, transparent);
    --we-shadow-a: 0 12px 26px -10px color-mix(in srgb, var(--we-accent) 75%, transparent);
    --we-ease: cubic-bezier(.22, 1, .36, 1); --we-spring: cubic-bezier(.34, 1.56, .64, 1);
    --we-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --we-header-h: 78px;
}
[data-font="system"] { --we-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
[data-buttons="pill"] { --we-btn-r: 999px; }
[data-buttons="square"] { --we-btn-r: 4px; }

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--we-header-h) + 20px); }
body { margin: 0; font-family: var(--we-font); font-size: var(--we-fs); line-height: 1.7; color: var(--we-text); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--we-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--we-primary-dark); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0 0 .5em; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--we-text); }
h1, .h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; }
h2, .h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.45rem); font-weight: 800; letter-spacing: -.025em; }
h3, .h3 { font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); }
h4, .h4 { font-size: 1.15rem; } h5, .h5 { font-size: 1.05rem; } h6, .h6 { font-size: .95rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--we-line); margin: 2rem 0; }
::selection { background: var(--we-primary); color: #fff; }
:focus-visible { outline: 2px solid var(--we-primary); outline-offset: 3px; border-radius: 4px; }
mark { background: color-mix(in srgb, var(--we-star) 30%, #fff); padding: 0 2px; border-radius: 3px; }
.i { width: 1em; height: 1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -.125em; }
.i-text { display: inline-block; line-height: 1; }
.we-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--we-primary); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.we-skip:focus { top: 12px; color: #fff; }

.we-container, .container { width: 100%; max-width: calc(var(--we-container) + 40px); margin-inline: auto; padding-inline: 20px; }
.we-narrow, .content-narrow { max-width: 820px; margin-inline: auto; }
.we-section, .section { position: relative; padding: clamp(56px, 3vw + 40px, 104px) 0; overflow-x: clip; }   /* họa tiết trang trí (khung ảnh, vệt màu) không làm tràn ngang ở màn hẹp */
.we-section--tight { padding: clamp(36px, 2vw + 24px, 64px) 0; }
.we-soft, .bg-light, .bg-soft { background: var(--we-soft) !important; }
.we-dark { background: var(--we-dark); color: #b8c6d8; }
.we-dark h1, .we-dark h2, .we-dark h3, .we-dark h4 { color: #fff; }
.bg-primary { background: var(--we-grad) !important; color: #fff; }
.bg-primary h2, .bg-primary .prose, .bg-primary .section-title { color: #fff; }
.preview-banner { background: #ffc94d; color: #000; text-align: center; font-weight: 600; padding: .45rem; font-size: .9rem; position: relative; z-index: 1001; }

/* Tiêu đề khu vực */
.we-head { max-width: 760px; margin: 0 auto clamp(30px, 3.4vw, 52px); text-align: center; }
.we-head--left { margin-left: 0; text-align: left; }
.we-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; text-align: left; }
.we-head--row > div { max-width: 680px; }
.we-head h2 { margin-bottom: .35em; }
.we-head p { color: var(--we-text-2); font-size: 1.05rem; margin: 0; }
.we-dark .we-head p { color: #9fb2c9; }
.we-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--we-primary); background: var(--we-ps); padding: 6px 14px 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.we-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--we-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--we-accent) 22%, transparent); }
.we-dark .we-eyebrow { background: rgba(255, 255, 255, .08); color: #8fd0ff; }
.we-grad-text { background: var(--we-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-title { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.45rem); font-weight: 800; margin-bottom: .5em; }
.section-sub { color: var(--we-text-2); max-width: 720px; margin: 0 auto 2.5rem; }

/* ---------- Nút ---------- */
.we-btn, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .8em 1.5em; border-radius: var(--we-btn-r);
    border: 1.5px solid transparent; background: transparent; color: var(--we-text); font-weight: 650; font-size: .95rem; line-height: 1.2;
    text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; vertical-align: middle;
    transition: transform .25s var(--we-ease), box-shadow .25s, background-color .25s, color .2s, border-color .2s;
}
.we-btn:active, .btn:active { transform: scale(.97); }
.we-btn .i, .btn .i { font-size: 1.1em; transition: transform .25s var(--we-ease); }
.we-btn:hover .i-move { transform: translateX(4px); }
.we-btn--primary, .btn-primary { background: var(--we-grad); color: #fff; box-shadow: var(--we-shadow-p); }
.we-btn--accent { background: var(--we-grad-accent); color: #fff; box-shadow: var(--we-shadow-a); }
.we-btn--primary:hover, .btn-primary:hover, .we-btn--accent:hover { color: #fff; transform: translateY(-2px); }
.we-btn--primary:hover, .btn-primary:hover { box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--we-primary) 75%, transparent); }
.we-btn--accent:hover { box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--we-accent) 80%, transparent); }
.we-btn--primary::after, .btn-primary::after, .we-btn--accent::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%); transform: translateX(-130%); transition: transform .8s var(--we-ease); }
.we-btn--primary:hover::after, .btn-primary:hover::after, .we-btn--accent:hover::after { transform: translateX(130%); }
.we-btn--outline, .btn-outline-primary, .btn-outline-secondary { background: #fff; border-color: var(--we-line-2); color: var(--we-text); }
.we-btn--outline:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover { border-color: var(--we-primary); color: var(--we-primary); transform: translateY(-2px); box-shadow: var(--we-shadow-sm); }
.we-btn--soft { background: var(--we-ps); color: var(--we-primary); }
.we-btn--soft:hover { background: var(--we-primary); color: #fff; }
.we-btn--light, .btn-light { background: #fff; color: var(--we-text); box-shadow: var(--we-shadow-sm); }
.we-btn--light:hover, .btn-light:hover { color: var(--we-primary); transform: translateY(-2px); }
.we-btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); }
.we-btn--ghost:hover { background: #fff; color: var(--we-text); border-color: #fff; }
.we-btn--zalo { background: var(--we-zalo); color: #fff; }
.we-btn--zalo:hover { color: #fff; filter: brightness(1.08); transform: translateY(-2px); }
.we-btn--lg, .btn-lg { padding: 1em 1.85em; font-size: 1.02rem; }
.we-btn--sm, .btn-sm { padding: .55em 1.05em; font-size: .85rem; }
.we-btn--block, .w-100 { width: 100%; }
.btn-link { padding: 0; border: 0; background: none; color: var(--we-primary); font-weight: 600; box-shadow: none; }
.btn-link:hover { color: var(--we-primary-dark); transform: none; }
.we-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.we-link-arrow .i { transition: transform .25s var(--we-ease); }
.we-link-arrow:hover .i { transform: translateX(4px); }
.btn-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--we-soft); position: relative; }
.btn-close::before, .btn-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--we-text-2); rotate: 45deg; translate: -50% -50%; }
.btn-close::after { rotate: -45deg; }

/* ---------- Lớp tương thích (cho các phần dùng chung của lõi: form, đánh giá, báo giá…) ---------- */
.row { --gx: 24px; --gy: 0px; display: flex; flex-wrap: wrap; margin-inline: calc(var(--gx) / -2); row-gap: var(--gy); }
.row > * { flex: 0 0 auto; width: 100%; max-width: 100%; padding-inline: calc(var(--gx) / 2); }
.g-2 { --gx: 8px; --gy: 8px; } .g-3 { --gx: 16px; --gy: 16px; } .g-4 { --gx: 24px; --gy: 24px; } .g-5 { --gx: 40px; --gy: 40px; }
.col { flex: 1 0 0; } .col-6 { width: 50%; } .col-12 { width: 100%; }
@media (min-width: 576px) { .col-sm-6 { width: 50%; } }
@media (min-width: 768px) { .col-md { flex: 1 0 0; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.333%; } .col-md-6 { width: 50%; } .col-md-8 { width: 66.666%; } }
@media (min-width: 992px) { .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.333%; } .col-lg-5 { width: 41.666%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.333%; } .col-lg-8 { width: 66.666%; } .col-lg-9 { width: 75%; } .flex-lg-row-reverse { flex-direction: row-reverse; } }
.d-none { display: none !important; } .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } .d-flex { display: flex !important; } .d-grid { display: grid !important; }
.flex-wrap { flex-wrap: wrap; } .flex-column { flex-direction: column; } .flex-fill { flex: 1 1 auto; }
.align-items-center { align-items: center; } .align-items-start { align-items: flex-start; } .align-middle { vertical-align: middle; }
.justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .justify-content-end { justify-content: flex-end; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; }
.ms-auto { margin-left: auto !important; } .me-auto { margin-right: auto !important; } .mx-auto { margin-inline: auto !important; }
.m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 16px !important; } .mt-4 { margin-top: 24px !important; } .mt-5 { margin-top: 48px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 16px !important; } .mb-4 { margin-bottom: 24px !important; } .mb-5 { margin-bottom: 48px !important; }
.my-3 { margin-block: 16px !important; } .py-3 { padding-block: 16px !important; } .py-5 { padding-block: 48px !important; } .p-4 { padding: 24px !important; } .px-0 { padding-inline: 0 !important; } .pb-2 { padding-bottom: 8px !important; }
.text-center { text-align: center !important; } .text-start { text-align: left !important; } .text-end { text-align: right !important; }
.text-muted { color: var(--we-text-3) !important; } .text-danger { color: var(--we-accent) !important; } .text-white { color: #fff !important; } .text-primary { color: var(--we-primary) !important; }
.small, small { font-size: .875em; } .lead { font-size: 1.15rem; color: var(--we-text-2); } .fw-bold { font-weight: 700 !important; } .fw-semibold { font-weight: 600 !important; }
.display-1 { font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 800; line-height: 1; }
.img-fluid { max-width: 100%; height: auto; } .rounded { border-radius: var(--we-r-sm) !important; } .rounded-circle { border-radius: 50% !important; }
.shadow-sm { box-shadow: var(--we-shadow-sm) !important; } .border-0 { border: 0 !important; } .border-bottom { border-bottom: 1px solid var(--we-line) !important; }
.w-auto { width: auto !important; } .float-end { float: right; } .list-unstyled { list-style: none; padding-left: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ratio { position: relative; width: 100%; }
.ratio::before { content: ""; display: block; padding-top: var(--r, 56.25%); }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ratio-16x9 { --r: 56.25%; } .ratio-4x3 { --r: 75%; }
.card { position: relative; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); overflow: hidden; }
.card-body { padding: 20px; }
.badge { display: inline-block; padding: .3em .65em; font-size: .75em; font-weight: 700; border-radius: 999px; background: var(--we-ps); color: var(--we-primary); }
.table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--we-line); text-align: left; vertical-align: top; }
.table thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--we-text-3); font-weight: 700; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.alert { padding: 14px 18px; border-radius: var(--we-r-sm); margin-bottom: 16px; font-weight: 500; border: 1px solid transparent; }
.alert-success { background: color-mix(in srgb, var(--we-ok) 10%, #fff); color: color-mix(in srgb, var(--we-ok) 80%, #000); border-color: color-mix(in srgb, var(--we-ok) 22%, #fff); }
.alert-danger { background: var(--we-as); color: color-mix(in srgb, var(--we-accent) 85%, #000); border-color: color-mix(in srgb, var(--we-accent) 22%, #fff); }
.alert-warning { background: #fff8e6; color: #8a5a00; border-color: #ffe4a3; }

/* Form */
.form-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--we-text); }
.form-control, .form-select {
    display: block; width: 100%; padding: .78em 1em; border: 1.5px solid var(--we-line-2); border-radius: var(--we-r-sm); background: #fff; color: var(--we-text);
    font-size: .95rem; line-height: 1.4; transition: border-color .2s, box-shadow .2s; appearance: none;
}
.form-control::placeholder { color: var(--we-text-3); }
.form-control:focus, .form-select:focus { border-color: var(--we-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--we-primary) 14%, transparent); outline: 0; }
.form-control-lg { padding: .95em 1.2em; font-size: 1.05rem; } .form-control-sm, .form-select-sm { padding: .5em .8em; font-size: .85rem; }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-select { padding-right: 2.6em; background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238496ab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 1em center / 12px 12px; }
.form-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.form-check-inline { display: inline-flex; margin-right: 18px; }
.form-check-input { width: 18px; height: 18px; margin: .2em 0 0; accent-color: var(--we-primary); flex: none; cursor: pointer; }
.form-check-label { cursor: pointer; }
.form-switch .form-check-input { appearance: none; width: 40px; height: 23px; border-radius: 999px; background: var(--we-line-2); position: relative; transition: background .25s; margin-top: .05em; }
.form-switch .form-check-input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s var(--we-spring); }
.form-switch .form-check-input:checked { background: var(--we-primary); }
.form-switch .form-check-input:checked::before { transform: translateX(17px); }
.form-text { font-size: .8rem; color: var(--we-text-3); margin-top: 5px; }
.invalid-feedback { display: none; color: var(--we-accent); font-size: .82rem; margin-top: 5px; }
.invalid-feedback:not(:empty), .is-invalid ~ .invalid-feedback { display: block; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--we-accent); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cms-form .btn-primary, .contact-form .btn-primary { min-width: 200px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

/* ==========================================================================
   ĐẦU TRANG
   ========================================================================== */
.we-topbar { background: var(--we-dark); color: #a9bad0; font-size: .82rem; position: relative; z-index: 1001; }
.we-topbar .we-container { display: flex; align-items: center; gap: 22px; min-height: 40px; }
.we-topbar a { color: #d2deec; }
.we-topbar a:hover { color: #fff; }
.we-topbar__msg { display: flex; align-items: center; gap: 9px; margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.we-topbar__msg::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--we-accent); flex: none; animation: we-blink 2s infinite; }
.we-topbar__items { display: flex; align-items: center; gap: 20px; }
.we-topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.we-topbar__item .i { color: #7fc4ff; }
.we-topbar__menu { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
[data-topbar="false"] .we-topbar { display: none; }
@keyframes we-blink { 50% { opacity: .35; } }

.we-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: background .35s, box-shadow .35s, border-color .35s; }
.we-header.is-scrolled { box-shadow: 0 10px 30px -14px rgba(13, 40, 80, .22); border-bottom-color: var(--we-line); background: rgba(255, 255, 255, .94); }
.we-header__inner { display: flex; align-items: center; gap: 22px; height: var(--we-header-h); transition: height .35s var(--we-ease); }
.we-header.is-scrolled .we-header__inner { height: 66px; }
.we-logo { display: flex; align-items: center; flex-shrink: 0; gap: 10px; }
.we-logo img { height: 46px; width: auto; transition: height .35s var(--we-ease); }
.is-scrolled .we-logo img { height: 40px; }
.we-logo__text { font-weight: 800; font-size: 1.35rem; color: var(--we-text); letter-spacing: -.03em; }

/* Menu chiếm phần còn lại giữa logo và các nút (min-width: 0 → không bao giờ đẩy nút ra ngoài); mục không đủ chỗ dồn vào "Mục khác" (wiseeye.js).
   Trước khi JS đo xong: cắt phần thừa thay vì tràn. */
.we-nav { margin-left: auto; flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }
.we-nav:not(.is-fit) > ul { overflow: hidden; }
.we-nav .is-hidden { display: none !important; }
button.we-nav__link { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.we-dropdown a.we-dropdown__sub { padding-left: 26px; font-size: .88rem; color: var(--we-text-2, var(--we-text)); }
.we-dropdown a.active { color: var(--we-primary); }
/* Hộp xổ sát mép màn hình: canh theo mép mục thay vì giữa (không tràn ngang). */
.we-dropdown.we-dropdown--end { left: auto; right: 0; translate: 0 10px; }
.we-dropdown.we-dropdown--start { left: 0; translate: 0 10px; }
.we-nav__item:hover > .we-dropdown:is(.we-dropdown--end, .we-dropdown--start), .we-nav__item:focus-within > .we-dropdown:is(.we-dropdown--end, .we-dropdown--start) { translate: 0 0; }
.we-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.we-nav__item { position: relative; }
.we-nav__link { position: relative; display: flex; align-items: center; gap: 5px; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem; color: var(--we-text); white-space: nowrap; }
.we-nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2.5px; border-radius: 2px; background: var(--we-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--we-ease); }
.we-nav__item:hover > .we-nav__link, .we-nav__link.active { color: var(--we-primary); }
.we-nav__item:hover > .we-nav__link::after, .we-nav__link.active::after { transform: scaleX(1); }
.we-nav__link .i { font-size: .62em; opacity: .7; transition: transform .3s var(--we-ease); }
.we-nav__item:hover > .we-nav__link .i { transform: rotate(180deg); }
.we-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 10px; min-width: 250px; width: max-content; max-width: 380px; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); box-shadow: var(--we-shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transition: opacity .25s, translate .35s var(--we-ease), visibility .25s; z-index: 20; }
.we-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.we-nav__item:hover > .we-dropdown, .we-nav__item:focus-within > .we-dropdown { opacity: 1; visibility: visible; translate: -50% 0; }
.we-dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--we-text); font-weight: 500; font-size: .92rem; transition: background .2s, color .2s, padding .25s var(--we-ease); }
.we-dropdown a .i { opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s var(--we-ease); color: var(--we-primary); }
.we-dropdown a:hover { background: var(--we-ps); color: var(--we-primary); padding-left: 16px; }
.we-dropdown a:hover .i { opacity: 1; transform: none; }
.we-dropdown--mega { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 2px 6px; min-width: 540px; padding: 12px; }
.we-dropdown--mega .we-dropdown__all { grid-column: 1 / -1; border-top: 1px solid var(--we-line); margin-top: 6px; padding-top: 10px; }
.we-dropdown--mega .we-dropdown__all a { color: var(--we-primary); font-weight: 650; }

.we-header__actions { display: flex; align-items: center; gap: 4px; }
.we-icon-btn { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 0; background: transparent; color: var(--we-text); display: grid; place-items: center; font-size: 1.15rem; transition: background .2s, color .2s, transform .2s; }
.we-icon-btn:hover { background: var(--we-ps); color: var(--we-primary); }
.we-icon-btn:active { transform: scale(.92); }
.we-count { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--we-accent); color: #fff; font-size: .68rem; font-weight: 700; line-height: 15px; text-align: center; border: 2px solid #fff; transform: scale(0); transition: transform .35s var(--we-spring); }
.we-count.show { transform: scale(1); }
.we-count.bump { animation: we-bump .5s var(--we-spring); }
@keyframes we-bump { 40% { transform: scale(1.35); } }
.we-header__cta { margin-left: 8px; }
.we-burger { display: none; }
[data-show-quote="true"] .quote-fab { display: none !important; }

/* Đầu trang trong suốt trên banner tối (trang chủ) */
html[data-header-style="overlay"]:not([data-header-layout="tool"]) body.we-hero-dark .we-header:not(.is-scrolled) { position: fixed; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-header-style="overlay"]:not([data-header-layout="tool"]) body.we-hero-dark .we-header:not(.is-scrolled) .we-nav__link,
html[data-header-style="overlay"]:not([data-header-layout="tool"]) body.we-hero-dark .we-header:not(.is-scrolled) .we-icon-btn,
html[data-header-style="overlay"]:not([data-header-layout="tool"]) body.we-hero-dark .we-header:not(.is-scrolled) .we-logo__text { color: #fff; }
html[data-header-style="overlay"]:not([data-header-layout="tool"]) body.we-hero-dark .we-header:not(.is-scrolled) .we-logo img { background: rgba(255, 255, 255, .95); padding: 6px 10px; border-radius: 12px; height: 50px; }
html[data-header-style="overlay"]:not([data-header-layout="tool"]) body.we-hero-dark .we-header:not(.is-scrolled) .we-icon-btn:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 1139.98px) {
    .we-nav, .we-header__cta { display: none; }
    .we-burger { display: grid; }
    .we-header__actions { margin-left: auto; }
    .we-topbar__items .we-hide-md { display: none; }
}
@media (max-width: 640px) {
    :root { --we-header-h: 64px; }
    .we-topbar { display: none; }
    .we-logo img { height: 38px; }
}

/* Menu điện thoại */
.we-drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; overflow: hidden; transition: visibility .4s; }   /* overflow: tấm menu nằm ngoài màn hình không tạo thanh cuộn ngang */
.we-drawer.open { visibility: visible; transition-duration: 0s; }   /* hiện ngay khi mở để focus() vào được ngay – đóng vẫn trễ .4s */
.we-drawer__scrim { position: absolute; inset: 0; background: rgba(10, 26, 47, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.we-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(390px, 90vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .45s var(--we-ease); box-shadow: var(--we-shadow-lg); }
.we-drawer.open .we-drawer__scrim { opacity: 1; }
.we-drawer.open .we-drawer__panel { transform: none; }
.we-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--we-line); }
.we-drawer__head img { height: 36px; width: auto; }
.we-drawer__body { flex: 1; overflow-y: auto; padding: 10px 12px 24px; }
.we-mnav { list-style: none; margin: 0; padding: 0; }
.we-mnav a, .we-mnav summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px; border-radius: 12px; color: var(--we-text); font-weight: 600; cursor: pointer; list-style: none; }
.we-mnav summary::-webkit-details-marker { display: none; }
.we-mnav a:hover, .we-mnav summary:hover, .we-mnav a.active { background: var(--we-ps); color: var(--we-primary); }
.we-mnav details[open] > summary .i { transform: rotate(180deg); }
.we-mnav summary .i { transition: transform .3s var(--we-ease); font-size: .8em; }
.we-mnav ul { list-style: none; margin: 2px 0 6px 14px; padding: 0 0 0 14px; border-left: 2px solid var(--we-line); }
.we-mnav ul a { font-weight: 500; font-size: .93rem; padding: 10px 12px; }
.we-drawer__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--we-line); display: grid; gap: 10px; background: var(--we-soft); }
.we-drawer__contact { display: grid; gap: 8px; font-size: .9rem; color: var(--we-text-2); }
.we-drawer__contact a { display: flex; align-items: center; gap: 10px; color: var(--we-text); font-weight: 600; }
.we-drawer__contact .i { color: var(--we-primary); }
html.we-lock { overflow: hidden; }

/* Ô tìm kiếm toàn màn hình */
.we-search { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 20px 20px; background: rgba(10, 26, 47, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.we-search.open { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }   /* visibility chuyển ngay: ô nhập focus được kể cả khi chưa kịp vẽ khung hình nào */
.we-search__box { width: min(720px, 100%); background: #fff; border-radius: var(--we-r-lg); box-shadow: var(--we-shadow-lg); padding: 22px 24px 20px; transform: translateY(-18px) scale(.98); transition: transform .45s var(--we-spring); }
.we-search.open .we-search__box { transform: none; }
.we-search form { position: relative; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--we-line); padding-bottom: 12px; transition: border-color .2s; }
.we-search form:focus-within { border-bottom-color: var(--we-primary); }
.we-search form > .i { font-size: 1.4rem; color: var(--we-primary); }
.we-search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: clamp(1.1rem, 1rem + .8vw, 1.45rem); font-weight: 500; background: none; }
.we-search__hint { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; color: var(--we-text-3); }
.we-search__hint a { background: var(--we-soft); color: var(--we-text-2); padding: 6px 12px; border-radius: 999px; font-weight: 500; }
.we-search__hint a:hover { background: var(--we-ps); color: var(--we-primary); }
.we-search .search-suggest { top: calc(100% + 10px); }

/* ==========================================================================
   DẢI TIÊU ĐỀ TRANG + BREADCRUMB
   ========================================================================== */
.we-pagehead { position: relative; overflow: hidden; padding: clamp(30px, 3vw + 14px, 60px) 0 clamp(28px, 2.6vw + 12px, 52px); border-bottom: 1px solid var(--we-line);
    background: radial-gradient(700px 260px at 90% -40%, color-mix(in srgb, var(--we-primary) 16%, transparent), transparent 70%),
                radial-gradient(500px 220px at 0% 140%, color-mix(in srgb, var(--we-accent) 9%, transparent), transparent 70%),
                linear-gradient(180deg, var(--we-soft), #fff); }
.we-pagehead::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: linear-gradient(var(--we-line) 1px, transparent 1px), linear-gradient(90deg, var(--we-line) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 85% 0%, #000, transparent 60%); mask-image: radial-gradient(ellipse at 85% 0%, #000, transparent 60%); }
.we-pagehead .we-container { position: relative; z-index: 1; }
.we-pagehead h1 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem); margin: 0; }
.we-pagehead p { color: var(--we-text-2); max-width: 760px; margin: 12px 0 0; font-size: 1.05rem; }
.we-pagehead--center { text-align: center; }
.we-pagehead--center p { margin-inline: auto; }
.we-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .84rem; color: var(--we-text-3); }
.we-crumbs a { color: var(--we-text-2); font-weight: 500; }
.we-crumbs a:hover { color: var(--we-primary); }
.we-crumbs .i { font-size: .7em; opacity: .6; }
.we-crumbs a .i { font-size: 1.05em; opacity: .8; vertical-align: -.1em; }
.we-crumbs li:last-child { color: var(--we-text); font-weight: 600; max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.we-pagehead--center .we-crumbs { justify-content: center; }
/* Breadcrumb trang thường (Tùy biến → "Hiện breadcrumb ở trang thường"): dải mảnh dưới menu, hoặc trong Banner đầu trang */
.we-crumbbar { padding: 12px 0; background: var(--we-soft); border-bottom: 1px solid var(--we-line); }
.we-crumbbar .we-crumbs { margin: 0; }
.we-hero .we-crumbs { margin-bottom: 18px; }
.we-hero.text-center .we-crumbs, .we-hero--center .we-crumbs { justify-content: center; }
.we-hero--center .we-crumbs, .we-hero--center .we-crumbs a { color: rgba(255, 255, 255, .78); }
.we-hero--center .we-crumbs a:hover, .we-hero--center .we-crumbs li:last-child { color: #fff; }

/* ==========================================================================
   CHÂN TRANG
   ========================================================================== */
.we-prefooter { position: relative; z-index: 2; margin-bottom: -96px; padding-top: 24px; }
.we-prefooter__box { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(28px, 3vw + 12px, 48px) clamp(24px, 3vw + 12px, 56px); border-radius: var(--we-r-lg); background: var(--we-grad); color: #fff; box-shadow: var(--we-shadow-lg); }
.we-prefooter__box::before { content: ""; position: absolute; width: 380px; height: 380px; right: -110px; top: -190px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .07); }
.we-prefooter__box::after { content: ""; position: absolute; width: 220px; height: 220px; left: 30%; bottom: -150px; border-radius: 50%; background: color-mix(in srgb, var(--we-accent) 55%, transparent); filter: blur(60px); opacity: .55; }
.we-prefooter__box > * { position: relative; z-index: 1; }
.we-prefooter h2 { color: #fff; font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem); margin: 0 0 6px; }
.we-prefooter p { margin: 0; opacity: .9; }
.we-prefooter__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.we-prefooter .we-btn--light { color: var(--we-primary-dark); font-weight: 700; }

.we-footer { position: relative; background: var(--we-dark); color: #9db0c7; padding: 80px 0 0; overflow: hidden; }
.we-footer.has-cta { padding-top: 160px; }
.we-footer::before { content: ""; position: absolute; width: 640px; height: 640px; right: -260px; top: -120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--we-primary) 30%, transparent), transparent 65%); pointer-events: none; }
.we-footer .we-container { position: relative; }
.we-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 40px; padding-bottom: 52px; }
.we-footer__logo { display: inline-flex; background: #fff; padding: 10px 14px; border-radius: 14px; margin-bottom: 18px; }
.we-footer__logo img { height: 40px; width: auto; }
/* Kiểu logo chân trang (Tùy biến → Chân trang): nền trắng (mặc định) / đổi thành trắng / giữ màu không nền; tải logo riêng → luôn không nền. */
[data-footer-logo-style="white"] .we-footer__logo, [data-footer-logo-style="none"] .we-footer__logo, .we-footer__logo.is-own { background: none; padding: 0; border-radius: 0; }
[data-footer-logo-style="white"] .we-footer__logo:not(.is-own) img { filter: brightness(0) invert(1); }
.we-footer__brand-text { color: #fff; font-size: 1.4rem; font-weight: 800; margin-bottom: 14px; }
.we-footer p { font-size: .93rem; line-height: 1.75; }
.we-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 20px; position: relative; padding-bottom: 12px; }
.we-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--we-accent); }
.we-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.we-footer a { color: #b9c8da; font-size: .93rem; transition: color .2s, padding .25s var(--we-ease); }
.we-footer__links a:hover { color: #fff; padding-left: 5px; }
.we-footer__contact li { display: flex; gap: 12px; font-size: .93rem; }
.we-footer__contact .i { flex: none; margin-top: 4px; color: #6fc0ff; }
.we-footer__contact a:hover { color: #fff; }
.we-social { display: flex; gap: 10px; margin-top: 20px; }
.we-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: #fff; font-size: 1.05rem; transition: background .25s, transform .25s var(--we-spring); }
.we-social a:hover { background: var(--we-primary); color: #fff; transform: translateY(-3px); }
.we-social .we-zalo-txt { font-size: .7rem; font-weight: 800; }
.we-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 20px 0 calc(20px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; font-size: .85rem; }
.we-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.we-footer__bottom a { font-size: .85rem; }

.we-totop { position: fixed; right: 18px; bottom: 90px; z-index: 1035; width: 44px; height: 44px; border-radius: 14px; border: 0; background: #fff; color: var(--we-primary); box-shadow: var(--we-shadow); display: grid; place-items: center; font-size: 1.1rem; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s, transform .35s var(--we-spring), background .2s, color .2s; }
.we-totop.show { opacity: 1; transform: none; pointer-events: auto; }
.we-totop:hover { background: var(--we-primary); color: #fff; }
.we-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1002; background: var(--we-grad-brand); transform-origin: left; transform: scaleX(0); }

@media (max-width: 991.98px) {
    .we-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .we-prefooter__box { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .we-footer__grid { grid-template-columns: 1fr; }
    .we-footer__bottom { justify-content: center; text-align: center; }
}

/* ==========================================================================
   HIỆU ỨNG XUẤT HIỆN (bật / tắt trong Tùy biến)
   ========================================================================== */
.js[data-animations="true"] .we-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--we-ease), transform .9s var(--we-ease); transition-delay: var(--d, 0s); }
.js[data-animations="true"] .we-reveal.from-left { transform: translateX(-34px); }
.js[data-animations="true"] .we-reveal.from-right { transform: translateX(34px); }
.js[data-animations="true"] .we-reveal.zoom { transform: scale(.94); }
.js[data-animations="true"] .we-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .we-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   BLOCK: BANNER (HERO)
   ========================================================================== */
.we-hero { position: relative; overflow: hidden; isolation: isolate;
    background: radial-gradient(1100px 620px at 88% -12%, color-mix(in srgb, var(--we-primary) 17%, transparent), transparent 62%),
                radial-gradient(760px 520px at -12% 112%, color-mix(in srgb, var(--we-accent) 11%, transparent), transparent 60%),
                linear-gradient(180deg, #f6faff, #fff 85%); }
.we-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
    background-image: linear-gradient(var(--we-line) 1px, transparent 1px), linear-gradient(90deg, var(--we-line) 1px, transparent 1px); background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 32%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 72% 32%, #000 10%, transparent 72%); }
.we-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding: clamp(48px, 5vw + 16px, 100px) 0 clamp(56px, 6vw + 16px, 112px); }
.we-hero--md .we-hero__grid { padding-block: clamp(40px, 4vw, 72px); }
.we-hero--full .we-hero__grid { min-height: calc(100svh - var(--we-header-h) - 40px); }
.we-hero__badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--we-line); border-radius: 999px; padding: 6px 16px 6px 6px; font-size: .84rem; font-weight: 600; color: var(--we-text-2); box-shadow: var(--we-shadow-sm); margin-bottom: 22px; }
.we-hero__badge b { background: var(--we-grad-accent); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: .74rem; letter-spacing: .04em; }
.we-hero h1, .we-hero__title { font-size: clamp(2.15rem, 1.1rem + 3.7vw, 3.85rem); line-height: 1.1; letter-spacing: -.035em; margin-bottom: 20px; }
.we-hero__lead { font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); color: var(--we-text-2); max-width: 580px; margin-bottom: 34px; }
.we-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.we-hero__trust { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 36px; padding-top: 26px; border-top: 1px dashed var(--we-line-2); color: var(--we-text-2); font-size: .9rem; font-weight: 500; }
.we-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.we-hero__trust .i { color: var(--we-ok); }
.we-hero__visual { position: relative; }
.we-hero__frame { position: relative; border-radius: calc(var(--we-radius) * 2); overflow: hidden; box-shadow: var(--we-shadow-lg); background: #fff; }
.we-hero__frame img { display: block; width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; }
.we-hero__art { display: block; width: 100%; max-width: 560px; margin-inline: auto; filter: drop-shadow(0 40px 60px rgba(13, 40, 80, .22)); }
.we-hero__glow { position: absolute; inset: 8% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--we-primary) 32%, transparent), transparent 68%); filter: blur(20px); }
.we-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--we-shadow); font-size: .8rem; color: var(--we-text-2); line-height: 1.3; animation: we-float 6s ease-in-out infinite; }
.we-float b { display: block; color: var(--we-text); font-size: 1.05rem; }
.we-float__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--we-grad); font-size: 1.15rem; flex: none; }
.we-float__ico--accent { background: var(--we-grad-accent); }
.we-float__ico--ok { background: linear-gradient(135deg, #22c55e, #12a150); }
.we-float--1 { top: 10%; left: -4%; }
.we-float--2 { bottom: 14%; right: -3%; animation-delay: -2s; }
.we-float--3 { bottom: -2%; left: 10%; animation-delay: -4s; }
@keyframes we-float { 50% { transform: translateY(-12px); } }

/* Hero căn giữa trên ảnh */
.we-hero--center { color: #fff; background: var(--we-dark) var(--bg) center / cover no-repeat; text-align: center; }
.we-hero--center::before { background: linear-gradient(180deg, rgba(10, 26, 47, .72), rgba(10, 26, 47, .55) 50%, rgba(10, 26, 47, .85)); -webkit-mask-image: none; mask-image: none; opacity: 1; background-size: auto; }
.we-hero--center .we-hero__grid { grid-template-columns: 1fr; justify-items: center; padding-block: clamp(110px, 10vw + 40px, 200px) clamp(90px, 8vw + 30px, 160px); }
.we-hero--center .we-hero__content { max-width: 860px; }
.we-hero--center h1, .we-hero--center .we-hero__title { color: #fff; }
.we-hero--center .we-hero__lead { color: rgba(255, 255, 255, .86); margin-inline: auto; }
.we-hero--center .we-hero__actions, .we-hero--center .we-hero__trust { justify-content: center; }
.we-hero--center .we-hero__trust { color: rgba(255, 255, 255, .85); border-top-color: rgba(255, 255, 255, .2); }
.we-hero--center .we-hero__trust .i { color: #6ee7a7; }
.we-hero--center .we-hero__badge { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
/* Hero tối giản */
.we-hero--minimal .we-hero__grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.we-hero--minimal .we-hero__lead { margin-inline: auto; }
.we-hero--minimal .we-hero__actions, .we-hero--minimal .we-hero__trust { justify-content: center; }
.we-hero.text-left .we-hero__content { text-align: left; }

@media (max-width: 991.98px) {
    .we-hero__grid { grid-template-columns: 1fr; text-align: center; }
    .we-hero__lead { margin-inline: auto; }
    .we-hero__actions, .we-hero__trust { justify-content: center; }
    .we-hero__visual { max-width: 560px; margin-inline: auto; width: 100%; }
    .we-float--1 { left: 0; } .we-float--2 { right: 0; }
}
@media (max-width: 575.98px) { .we-float { display: none; } .we-hero__actions .we-btn { flex: 1 1 100%; } }

/* ==========================================================================
   BLOCK: TÍNH NĂNG / THẺ / QUY TRÌNH
   ========================================================================== */
.we-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 991.98px) { .we-grid { --cols: 2 !important; } }
@media (max-width: 575.98px) { .we-grid { --cols: 1 !important; } }
.we-feature { position: relative; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); padding: 30px 28px 28px; overflow: hidden; transition: transform .4s var(--we-ease), box-shadow .4s, border-color .4s; }
.we-feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--we-grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--we-ease); }
.we-feature::after { content: ""; position: absolute; width: 180px; height: 180px; right: -80px; bottom: -90px; border-radius: 50%; background: var(--we-ps); transition: transform .6s var(--we-ease); z-index: 0; }
.we-feature > * { position: relative; z-index: 1; }
.we-feature:hover { transform: translateY(-6px); box-shadow: var(--we-shadow); border-color: transparent; }
.we-feature:hover::before { transform: scaleX(1); }
.we-feature:hover::after { transform: scale(1.6); }
.we-ico { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: var(--we-grad); box-shadow: var(--we-shadow-p); margin-bottom: 20px; transition: transform .45s var(--we-spring); }
.we-ico--accent { background: var(--we-grad-accent); box-shadow: var(--we-shadow-a); }
.we-ico--soft { background: var(--we-ps); color: var(--we-primary); box-shadow: none; }
.we-feature:hover .we-ico { transform: rotate(-8deg) scale(1.07); }
.we-feature h3 { font-size: 1.14rem; margin-bottom: 8px; }
.we-feature p { color: var(--we-text-2); margin: 0; font-size: .95rem; }
/* kiểu "biểu tượng tối giản" */
.we-features--icons .we-feature { border: 0; background: transparent; padding: 10px; text-align: center; }
.we-features--icons .we-feature::before, .we-features--icons .we-feature::after { display: none; }
.we-features--icons .we-feature:hover { box-shadow: none; }
.we-features--icons .we-ico { margin-inline: auto; background: var(--we-ps); color: var(--we-primary); box-shadow: none; width: 72px; height: 72px; border-radius: 50%; font-size: 1.9rem; }
.we-features--icons .we-feature:hover .we-ico { background: var(--we-grad); color: #fff; box-shadow: var(--we-shadow-p); }
/* kiểu "nền tối" */
.we-features--dark { background: var(--we-dark); }
.we-features--dark .we-head h2 { color: #fff; }
.we-features--dark .we-head p { color: #9fb2c9; }
.we-features--dark .we-feature { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.we-features--dark .we-feature::after { background: rgba(255, 255, 255, .03); }
.we-features--dark .we-feature h3 { color: #fff; }
.we-features--dark .we-feature p { color: #9fb2c9; }
.we-features--dark .we-feature:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }

/* Dải cam kết (features kiểu "strip"): hàng ngang gọn dưới banner – thẻ trắng nổi, các mục ngăn bằng vạch mảnh. */
.we-section.we-trust-strip { padding-block: calc(clamp(24px, 1.5vw + 16px, 40px) * var(--we-space, 1)); }
.we-trust-strip__list { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); background: var(--we-surface); border: 1px solid var(--we-line); border-radius: var(--we-radius); box-shadow: var(--we-shadow-sm); }
.we-trust-strip__item { display: flex; align-items: center; gap: 16px; padding: 24px 26px; min-width: 0; }
.we-trust-strip__item { border-left: 1px solid var(--we-line); border-top: 1px solid var(--we-line); }
.we-trust-strip__item.is-row-start { border-left: 0; }
.we-trust-strip__item.is-first-row { border-top: 0; }
.we-trust-strip__ico { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: var(--we-primary); background: var(--we-ps); transition: background .35s, color .35s, transform .45s var(--we-spring); }
.we-trust-strip__ico .i { width: 26px; height: 26px; }
.we-trust-strip__item:hover .we-trust-strip__ico { background: var(--we-grad); color: #fff; transform: rotate(-8deg) scale(1.06); }
.we-trust-strip__txt { min-width: 0; }
.we-trust-strip__txt h3 { margin: 0 0 2px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.we-trust-strip__txt p { margin: 0; color: var(--we-text-2); font-size: .9rem; line-height: 1.45; }
@media (max-width: 1080px) {
    /* Màn hẹp: luôn 2 cột (1 mục thì 1 cột) – vạch ngăn tính lại theo 2 cột. */
    .we-trust-strip__list { grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr)); }
    .we-trust-strip__list .we-trust-strip__item { border-left: 1px solid var(--we-line); border-top: 1px solid var(--we-line); }
    .we-trust-strip__list .we-trust-strip__item:nth-child(odd) { border-left: 0; }
    .we-trust-strip__list .we-trust-strip__item:nth-child(-n + 2) { border-top: 0; }
}
@media (max-width: 560px) {
    .we-trust-strip__item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
    .we-trust-strip__ico { width: 44px; height: 44px; font-size: 1.25rem; }
    .we-trust-strip__ico .i { width: 22px; height: 22px; }
    .we-trust-strip__txt h3 { font-size: 1rem; }
    .we-trust-strip__txt p { font-size: .84rem; }
}

/* Thẻ liên kết */
.we-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); overflow: hidden; transition: transform .4s var(--we-ease), box-shadow .4s, border-color .4s; }
.we-card:hover { transform: translateY(-6px); box-shadow: var(--we-shadow); border-color: transparent; }
.we-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--we-soft); }
.we-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--we-ease); }
.we-card:hover .we-card__media img { transform: scale(1.06); }
.we-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.we-card__body h3 { font-size: 1.15rem; margin: 0; }
.we-card__body p { color: var(--we-text-2); margin: 0; font-size: .95rem; }
.we-card__body .we-link-arrow { margin-top: auto; padding-top: 8px; }
.we-card__body .we-ico { margin-bottom: 6px; }
.we-cards--overlay .we-card { aspect-ratio: 4 / 5; border: 0; color: #fff; justify-content: flex-end; }
.we-cards--overlay .we-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.we-cards--overlay .we-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10, 26, 47, .88)); transition: opacity .4s; }
.we-cards--overlay .we-card__body { position: relative; z-index: 2; flex: 0; }
.we-cards--overlay .we-card__body h3 { color: #fff; font-size: 1.3rem; }
.we-cards--overlay .we-card__body p { color: rgba(255, 255, 255, .85); }
.we-cards--overlay .we-link-arrow { color: #fff; }

/* Quy trình */
.we-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; position: relative; counter-reset: we-step; }
.we-steps--timeline::before { content: ""; position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: 38px; height: 2px; background: repeating-linear-gradient(90deg, var(--we-line-2) 0 8px, transparent 8px 16px); }
.we-step { position: relative; text-align: center; }
.we-step__num { position: relative; width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--we-line); color: var(--we-primary); font-size: 1.7rem; transition: transform .45s var(--we-spring), border-color .3s, background .3s, color .3s; }
.we-step__num::after { counter-increment: we-step; content: counter(we-step, decimal-leading-zero); position: absolute; top: -6px; right: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--we-grad-accent); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; box-shadow: var(--we-shadow-a); }
.we-step:hover .we-step__num { transform: translateY(-6px); background: var(--we-grad); border-color: transparent; color: #fff; box-shadow: var(--we-shadow-p); }
.we-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.we-step p { color: var(--we-text-2); font-size: .93rem; margin: 0 auto; max-width: 260px; }
.we-steps--cards .we-step { background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); padding: 30px 22px; text-align: left; }
.we-steps--cards .we-step__num { margin: 0 0 18px; width: 60px; height: 60px; border-radius: 18px; font-size: 1.4rem; }
.we-steps--cards .we-step p { margin: 0; }
@media (max-width: 991.98px) {
    .we-steps { grid-template-columns: 1fr 1fr; }
    .we-steps--timeline::before { display: none; }
}
@media (max-width: 575.98px) {
    .we-steps { grid-template-columns: 1fr; }
    .we-steps--timeline .we-step { display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; text-align: left; }
    .we-steps--timeline .we-step__num { width: 60px; height: 60px; font-size: 1.35rem; margin: 0; grid-row: span 2; }
    .we-steps--timeline .we-step p { margin: 0; }
}
/* kiểu "Hành trình": nền thương hiệu đậm, các bước nối bằng đường sáng dần khi cuộn tới, số bước lớn chìm sau thẻ */
.we-section.we-journey { background: var(--we-dark); color: #b8c6d8; isolation: isolate; overflow: hidden; }
.we-journey::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(680px 380px at 6% 0%, color-mix(in srgb, var(--we-primary) 40%, transparent), transparent 70%),
    radial-gradient(560px 340px at 100% 100%, color-mix(in srgb, var(--we-accent) 24%, transparent), transparent 70%); }
.we-journey::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.we-journey .we-head h2 { color: #fff; }
.we-journey .we-head p { color: #9fb2c9; }
.we-journey__track { --ico: 76px; --glow: #4cc3ff; position: relative; }
.we-journey__list { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.we-journey__line { position: absolute; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); top: calc(var(--ico) / 2 - 1px); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.we-journey__line::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--we-primary), var(--glow), var(--we-accent)); box-shadow: 0 0 14px color-mix(in srgb, var(--glow) 60%, transparent); transform-origin: left; transition: transform 1.8s var(--we-ease) .25s; }
.js[data-animations="true"] .we-journey__line.we-reveal { opacity: 1; transform: none; }   /* nền đường luôn hiện, chỉ vệt sáng chạy */
.js[data-animations="true"] .we-journey__line:not(.in)::after { transform: scaleX(0); }
.we-journey__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.we-journey__ico { position: relative; z-index: 1; flex: none; width: var(--ico); height: var(--ico); margin-bottom: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 1.75rem; color: #fff; background: var(--we-grad);
    box-shadow: 0 0 0 8px var(--we-dark), 0 0 0 9px rgba(255, 255, 255, .14), 0 18px 34px -12px color-mix(in srgb, var(--we-primary) 85%, transparent); transition: transform .45s var(--we-spring); }
.we-journey__step:last-child .we-journey__ico { background: var(--we-grad-accent); box-shadow: 0 0 0 8px var(--we-dark), 0 0 0 9px rgba(255, 255, 255, .14), var(--we-shadow-a); }
.we-journey__card { position: relative; overflow: hidden; flex: 1; width: 100%; padding: 28px 22px 24px; border-radius: var(--we-radius); background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09); transition: transform .45s var(--we-spring), border-color .3s, background .3s; }
.we-journey__no { position: absolute; right: 10px; bottom: -20px; font-size: 5.2rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: rgba(255, 255, 255, .05); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .09); pointer-events: none; transition: -webkit-text-stroke-color .3s; }
.we-journey__card h3 { position: relative; color: #fff; font-size: 1.12rem; margin-bottom: 8px; }
.we-journey__card p { position: relative; color: #9fb2c9; font-size: .93rem; margin: 0; }
.we-journey__step:hover .we-journey__ico { transform: translateY(-5px) scale(1.05); }
.we-journey__step:hover .we-journey__card { transform: translateY(-4px); border-color: color-mix(in srgb, var(--glow) 40%, transparent); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.we-journey__step:hover .we-journey__no { -webkit-text-stroke-color: color-mix(in srgb, var(--glow) 45%, transparent); }
/* tablet / điện thoại: các bước xếp dọc, mỗi bước nối xuống bước sau bằng đoạn thẳng chạy dần */
@media (max-width: 991.98px) {
    .we-journey__track { --ico: 58px; max-width: 640px; margin-inline: auto; }
    .we-journey__line { display: none; }
    .we-journey__list { grid-template-columns: 1fr; gap: 18px; }
    .we-journey__step { flex-direction: row; align-items: flex-start; gap: 18px; text-align: left; }
    .we-journey__step:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--ico) / 2 - 1px); top: calc(var(--ico) / 2); bottom: -18px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--we-primary), var(--glow)); box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 45%, transparent); transform-origin: top; transition: transform 1s var(--we-ease) calc(var(--d, 0s) + .35s); }
    .js[data-animations="true"] .we-journey__step:not(.in)::before { transform: scaleY(0); }
    .we-journey__ico { margin: 0; font-size: 1.4rem; box-shadow: 0 0 0 6px var(--we-dark), 0 0 0 7px rgba(255, 255, 255, .14), 0 14px 26px -12px color-mix(in srgb, var(--we-primary) 85%, transparent); }
    .we-journey__step:last-child .we-journey__ico { box-shadow: 0 0 0 6px var(--we-dark), 0 0 0 7px rgba(255, 255, 255, .14), var(--we-shadow-a); }
    .we-journey__card { padding: 18px 20px; min-width: 0; }
    .we-journey__no { font-size: 4rem; bottom: -16px; }
}


/* Hệ sinh thái giải pháp (ecosystem): thiết bị → phần mềm trung tâm → kết quả; nền đậm thương hiệu, vệt dữ liệu chạy trên đường nối */
.we-section.we-eco { --glow: #4cc3ff; --gap: clamp(14px, 1.8vw, 24px); --drop: 30px; background: var(--we-dark); color: #b8c6d8; isolation: isolate; overflow: hidden; }
.we-eco::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(620px 420px at 50% 56%, color-mix(in srgb, var(--we-primary) 46%, transparent), transparent 70%),
    radial-gradient(520px 320px at 0% 0%, color-mix(in srgb, var(--we-primary) 26%, transparent), transparent 70%),
    radial-gradient(520px 320px at 100% 100%, color-mix(in srgb, var(--we-accent) 20%, transparent), transparent 70%); }
.we-eco::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); }
.we-eco .we-head h2 { color: #fff; }
.we-eco .we-head p { color: #9fb2c9; }
.we-eco .we-eyebrow { color: #8fd0ff; background: rgba(76, 195, 255, .1); }
.we-eco__map { position: relative; display: flex; flex-direction: column; align-items: stretch; }
/* nhãn nhóm: chữ nhỏ giữa hai vạch */
.we-eco__label { display: flex; align-items: center; justify-content: center; gap: 14px; white-space: nowrap; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8fd0ff; }
.we-eco__label::before, .we-eco__label::after { content: ""; flex: 0 1 70px; min-width: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 208, 255, .5)); }
.we-eco__label::after { transform: scaleX(-1); }
.we-eco__group--in .we-eco__label { margin-bottom: 18px; }
.we-eco__group--out .we-eco__label { margin-top: 18px; }
/* ô thiết bị / kết quả */
.we-eco__nodes { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.we-eco__node { position: relative; display: flex; min-width: 0; }
.we-eco__card { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 20px 14px 18px; text-align: center; border-radius: var(--we-radius); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: inherit; text-decoration: none; transition: transform .45s var(--we-spring), border-color .3s, box-shadow .3s, background .3s; }
.we-eco__card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--glow) 55%, transparent); background: linear-gradient(180deg, rgba(76, 195, 255, .12), rgba(255, 255, 255, .03)); box-shadow: 0 18px 40px -22px var(--glow); color: inherit; }
.we-eco__card b { color: #fff; font-size: 1rem; line-height: 1.3; }
.we-eco__card small { font-size: .82rem; line-height: 1.4; color: #9fb2c9; }
.we-eco__ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px; font-size: 1.6rem; color: #fff; background: var(--we-grad); box-shadow: 0 0 0 5px rgba(255, 255, 255, .04), 0 12px 24px -12px color-mix(in srgb, var(--we-primary) 90%, transparent); transition: transform .45s var(--we-spring); }
.we-eco__ico .i { width: 1em; height: 1em; }
.we-eco__card:hover .we-eco__ico { transform: scale(1.1) rotate(-4deg); }
.we-eco__group--out .we-eco__ico { color: #8fd0ff; background: rgba(76, 195, 255, .1); border: 1px solid rgba(76, 195, 255, .3); box-shadow: 0 0 0 5px rgba(76, 195, 255, .04); }
/* đường nối: nền mờ + vệt sáng chạy */
.we-eco__node::after, .we-eco__stem, .we-eco__rail::before, .we-eco__rail::after { --line: rgba(255, 255, 255, .13); }
.we-eco__group--in .we-eco__node::after, .we-eco__group--out .we-eco__node::after { content: ""; position: absolute; left: 50%; width: 2px; height: var(--drop); margin-left: -1px;
    background: linear-gradient(180deg, transparent, var(--glow), transparent) center -16px / 2px 16px no-repeat, var(--line); animation: we-eco-down 1.7s linear infinite; }
.we-eco__group--in .we-eco__node::after { top: 100%; }
.we-eco__group--out .we-eco__node::after { bottom: 100%; }
.we-eco__node:nth-child(2n)::after { animation-delay: -.6s; }
.we-eco__node:nth-child(3n)::after { animation-delay: -1.1s; }
.we-eco__rail { position: relative; height: 2px; margin-inline: calc((100% - (var(--n) - 1) * var(--gap)) / (2 * var(--n))); }
.we-eco__group--in .we-eco__rail { margin-top: var(--drop); }
.we-eco__group--out .we-eco__rail { margin-bottom: var(--drop); }
.we-eco__rail::before, .we-eco__rail::after { content: ""; position: absolute; top: 0; height: 2px; width: 50%; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--glow), transparent) -40px center / 40px 2px no-repeat, var(--line); animation: we-eco-right 2.2s linear infinite; }
.we-eco__rail::before { left: 0; }
.we-eco__rail::after { right: 0; transform: scaleX(-1); }   /* nửa phải chạy ngược chiều → dồn vào giữa */
.we-eco__group--out .we-eco__rail::before { transform: scaleX(-1); }   /* hàng dưới: tỏa ra hai bên */
.we-eco__group--out .we-eco__rail::after { transform: none; }
.we-eco__stem { align-self: center; width: 2px; height: 48px; background: linear-gradient(180deg, transparent, var(--glow), transparent) center -22px / 2px 22px no-repeat, var(--line); animation: we-eco-down 1.4s linear infinite; }
@keyframes we-eco-down { to { background-position: center calc(100% + 22px), 0 0; } }
@keyframes we-eco-right { to { background-position: calc(100% + 40px) center, 0 0; } }
/* trung tâm: quả cầu phát sáng + thông tin phần mềm */
.we-eco__hub { position: relative; align-self: center; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 36px); width: min(760px, 100%); padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px); border-radius: calc(var(--we-radius) * 1.6);
    background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(143, 208, 255, .28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 40px 90px -40px color-mix(in srgb, var(--we-primary) 95%, transparent), 0 0 60px -20px color-mix(in srgb, var(--glow) 45%, transparent); }
.we-eco__orb { position: relative; display: grid; place-items: center; width: 150px; height: 150px; flex: none; }
.we-eco__orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--glow), transparent 30%, var(--we-accent) 50%, transparent 72%, var(--glow));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: we-eco-spin 7s linear infinite; }
.we-eco__core { position: relative; z-index: 1; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; font-size: 2.8rem; color: #fff;
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--glow) 70%, var(--we-primary)), var(--we-primary) 55%, var(--we-primary-dark)); box-shadow: 0 0 0 8px rgba(76, 195, 255, .08), 0 0 50px color-mix(in srgb, var(--glow) 55%, transparent), inset 0 -10px 24px rgba(0, 0, 0, .25); }
.we-eco__core img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.we-eco__core .i { width: 1em; height: 1em; }
.we-eco__wave { position: absolute; inset: 16px; border-radius: 50%; border: 1px solid rgba(143, 208, 255, .45); animation: we-eco-wave 3.2s var(--we-ease) infinite; }
.we-eco__wave + .we-eco__wave { animation-delay: 1.6s; }
@keyframes we-eco-spin { to { transform: rotate(1turn); } }
@keyframes we-eco-wave { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.we-eco__hub-body { min-width: 0; }
.we-eco__badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--we-grad-accent); box-shadow: var(--we-shadow-a); }
.we-eco__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: we-eco-blink 1.6s ease-in-out infinite; }
@keyframes we-eco-blink { 50% { opacity: .35; } }
.we-eco__hub h3 { margin: 0 0 10px; color: #fff; font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); letter-spacing: -.02em; line-height: 1.15; }
.we-eco__os { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.we-eco__os li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9px; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.we-eco__os .i { width: 14px; height: 14px; color: #8fd0ff; }
.we-eco__hub p { margin: 0 0 16px; color: #b8c6d8; }
.we-eco__hub .we-btn { margin-top: 2px; }
@media (max-width: 991.98px) {
    .we-eco__card { padding: 16px 10px 14px; }
    .we-eco__card small { font-size: .78rem; }
}
/* điện thoại: lưới 2 cột, bỏ đường nối từng ô, giữ trục dọc; trung tâm xếp dọc */
@media (max-width: 767.98px) {
    .we-eco__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .we-eco__node::after, .we-eco__rail { display: none !important; }
    .we-eco__group--in .we-eco__nodes { margin-bottom: 0; }
    .we-eco__stem { height: 40px; margin-block: 4px; }
    .we-eco__hub { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 26px 20px; }
    .we-eco__os { justify-content: center; }
    .we-eco__orb { width: 128px; height: 128px; }
    .we-eco__core { width: 100px; height: 100px; font-size: 2.4rem; }
    .we-eco__hub .we-btn { width: 100%; justify-content: center; }
}

/* Giới thiệu giao diện phần mềm (screen_showcase): tab → ảnh chụp màn hình trong khung laptop / cửa sổ, thẻ chú thích nổi, nghiêng 3D theo chuột */
.we-scr { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--we-soft) 0%, #fff 70%); }
.we-scr::before { content: ""; position: absolute; width: 900px; height: 600px; left: 50%; top: 42%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--we-primary) 16%, transparent), transparent); }
.we-scr .we-container { position: relative; z-index: 1; }
/* tab */
.we-scr__tabs { display: flex; width: fit-content; max-width: 100%; margin: 0 auto; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: #fff; border: 1px solid var(--we-line); box-shadow: var(--we-shadow-sm); }
.we-scr__tabs::-webkit-scrollbar { display: none; }
.we-scr__tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .92rem; font-weight: 700; color: var(--we-text-2); cursor: pointer; white-space: nowrap; transition: color .25s, background .25s, box-shadow .25s; }
.we-scr__tabs button:hover { color: var(--we-primary); }
.we-scr__tabs button[aria-selected="true"] { color: #fff; background: var(--we-grad); box-shadow: var(--we-shadow-p); }
.we-scr__tabs .i { width: 16px; height: 16px; }
/* sân khấu + khung */
.we-scr__stage { --rx: 0deg; --ry: 0deg; position: relative; max-width: 1020px; margin: clamp(28px, 3.4vw, 46px) auto 0; perspective: 1800px; }
.we-scr__stage::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 27, 42, .28), transparent); filter: blur(6px); z-index: -1; }
.we-scr__device { position: relative; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s var(--we-ease); }
.we-scr__screen { position: relative; overflow: hidden; background: #fff; }
.we-scr__device--laptop .we-scr__screen { padding: clamp(7px, 1.1vw, 14px); padding-bottom: clamp(9px, 1.3vw, 16px); border-radius: clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) 6px 6px; background: linear-gradient(180deg, #1d2633, #0d131c); box-shadow: 0 0 0 1px #2d3a4b inset, 0 40px 80px -40px rgba(13, 27, 42, .55); }
.we-scr__device--laptop .we-scr__screen::before { content: ""; position: absolute; top: clamp(2px, .45vw, 6px); left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3a4a5e; }
.we-scr__device--window .we-scr__screen { border-radius: 14px; border: 1px solid var(--we-line); box-shadow: var(--we-shadow-lg); }
.we-scr__device--plain .we-scr__screen { border-radius: calc(var(--we-radius) * 1.2); box-shadow: var(--we-shadow-lg); }
.we-scr__bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; background: linear-gradient(180deg, #f6f8fb, #e9eef4); border-bottom: 1px solid #d9e0e8; font-size: .78rem; font-weight: 600; color: var(--we-text-2); }
.we-scr__device--laptop .we-scr__bar { border-radius: 6px 6px 0 0; }
.we-scr__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.we-scr__bar i:nth-child(2) { background: #febc2e; }
.we-scr__bar i:nth-child(3) { background: #28c840; }
.we-scr__bar span { flex: 1; margin-right: 47px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.we-scr__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f3f6f9; }
.we-scr__device--laptop .we-scr__view { border-radius: 0 0 4px 4px; }
.we-scr__pane { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--we-ease), transform 1.4s var(--we-ease); }
.we-scr__pane.is-on { opacity: 1; transform: none; }
.we-scr__pane img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.we-scr__empty { display: grid; place-content: center; justify-items: center; gap: 10px; height: 100%; color: var(--we-text-3); font-weight: 600; }
.we-scr__empty .i { width: 48px; height: 48px; opacity: .5; }
.we-scr__base { position: relative; height: clamp(12px, 1.6vw, 20px); margin: 0 -7%; border-radius: 2px 2px clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px); background: linear-gradient(180deg, #e9eef3 0%, #c3ccd7 60%, #9aa6b4 100%); box-shadow: 0 1px 0 #fff inset; }
.we-scr__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 40%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #b6c0cc, #d5dce4); }
/* thẻ chú thích nổi */
.we-scr__call { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 250px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--we-shadow); line-height: 1.3; animation: we-float 6s ease-in-out infinite; }
.we-scr__call b { display: block; font-size: .92rem; color: var(--we-text); }
.we-scr__call small { display: block; font-size: .78rem; color: var(--we-text-2); }
.we-scr__call-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--we-grad); box-shadow: var(--we-shadow-p); font-size: 1.05rem; }
.we-scr__call-ico .i { width: 1em; height: 1em; }
.we-scr__call--2 .we-scr__call-ico { background: var(--we-grad-accent); box-shadow: var(--we-shadow-a); }
.we-scr__call--3 .we-scr__call-ico { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 12px 26px -10px rgba(34, 197, 94, .7); }
.we-scr__call--1 { top: 12%; left: -6%; }
.we-scr__call--2 { top: 34%; right: -7%; animation-delay: -2s; }
.we-scr__call--3 { bottom: 14%; left: -3%; animation-delay: -4s; }
.we-scr__call--4 { bottom: 4%; right: -4%; animation-delay: -3s; }
/* chú thích + nút */
.we-scr__foot { text-align: center; margin-top: clamp(30px, 3.4vw, 44px); }
.we-scr__caps { min-height: 3.3em; max-width: 680px; margin: 0 auto; }
.we-scr__cap { margin: 0; font-size: 1.05rem; color: var(--we-text-2); animation: we-scr-cap .5s var(--we-ease); }
@keyframes we-scr-cap { from { opacity: 0; transform: translateY(6px); } }
.we-scr__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
@media (max-width: 1199.98px) {
    .we-scr__call--1 { left: -2%; }
    .we-scr__call--2 { right: -2%; }
    .we-scr__call--3 { left: 1%; }
    .we-scr__call--4 { right: 1%; }
}
@media (max-width: 991.98px) {
    .we-scr__call { max-width: 210px; padding: 10px 12px 10px 10px; }
    .we-scr__call small { display: none; }
    .we-scr__call-ico { width: 32px; height: 32px; }
    .we-scr__call--3, .we-scr__call--4 { display: none; }
}
@media (max-width: 767.98px) {
    .we-scr__call { display: none; }
    .we-scr__tabs { width: 100%; }
    .we-scr__tabs button { flex: 1 0 auto; justify-content: center; }
    .we-scr__tabs .i { display: none; }
    .we-scr__tabs button { padding: 9px 12px; font-size: .86rem; }
    .we-scr__bar { height: 24px; padding: 0 9px; gap: 5px; font-size: .68rem; }
    .we-scr__bar i { width: 8px; height: 8px; }
    .we-scr__bar span { margin-right: 31px; }
    .we-scr__actions .we-btn { flex: 1 1 100%; justify-content: center; }
}

/* Dự án tiêu biểu – kiểu bento: ảnh thực tế ô to nhỏ, rê chuột ảnh phóng nhẹ + hiện chi tiết – các ô hiện dần lần lượt như các khối khác */
.we-cases { --cr: calc(var(--we-radius) * 1.25); }
.we-cases__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -6px 0 clamp(22px, 2.6vw, 34px); }
.we-cases__chips button { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--we-line); background: #fff; font: inherit; font-size: .9rem; font-weight: 700; color: var(--we-text-2); cursor: pointer; transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .15s; }
.we-cases__chips button:active { transform: scale(.95); }
.we-cases__chips button:hover { color: var(--we-primary); border-color: color-mix(in srgb, var(--we-primary) 40%, var(--we-line)); }
.we-cases__chips button.is-on { color: #fff; background: var(--we-grad); border-color: transparent; box-shadow: var(--we-shadow-p); }
.we-cases__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 17vw, 250px); grid-auto-flow: dense; gap: clamp(12px, 1.4vw, 20px); }
.we-case { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--cr); background: var(--we-dark); color: #fff; }
.we-case[hidden] { display: none; }
.we-case.is-big { grid-column: span 2; grid-row: span 2; }
.we-case.is-wide { grid-column: span 2; }
/* ảnh tràn ô */
.we-case__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.we-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--we-ease); }
.we-case:hover .we-case__media img { transform: scale(1.07); }
.we-case__ph { display: grid; place-items: center; height: 100%; font-size: 3rem; color: rgba(255, 255, 255, .25); background: var(--we-grad); }
.we-case::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 26, 47, .38) 0%, transparent 26%, transparent 42%, rgba(10, 26, 47, .9) 100%); transition: background .5s; }
.we-case:hover::after { background: linear-gradient(180deg, rgba(10, 26, 47, .45) 0%, rgba(10, 26, 47, .25) 30%, rgba(10, 26, 47, .94) 100%); }
.we-case__open { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.we-case__open:focus-visible { outline: 3px solid var(--glow, #4cc3ff); outline-offset: -3px; }
/* nhãn góc trên */
.we-case__top { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; pointer-events: none; }
.we-case__tag, .we-case__new, .we-case__count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .03em; }
.we-case__tag { color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.we-case__new { color: #fff; background: var(--we-grad-accent); box-shadow: var(--we-shadow-a); text-transform: uppercase; letter-spacing: .06em; }
.we-case__new i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: we-eco-blink 1.6s ease-in-out infinite; }
.we-case__count { margin-left: auto; color: #fff; background: rgba(10, 26, 47, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.we-case__count .i { width: 12px; height: 12px; }
/* thông tin dưới: luôn hiện thời gian · nơi + tên; rê chuột trượt lên phần chi tiết */
.we-case__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(14px, 1.6vw, 22px); pointer-events: none; }
.we-case__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 6px; font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .78); }
.we-case__meta span { display: inline-flex; align-items: center; gap: 5px; }
.we-case__meta .i { width: 13px; height: 13px; color: #8fd0ff; }
.we-case h3 { margin: 0; color: #fff; font-size: 1.08rem; line-height: 1.25; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.we-case.is-big h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
.we-case__more { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows .55s var(--we-ease), opacity .4s; }
.we-case:hover .we-case__more, .we-case:focus-within .we-case__more { grid-template-rows: 1fr; opacity: 1; }
.we-case__more-in { min-height: 0; }
.we-case__more p { margin: 8px 0 0; font-size: .86rem; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.we-case__dev { display: flex; align-items: center; gap: 6px; }
.we-case__dev .i { flex: none; width: 14px; height: 14px; color: #8fd0ff; }
.we-case__result { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); }
.we-case__result b { font-size: 1.6rem; font-weight: 800; line-height: 1; color: #fff; }
.we-case__result span { font-size: .8rem; color: rgba(255, 255, 255, .75); }
.we-case__link { pointer-events: auto; position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .86rem; font-weight: 700; color: #8fd0ff; }
.we-case__link:hover { color: #fff; }
/* ô tổng kết màu thương hiệu */
.we-case--stat { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: clamp(18px, 2vw, 28px); background: radial-gradient(260px 200px at 100% 0%, color-mix(in srgb, #4cc3ff 40%, transparent), transparent 70%), var(--we-grad); }
.we-case--stat::after { display: none; }
.we-case--stat b { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.we-case--stat span { font-size: .95rem; color: rgba(255, 255, 255, .85); }
.we-case--stat .we-btn { margin-top: 10px; }
/* màn cảm ứng: không có rê chuột → luôn hiện tóm tắt ngắn ở ô lớn */
@media (hover: none) {
    .we-case.is-big .we-case__more { grid-template-rows: 1fr; opacity: 1; }
    .we-case.is-big .we-case__more p:not(:first-child), .we-case.is-big .we-case__result, .we-case.is-big .we-case__dev { display: none; }
}
@media (max-width: 991.98px) {
    .we-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 34vw, 260px); }
}
@media (max-width: 575.98px) {
    .we-cases__grid { grid-auto-rows: 44vw; gap: 10px; }
    .we-case.is-wide { grid-column: span 2; }
    .we-case h3 { font-size: .95rem; }
    .we-case:not(.is-big):not(.is-wide) .we-case__meta { display: none; }
    .we-case__top { top: 10px; left: 10px; right: 10px; }
    .we-case:not(.is-big) .we-case__tag { display: none; }
    .we-case__info { padding: 12px; }
    .we-case--stat { padding: 14px; gap: 4px; }
    .we-case--stat b { font-size: 1.9rem; }
    .we-case--stat span { font-size: .78rem; line-height: 1.35; }
    .we-case--stat .we-btn { margin-top: 6px; padding: 8px 12px; font-size: .8rem; }
}

/* ==========================================================================
   BLOCK: SỐ LIỆU
   ========================================================================== */
.we-stats { position: relative; overflow: hidden; color: #fff; background: var(--we-grad); }
.we-stats::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(#fff 1.2px, transparent 1.2px); background-size: 22px 22px; }
.we-stats::after { content: ""; position: absolute; width: 520px; height: 520px; left: -160px; bottom: -320px; border-radius: 50%; background: color-mix(in srgb, var(--we-accent) 60%, transparent); filter: blur(90px); opacity: .45; }
.we-stats .we-container { position: relative; z-index: 1; }
.we-stats h2 { color: #fff; text-align: center; margin-bottom: 40px; }
.we-stats__grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.we-stat { text-align: center; padding: 8px 16px; position: relative; }
.we-stat + .we-stat::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(255, 255, 255, .2); }
.we-stat__value { font-size: clamp(2.3rem, 1.4rem + 2.8vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.we-stat__label { opacity: .85; font-weight: 500; margin-top: 6px; }
.we-stats--cards { background: var(--we-soft); color: var(--we-text); }
.we-stats--cards::before, .we-stats--cards::after { display: none; }
.we-stats--cards h2 { color: var(--we-text); }
.we-stats--cards .we-stats__grid { gap: 20px; }
.we-stats--cards .we-stat { background: #fff; border-radius: var(--we-radius); padding: 30px 16px; box-shadow: var(--we-shadow-sm); }
.we-stats--cards .we-stat::before { display: none; }
.we-stats--cards .we-stat__value { background: var(--we-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.we-stats--cards .we-stat__label { color: var(--we-text-2); }
@media (max-width: 767.98px) {
    .we-stats__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
    .we-stat:nth-child(odd)::before { display: none; }
}

/* ==========================================================================
   THẺ SẢN PHẨM + LƯỚI / TRƯỢT NGANG
   ========================================================================== */
.we-products { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
@media (max-width: 1199.98px) { .we-products:not([data-cols="2"]) { --cols: 3 !important; } }
@media (max-width: 767.98px) { .we-products, .we-products:not([data-cols="2"]) { --cols: 2 !important; gap: 12px; } .we-products[data-cols-m="1"] { --cols: 1 !important; } }   /* nhắc lại :not(...) để thắng quy tắc 3 cột ở trên (cùng !important, độ ưu tiên cao hơn) */
.we-pcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); overflow: hidden; transition: transform .4s var(--we-ease), box-shadow .4s, border-color .4s; }
.we-pcard:hover { transform: translateY(-6px); box-shadow: var(--we-shadow); border-color: transparent; }
.we-pcard__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff, var(--we-soft) 75%); }
.we-pcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform .7s var(--we-ease); }
.we-pcard:hover .we-pcard__media img { transform: scale(1.07); }
.we-pcard__ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: var(--we-line-2); }
.we-pcard__badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.we-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--we-grad-accent); padding: 4px 9px; border-radius: 999px; line-height: 1.3; }
.we-tag--new { background: var(--we-grad); }
.we-tag--muted { background: #8494a8; }
.we-tag--soft { background: var(--we-ps); color: var(--we-primary); }
.we-pcard__tools { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.we-pcard__tools button, .we-pcard__tools a { width: 38px; height: 38px; border-radius: 12px; border: 0; background: #fff; color: var(--we-text-2); display: grid; place-items: center; box-shadow: var(--we-shadow-sm); font-size: 1rem; opacity: 0; transform: translateX(14px); transition: opacity .3s, transform .4s var(--we-spring), background .2s, color .2s; }
.we-pcard__tools > :nth-child(2) { transition-delay: .05s; }
.we-pcard:hover .we-pcard__tools > *, .we-pcard__tools > :focus-visible, .we-pcard__tools .active { opacity: 1; transform: none; }
.we-pcard__tools button:hover, .we-pcard__tools a:hover, .we-pcard__tools .active { background: var(--we-primary); color: #fff; }
@media (hover: none) { .we-pcard__tools > * { opacity: 1; transform: none; } }
.we-pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.we-pcard__cat { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--we-primary); }
.we-pcard__title { font-size: 1rem; font-weight: 650; line-height: 1.42; margin: 0; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.84em; }
.we-pcard__title a { color: var(--we-text); }
.we-pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.we-pcard__title a:hover { color: var(--we-primary); }
.we-rating { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--we-text-3); }
.we-rating .i, .we-stars { color: var(--we-star); }
.we-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.we-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.we-price__now { font-weight: 800; color: var(--we-accent); font-size: 1.08rem; letter-spacing: -.02em; }
.we-price__from { font-size: .78rem; color: var(--we-text-3); }
.we-price__old { color: var(--we-text-3); text-decoration: line-through; font-size: .84rem; }
.we-price__contact { font-weight: 700; color: var(--we-primary); }
.we-pcard__more { color: var(--we-primary); font-size: .92rem; white-space: nowrap; }
@media (max-width: 575.98px) { .we-pcard__more { font-size: .8rem; gap: 4px; } }
@media (max-width: 399.98px) { .we-pcard__more { white-space: normal; min-width: 0; } .we-pcard__more .i { display: none; } }
.we-pcard:hover .we-pcard__more { color: var(--we-accent); }
.we-pcard:hover .we-pcard__more .i { transform: translateX(4px); }
.we-pcard__add { position: relative; z-index: 2; flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--we-ps); color: var(--we-primary); display: grid; place-items: center; font-size: 1.1rem; transition: background .25s, color .25s, transform .3s var(--we-spring); }
.we-pcard__add:hover { background: var(--we-grad-accent); color: #fff; transform: scale(1.06); }
.we-pcard__add:disabled { background: color-mix(in srgb, var(--we-ok) 14%, #fff); color: var(--we-ok); }
@media (max-width: 575.98px) {
    .we-pcard__body { padding: 12px 12px 14px; }
    .we-pcard__title { font-size: .92rem; }
    .we-price__now { font-size: .98rem; }
    .we-pcard__add { width: 34px; height: 34px; }
}

.we-carousel { position: relative; }
.we-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per, 4) - 1) * 24px) / var(--per, 4)); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding: 8px 2px 28px; margin: -8px -2px -28px; }
.we-track::-webkit-scrollbar { display: none; }
.we-track > * { scroll-snap-align: start; }
@media (max-width: 1199.98px) { .we-track { --per: 3 !important; } }
@media (max-width: 767.98px) { .we-track { --per: 1.6 !important; gap: 14px; grid-auto-columns: calc((100% - 14px) / 1.6); } }
.we-arrows { display: flex; gap: 10px; flex: none; }
.we-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--we-line-2); background: #fff; color: var(--we-text); display: grid; place-items: center; font-size: 1rem; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.we-arrow:hover:not(:disabled) { background: var(--we-primary); color: #fff; border-color: var(--we-primary); transform: scale(1.05); }
.we-arrow:disabled { opacity: .35; cursor: default; }

/* Tab danh mục sản phẩm */
.we-tabs-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto clamp(26px, 3vw, 40px); padding: 6px; background: var(--we-soft); border-radius: 999px; width: fit-content; max-width: 100%; }
.we-tabs-nav button { border: 0; background: transparent; padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: .93rem; color: var(--we-text-2); transition: background .3s, color .3s, box-shadow .3s; white-space: nowrap; }
.we-tabs-nav button:hover { color: var(--we-primary); }
.we-tabs-nav button[aria-selected="true"] { background: #fff; color: var(--we-primary); box-shadow: var(--we-shadow-sm); }
.we-tab-panel { animation: we-fade-up .5s var(--we-ease); }
.we-tab-panel[hidden] { display: none; }
@keyframes we-fade-up { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 767.98px) { .we-tabs-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; border-radius: 16px; } }
.we-more { text-align: center; margin-top: clamp(28px, 3vw, 44px); }

/* ==========================================================================
   THẺ BÀI VIẾT
   ========================================================================== */
.we-posts { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 991.98px) { .we-posts { --cols: 2 !important; } }
@media (max-width: 640px) { .we-posts { --cols: 1 !important; } }
.we-post { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); overflow: hidden; transition: transform .4s var(--we-ease), box-shadow .4s, border-color .4s; }
.we-post:hover { transform: translateY(-6px); box-shadow: var(--we-shadow); border-color: transparent; }
.we-post__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--we-ps), var(--we-soft)); }
.we-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--we-ease); }
.we-post:hover .we-post__media img { transform: scale(1.06); }
.we-post__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--we-primary); opacity: .35; font-size: 2.6rem; }
.we-post__cat { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: rgba(255, 255, 255, .94); color: var(--we-primary); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.we-post__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.we-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: .8rem; color: var(--we-text-3); }
.we-meta span { display: inline-flex; align-items: center; gap: 6px; }
.we-post__title { font-size: 1.12rem; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.we-post__title a { color: var(--we-text); }
.we-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.we-post:hover .we-post__title a { color: var(--we-primary); }
.we-post__excerpt { color: var(--we-text-2); font-size: .93rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.we-post__more { margin-top: auto; padding-top: 4px; font-size: .9rem; }
/* 1 bài nổi bật + danh sách */
.we-posts-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(18px, 2vw, 28px); }
.we-post--big .we-post__media { aspect-ratio: auto; flex: 1; min-height: 300px; }
.we-post--big .we-post__title { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); -webkit-line-clamp: 3; }
.we-post-list { display: flex; flex-direction: column; gap: 14px; }
.we-post--row { flex-direction: row; align-items: stretch; }
.we-post--row .we-post__media { width: 38%; flex: none; aspect-ratio: auto; min-height: 120px; }
.we-post--row .we-post__body { padding: 14px 18px; gap: 6px; }
.we-post--row .we-post__title { font-size: 1rem; }
.we-post--row .we-post__excerpt { -webkit-line-clamp: 2; font-size: .87rem; }
@media (max-width: 991.98px) { .we-posts-featured { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .we-post--row .we-post__excerpt { display: none; } }

/* ==========================================================================
   KHÁCH HÀNG NÓI GÌ / LOGO / FAQ / CTA
   ========================================================================== */
.we-testi { position: relative; display: flex; flex-direction: column; gap: 18px; height: 100%; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); padding: 30px 28px 26px; transition: transform .4s var(--we-ease), box-shadow .4s; }
.we-testi:hover { transform: translateY(-4px); box-shadow: var(--we-shadow); }
.we-testi__mark { position: absolute; right: 24px; top: 20px; font-size: 3rem; color: var(--we-ps-2); }
.we-testi blockquote { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--we-text); }
.we-testi__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--we-line); }
.we-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--we-grad); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--we-line); }
.we-testi__who strong { display: block; color: var(--we-text); }
.we-testi__who small { color: var(--we-text-3); }

.we-logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.we-logos__track { display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); width: max-content; animation: we-marquee var(--dur, 40s) linear infinite; padding: 6px 0; }
.we-logos:hover .we-logos__track { animation-play-state: paused; }
@keyframes we-marquee { to { transform: translateX(-50%); } }
/* Logo khách hàng / đối tác: luôn màu gốc (không làm xám – tôn trọng thương hiệu khách). Cỡ theo tùy chọn block (--we-client-h, mặc định 56px); điện thoại nhỏ lại ~75%. */
.we-logos { --we-client-k: 1; }
.we-logo-item { --h: calc(var(--we-client-h, 56px) * var(--we-client-k)); display: flex; align-items: center; justify-content: center; height: calc(var(--h) + 12px); flex: none; }
.we-logo-item img { max-height: var(--h); max-width: calc(var(--h) * 3); width: auto; object-fit: contain; transition: transform .3s var(--we-ease); }
.we-logo-item:hover img { transform: scale(1.05); }
.we-logo-item span { font-weight: 800; font-size: max(1rem, calc(var(--h) * .36)); color: var(--we-text-2, var(--we-text)); letter-spacing: -.02em; white-space: nowrap; transition: color .3s; }
.we-logo-item:hover span { color: var(--we-primary); }
.we-logos--grid { -webkit-mask-image: none; mask-image: none; }
.we-logos--grid .we-logos__track { animation: none; width: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--we-client-h, 56px) * var(--we-client-k) * 2.7)), 1fr)); gap: 16px; }
.we-logos--grid .we-logo-item { background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); height: calc(var(--h) + 40px); padding: 16px; }
.we-logos--grid .we-logo-item img { max-width: 100%; }
@media (max-width: 640px) { .we-logos { --we-client-k: .75; } }

.we-faq { max-width: 860px; margin-inline: auto; interpolate-size: allow-keywords; }
.we-faq details { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); margin-bottom: 12px; transition: box-shadow .3s, border-color .3s; }
.we-faq details::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--we-primary), var(--we-accent)); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--we-ease); }
.we-faq details[open] { box-shadow: var(--we-shadow-sm); border-color: color-mix(in srgb, var(--we-primary) 30%, #fff); }
.we-faq details[open]::before { transform: none; }
/* mở / đóng trượt mượt (Chrome / Edge 131+; trình duyệt khác mở ngay) */
.we-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--we-ease), content-visibility .4s allow-discrete; }
.we-faq details[open]::details-content { block-size: auto; }
.we-faq summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 22px; font-weight: 650; cursor: pointer; color: var(--we-text); }
.we-faq summary::-webkit-details-marker { display: none; }
.we-faq summary:hover { color: var(--we-primary); }
.we-faq__no { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--we-primary); background: var(--we-ps); transition: background .3s, color .3s; }
.we-faq details[open] .we-faq__no { background: var(--we-grad); color: #fff; }
.we-faq__q { flex: 1; min-width: 0; }
.we-faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--we-line-2); transition: transform .4s var(--we-ease), background .3s, border-color .3s; }
.we-faq__icon::before, .we-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--we-primary); transition: transform .4s var(--we-ease), background .3s; }
.we-faq__icon::after { transform: rotate(90deg); }
.we-faq summary:hover .we-faq__icon { border-color: var(--we-primary); }
.we-faq details[open] .we-faq__icon { transform: rotate(180deg); background: var(--we-primary); border-color: var(--we-primary); }
.we-faq details[open] .we-faq__icon::before, .we-faq details[open] .we-faq__icon::after { background: #fff; }
.we-faq details[open] .we-faq__icon::after { transform: rotate(0); }   /* dấu cộng thành dấu trừ */
.we-faq__a { padding: 0 22px 20px 70px; color: var(--we-text-2); white-space: pre-line; }
@media (max-width: 575.98px) {
    .we-faq summary { padding: 16px; gap: 12px; }
    .we-faq__no { width: 30px; height: 30px; border-radius: 9px; }
    .we-faq__a { padding: 0 16px 18px; }
}
.we-faq-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.we-faq-split .we-faq { max-width: none; }
.we-faq-split .we-head { margin-bottom: 26px; }
.we-faq-split__side { position: sticky; top: calc(var(--we-header-h) + 24px); }
.we-help-card { position: sticky; top: calc(var(--we-header-h) + 24px); border-radius: var(--we-r-lg); padding: 28px; background: var(--we-grad); color: #fff; box-shadow: var(--we-shadow-lg); overflow: hidden; }
.we-faq-split__side .we-help-card { position: relative; top: auto; }
.we-help-card::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; bottom: -110px; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .08); }
.we-help-card h3 { color: #fff; margin-bottom: 8px; }
.we-help-card p { opacity: .88; font-size: .95rem; }
.we-help-card .we-btn { position: relative; z-index: 1; }
.we-help-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 991.98px) { .we-faq-split { grid-template-columns: 1fr; } .we-faq-split__side, .we-help-card { position: relative; top: auto; } }

.we-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center; padding: clamp(36px, 4vw + 10px, 70px) clamp(28px, 4vw + 10px, 72px); border-radius: calc(var(--we-radius) * 1.8); background: var(--cta-bg, var(--we-grad)); color: #fff; box-shadow: var(--we-shadow-lg); }
.we-cta::before { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; right: -140px; top: -230px; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .07); }
.we-cta::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .1; background-image: radial-gradient(#fff 1.2px, transparent 1.2px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.we-cta h2 { color: #fff; margin-bottom: 10px; }
.we-cta p { margin: 0; opacity: .9; font-size: 1.08rem; max-width: 640px; }
.we-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.we-cta__glow { position: absolute; z-index: -1; width: 300px; height: 300px; left: 20%; bottom: -220px; border-radius: 50%; background: var(--we-accent); filter: blur(90px); opacity: .5; }
.we-cta--dark { --cta-bg: var(--we-dark); }
.we-cta--split { --cta-bg: #fff; color: var(--we-text); border: 1px solid var(--we-line); box-shadow: var(--we-shadow); }
.we-cta--split h2 { color: var(--we-text); }
.we-cta--split p { color: var(--we-text-2); opacity: 1; }
.we-cta--split::before { border-color: var(--we-ps); }
.we-cta--split::after { display: none; }
.we-cta--split .we-cta__glow { background: var(--we-primary); opacity: .18; }
@media (max-width: 767.98px) { .we-cta { grid-template-columns: 1fr; text-align: center; } .we-cta p { margin-inline: auto; } .we-cta__actions { justify-content: center; } }

/* ==========================================================================
   ẢNH + CHỮ / THƯ VIỆN ẢNH / VIDEO / VĂN BẢN
   ========================================================================== */
.we-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.we-split--reverse > :first-child { order: 2; }
.we-split__media { position: relative; }
.we-split__media img { width: 100%; border-radius: calc(var(--we-radius) * 1.5); box-shadow: var(--we-shadow-lg); }
.we-split__ph { aspect-ratio: 4 / 3; border-radius: calc(var(--we-radius) * 1.5); background: linear-gradient(135deg, var(--we-ps), var(--we-soft)); display: grid; place-items: center; font-size: 3rem; color: var(--we-primary); }
.we-split--framed .we-split__media::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1; border-radius: calc(var(--we-radius) * 1.5); border: 2px solid var(--we-ps-2); background: linear-gradient(135deg, var(--we-ps), transparent); }
.we-split--framed .we-split__media::after { content: ""; position: absolute; width: 120px; height: 120px; left: -36px; top: -36px; z-index: -1; opacity: .5; background-image: radial-gradient(var(--we-accent) 2px, transparent 2px); background-size: 16px 16px; }
.we-split--framed.we-split--reverse .we-split__media::before { inset: 22px 22px -22px -22px; }
@media (max-width: 991.98px) { .we-split { grid-template-columns: 1fr; } .we-split--reverse > :first-child { order: 0; } }
.we-split__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }

/* Ảnh + chữ kiểu "showcase": giới thiệu sản phẩm / phần mềm chủ lực. Nền thương hiệu nhạt có hoa văn chấm, ảnh trên thẻ trắng nổi + quầng sáng. */
.we-showcase { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--we-ps) 0%, var(--we-soft) 55%, #fff 100%); }
.we-showcase::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--we-primary) 14%, transparent), transparent 70%); pointer-events: none; }
.we-showcase::after { content: ""; position: absolute; width: 180px; height: 140px; left: 3%; bottom: 8%; opacity: .45; background-image: radial-gradient(var(--we-primary) 1.6px, transparent 1.6px); background-size: 16px 16px; pointer-events: none; }
.we-showcase .we-container { position: relative; z-index: 1; }
.we-showcase .we-split__media { display: grid; place-items: center; }
.we-showcase .we-split__media::before { content: ""; position: absolute; inset: 8% 10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--we-primary) 28%, transparent), transparent 68%); filter: blur(30px); z-index: 0; }
.we-showcase__card { position: relative; z-index: 1; width: min(100%, 520px); background: #fff; border-radius: calc(var(--we-radius) * 1.75); padding: clamp(18px, 3vw, 36px); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--we-primary) 35%, rgba(13, 27, 42, .35)), 0 0 0 1px var(--we-line); transition: transform .6s var(--we-ease); }
.we-showcase__card img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.we-showcase .we-split__media:hover .we-showcase__card { transform: translateY(-8px) rotate(-1deg); }
.we-showcase__body h2 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: .6em; }
.we-showcase__body .prose { font-size: 1.04rem; color: var(--we-text-2); }
.we-showcase__body .prose ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 1.4em 0 0; }
.we-showcase__body .prose ul > li { margin: 0; padding: 14px 14px 14px 46px; background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); color: var(--we-text); font-weight: 600; font-size: .96rem; line-height: 1.4; box-shadow: var(--we-shadow-sm); }
.we-showcase__body .prose ul > li::before { left: 14px; top: 15px; width: 22px; height: 22px; background-color: var(--we-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69z'/%3e%3c/svg%3e"); background-size: 11px; }
@media (max-width: 991.98px) { .we-showcase__card { width: min(100%, 440px); } .we-showcase::after { display: none; } }
@media (max-width: 560px) { .we-showcase__body .prose ul { grid-template-columns: 1fr; } .we-split__actions .we-btn { flex: 1 1 100%; justify-content: center; } }

/* Giới thiệu sản phẩm (thẻ) – showcase_cards: thẻ nổi bật nền đậm thương hiệu, thẻ thường nền trắng, dải gợi ý chọn */
.we-sc { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--we-soft) 100%); }
.we-sc::before { content: ""; position: absolute; width: 640px; height: 640px; left: -220px; top: -260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--we-primary) 12%, transparent), transparent 70%); pointer-events: none; }
.we-sc .we-container { position: relative; z-index: 1; }
.we-sc__grid { display: grid; grid-template-columns: var(--sc-cols, repeat(2, minmax(0, 1fr))); gap: clamp(18px, 2vw, 28px); align-items: stretch; }
.we-sc__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.4vw, 34px); border-radius: calc(var(--we-radius) * 1.5); background: #fff; border: 1px solid var(--we-line); box-shadow: var(--we-shadow-sm); transition: transform .5s var(--we-spring), box-shadow .4s, border-color .3s; }
.we-sc__card:hover { transform: translateY(-6px); box-shadow: var(--we-shadow-lg); border-color: color-mix(in srgb, var(--we-primary) 25%, #fff); }
/* nhãn */
.we-sc__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--we-primary); background: var(--we-ps); }
.we-sc__badge .i { width: 13px; height: 13px; color: #f5a524; }
.we-sc__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
.we-sc__pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: we-sc-ping 1.8s var(--we-ease) infinite; }
@keyframes we-sc-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
/* ảnh */
.we-sc__media { position: relative; display: flex; align-items: center; justify-content: center; height: clamp(200px, 19vw, 260px); margin: 18px 0 22px; padding: 12px; border-radius: calc(var(--we-radius) * 1.2); background: #fff; border: 1px solid var(--we-line); }   /* ảnh hộp phần mềm thường có nền trắng → đặt trong khung trắng */
.we-sc__media::before { content: ""; position: absolute; inset: 10% 14%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--we-primary) 24%, transparent), transparent 68%); filter: blur(24px); }
.we-sc__media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: none; transition: transform .6s var(--we-ease); }
.we-sc__card:hover .we-sc__media img { transform: scale(1.04); }
.we-sc__body { display: flex; flex-direction: column; flex: 1; }
.we-sc__card h3 { margin: 0 0 12px; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); letter-spacing: -.02em; line-height: 1.2; }
/* nền tảng */
.we-sc__os { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; }
.we-sc__os li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; font-size: .84rem; font-weight: 700; color: var(--we-text); background: var(--we-soft); border: 1px solid var(--we-line); }
.we-sc__os .i { width: 16px; height: 16px; color: var(--we-primary); }
.we-sc__text { margin: 0 0 16px; color: var(--we-text-2); }
.we-sc__feats { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px 18px; padding: 0; margin: 0 0 26px; }
.we-sc__feats li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--we-text); }
.we-sc__feats .i { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: -1px; border-radius: 50%; color: #fff; background: var(--we-primary); }
.we-sc__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

/* thẻ nổi bật: nền đậm + quầng sáng xanh / đỏ + lưới chấm */
.we-sc__card.is-hot { color: #b8c6d8; border-color: transparent; background:
    radial-gradient(420px 300px at 85% 0%, color-mix(in srgb, var(--we-primary) 70%, transparent), transparent 70%),
    radial-gradient(360px 260px at 0% 100%, color-mix(in srgb, var(--we-accent) 32%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--we-dark) 80%, var(--we-primary)), var(--we-dark));
    box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--we-primary) 85%, transparent); }
.we-sc__card.is-hot::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.we-sc__card.is-hot:hover { border-color: transparent; box-shadow: 0 44px 80px -36px color-mix(in srgb, var(--we-primary) 95%, transparent); }
.we-sc__card.is-hot .we-sc__badge { color: #fff; background: var(--we-grad-accent); box-shadow: var(--we-shadow-a); }
.we-sc__card.is-hot .we-sc__media { border-color: transparent; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 30px 60px -20px color-mix(in srgb, #4cc3ff 55%, transparent); }
.we-sc__card.is-hot .we-sc__media::before { inset: -10% 0; background: radial-gradient(circle, color-mix(in srgb, #4cc3ff 40%, transparent), transparent 62%); filter: blur(34px); }
.we-sc__card.is-hot:hover .we-sc__media { transform: translateY(-6px) rotate(-.6deg); }
.we-sc__card.is-hot .we-sc__media { transition: transform .6s var(--we-ease); }
.we-sc__card.is-hot h3 { color: #fff; }
.we-sc__card.is-hot .we-sc__os li { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.we-sc__card.is-hot .we-sc__os .i { color: #8fd0ff; }
.we-sc__card.is-hot .we-sc__text { color: #b8c6d8; }
.we-sc__card.is-hot .we-sc__feats li { color: #e6eef7; }
.we-sc__card.is-hot .we-sc__feats .i { color: var(--we-dark); background: #8fd0ff; }

/* dải gợi ý chọn */
.we-sc__note { display: flex; align-items: center; gap: 16px; margin-top: clamp(18px, 2vw, 28px); padding: 16px 22px; border-radius: var(--we-radius); background: #fff; border: 1px dashed color-mix(in srgb, var(--we-primary) 35%, var(--we-line)); }
.we-sc__note-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: var(--we-grad); box-shadow: var(--we-shadow-p); }
.we-sc__note ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 0; }
.we-sc__note li { position: relative; padding-left: 18px; font-size: .95rem; font-weight: 600; color: var(--we-text); }
.we-sc__note li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--we-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--we-accent) 18%, transparent); }
@media (max-width: 991.98px) {
    .we-sc__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
    .we-sc__note { max-width: 620px; margin-inline: auto; align-items: flex-start; }
    .we-sc__note ul { flex-direction: column; }
}
@media (max-width: 560px) {
    .we-sc__actions .we-btn { flex: 1 1 100%; justify-content: center; }
    .we-sc__note { padding: 14px 16px; gap: 12px; }
    .we-sc__note-ico { width: 36px; height: 36px; font-size: 1rem; }
}

.we-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.we-gallery--masonry { display: block; columns: var(--cols, 3) 240px; column-gap: 16px; }
.we-gallery--masonry .we-gallery__item { break-inside: avoid; margin-bottom: 16px; }
.we-gallery__item { position: relative; margin: 0; border-radius: var(--we-radius); overflow: hidden; background: var(--we-soft); cursor: zoom-in; }
.we-gallery__item img { width: 100%; display: block; transition: transform .8s var(--we-ease); }
.we-gallery:not(.we-gallery--masonry) .we-gallery__item img { aspect-ratio: 4 / 3; object-fit: cover; height: 100%; }
.we-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 26, 47, .7)); opacity: 0; transition: opacity .35s; }
.we-gallery__item:hover img { transform: scale(1.06); }
.we-gallery__item:hover::after { opacity: 1; }
.we-gallery__item figcaption { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; color: #fff; font-size: .88rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--we-ease); }
.we-gallery__item:hover figcaption { opacity: 1; transform: none; }
@media (max-width: 767.98px) { .we-gallery { --cols: 2 !important; gap: 10px; } }

/* Trình xem ảnh (wiseeye.js → Viewer): ảnh lớn + dải ảnh nhỏ, vuốt / phóng to / kéo. */
.we-viewer { position: fixed; inset: 0; z-index: 1300; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;   /* cột = đúng bề ngang màn hình: chú thích dài / nhiều ảnh nhỏ không kéo rộng trình xem */ background: rgba(4, 10, 20, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; touch-action: none; }
.we-viewer.open { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.we-viewer__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0 20px; min-height: 58px; }
.we-viewer__count { font-weight: 600; font-variant-numeric: tabular-nums; color: #cfd9e6; font-size: .92rem; white-space: nowrap; }
.we-viewer__cap { flex: 1; min-width: 0; color: #cfd9e6; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.we-viewer button { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.we-viewer button:hover { background: rgba(255, 255, 255, .22); }
.we-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.we-viewer__stage { position: relative; overflow: hidden; min-height: 0; }
/* Đặt tuyệt đối + margin auto: ảnh luôn nằm gọn giữa khung (max-height theo % không chạy trong ô lưới). */
.we-viewer__img { position: absolute; inset: 12px 76px; margin: auto; max-width: calc(100% - 152px); max-height: calc(100% - 24px); object-fit: contain; border-radius: 10px; user-select: none; -webkit-user-drag: none; cursor: zoom-in; transition: opacity .25s; will-change: transform; }
.we-viewer.is-zoomed .we-viewer__img { cursor: grab; border-radius: 0; }
.we-viewer.is-zoomed .we-viewer__img:active { cursor: grabbing; }
.we-viewer__nav { position: absolute; top: 50%; translate: 0 -50%; }
.we-viewer [data-v-prev] { left: 16px; }
.we-viewer [data-v-next] { right: 16px; }
.we-viewer.is-single .we-viewer__nav { display: none; }
.we-viewer.is-single .we-viewer__img { inset-inline: 16px; max-width: calc(100% - 32px); }
.we-viewer__thumbs { display: flex; gap: 8px; padding: 10px 16px 18px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.we-viewer__thumbs button { width: 64px; height: 64px; border-radius: 10px; padding: 4px; background: rgba(255, 255, 255, .92); opacity: .5; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s; }
.we-viewer__thumbs button:hover { opacity: .85; background: #fff; }
.we-viewer__thumbs button.active { opacity: 1; outline-color: #fff; }
.we-viewer__thumbs img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 768px) {
    .we-viewer__img { inset: 8px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); }
    .we-viewer .we-viewer__nav { display: none; }
    .we-viewer__thumbs button { width: 52px; height: 52px; }
}

.we-video { position: relative; max-width: 980px; margin-inline: auto; border-radius: calc(var(--we-radius) * 1.5); overflow: hidden; box-shadow: var(--we-shadow-lg); aspect-ratio: 16 / 9; background: #000; }
.we-video button { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; display: grid; place-items: center; background: #000 var(--thumb) center / cover no-repeat; cursor: pointer; }
.we-video button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 26, 47, .1), rgba(10, 26, 47, .5)); transition: opacity .3s; }
.we-video button:hover::before { opacity: .6; }
.we-play { position: relative; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 2rem; background: var(--we-grad-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--we-accent) 60%, transparent); animation: we-pulse 2.2s infinite; transition: transform .3s var(--we-spring); }
.we-video button:hover .we-play { transform: scale(1.08); }
.we-play .i { margin-left: 4px; }
@keyframes we-pulse { 70% { box-shadow: 0 0 0 26px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.we-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.we-richtext--card .we-narrow, .we-richtext--card .we-container > .prose { background: #fff; border-radius: var(--we-r-lg); padding: clamp(24px, 4vw, 56px); box-shadow: var(--we-shadow); }
.we-form-card { background: #fff; border-radius: var(--we-r-lg); box-shadow: var(--we-shadow); padding: clamp(24px, 3vw + 8px, 44px); border: 1px solid var(--we-line); }
.we-form-wrap { max-width: 860px; margin-inline: auto; }

/* Thông tin liên hệ dạng thẻ */
.we-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.we-contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.we-contact-list .we-ico { width: 46px; height: 46px; border-radius: 14px; font-size: 1.2rem; margin: 0; flex: none; }
.we-contact-list small { display: block; color: var(--we-text-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.we-contact-list b, .we-contact-list a { color: var(--we-text); font-weight: 650; }
.we-contact-list a:hover { color: var(--we-primary); }
.we-map { border-radius: var(--we-r-lg); overflow: hidden; box-shadow: var(--we-shadow-sm); border: 1px solid var(--we-line); aspect-ratio: 4 / 3; }
.we-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   DANH SÁCH SẢN PHẨM
   ========================================================================== */
.we-shop { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.we-filter { position: sticky; top: calc(var(--we-header-h) + 20px); display: flex; flex-direction: column; gap: 14px; }
.we-filter__box { background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); padding: 18px; }
.we-filter__title { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--we-text); margin: 0 0 12px; }
.we-filter__title .i { color: var(--we-primary); }
.we-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.we-cats a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--we-text-2); font-size: .93rem; font-weight: 500; transition: background .2s, color .2s; }
.we-cats a:hover { background: var(--we-soft); color: var(--we-primary); }
.we-cats a.active { background: var(--we-ps); color: var(--we-primary); font-weight: 650; }
.we-cats a.child { padding-left: 24px; font-size: .88rem; }
.we-filter .form-check { font-size: .92rem; color: var(--we-text-2); }
.we-filter .filter-group { margin: 0; }
.we-filter .filter-group legend { font-size: .82rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 10px; color: var(--we-text); }
.we-filter__price { display: flex; align-items: center; gap: 8px; }
.we-filter__actions { display: flex; gap: 8px; }
.we-filter__head { display: none; }
.we-filter-scrim { display: none; }   /* lớp phủ chỉ dùng cho bộ lọc dạng ngăn kéo trên điện thoại */
.we-shop__main { min-width: 0; }
.we-shop__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; padding: 10px 12px 10px 16px; background: var(--we-soft); border-radius: var(--we-radius); }
.we-shop__count { font-size: .9rem; color: var(--we-text-2); }
.we-shop__count b { color: var(--we-text); }
.we-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--we-line); color: var(--we-text); border-radius: 999px; padding: 5px 8px 5px 12px; font-size: .82rem; font-weight: 500; transition: border-color .2s, color .2s; }
.we-chip:hover { border-color: var(--we-accent); color: var(--we-accent); }
.we-chip .i { font-size: .75em; }
.we-shop__sort { margin-left: auto; width: auto; min-width: 190px; }
.we-filter-btn { display: none; }
.we-empty { text-align: center; padding: clamp(40px, 6vw, 80px) 20px; background: var(--we-soft); border-radius: var(--we-r-lg); color: var(--we-text-2); }
.we-empty .we-ico { margin: 0 auto 18px; width: 72px; height: 72px; font-size: 2rem; }
.we-empty h3 { color: var(--we-text); }
@media (max-width: 991.98px) {
    .we-shop { grid-template-columns: 1fr; }
    .we-filter-btn { display: inline-flex; }
    .we-filter { position: fixed; inset: 0 auto 0 0; z-index: 1100; width: min(360px, 88vw); background: #fff; padding: 0 16px 20px; overflow-y: auto; transform: translateX(-102%); transition: transform .45s var(--we-ease); box-shadow: var(--we-shadow-lg); gap: 12px; }
    .we-filter.open { transform: none; }
    .we-filter__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: #fff; padding: 14px 0 10px; border-bottom: 1px solid var(--we-line); }
    .we-filter__head b { font-size: 1.05rem; }
    .we-filter-scrim { position: fixed; inset: 0; z-index: 1099; background: rgba(10, 26, 47, .45); display: block; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .we-filter.open + .we-filter-scrim { opacity: 1; visibility: visible; }
    .we-shop__sort { min-width: 0; flex: 1; }
}

/* Khối danh sách sản phẩm (phase 45): bộ lọc dạng nút mở bảng ở mọi kích thước / không có bộ lọc. */
.we-shop--drawer, .we-shop--none { grid-template-columns: 1fr; }
.we-shop--drawer .we-filter-btn { display: inline-flex; }
.we-shop--drawer .we-filter { position: fixed; inset: 0 auto 0 0; z-index: 1100; width: min(360px, 88vw); background: #fff; padding: 0 16px 20px; overflow-y: auto; transform: translateX(-102%); transition: transform .45s var(--we-ease); box-shadow: var(--we-shadow-lg); gap: 12px; }
.we-shop--drawer .we-filter.open { transform: none; }
.we-shop--drawer .we-filter__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: #fff; padding: 14px 0 10px; border-bottom: 1px solid var(--we-line); }
.we-shop--drawer .we-filter-scrim { position: fixed; inset: 0; z-index: 1099; background: rgba(10, 26, 47, .45); display: block; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.we-shop--drawer .we-filter.open + .we-filter-scrim { opacity: 1; visibility: visible; }
.we-shop__search { flex: 0 1 240px; min-width: 0; }
.we-contact-grid--one, .we-tk-layout--one { grid-template-columns: 1fr !important; }

/* Phân trang */
.we-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 4vw, 52px); list-style: none; padding: 0; }
.we-pager a, .we-pager span { min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: .93rem; color: var(--we-text-2); background: #fff; border: 1px solid var(--we-line); transition: all .25s; }
.we-pager a:hover { border-color: var(--we-primary); color: var(--we-primary); transform: translateY(-2px); }
.we-pager .active { background: var(--we-grad); color: #fff; border-color: transparent; box-shadow: var(--we-shadow-p); }

/* ==========================================================================
   CHI TIẾT SẢN PHẨM
   ========================================================================== */
.we-pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.we-gallery-pd { position: sticky; top: calc(var(--we-header-h) + 20px); }
.we-gallery-pd__main { position: relative; aspect-ratio: 1; border-radius: calc(var(--we-radius) * 1.5); overflow: hidden; border: 1px solid var(--we-line); background: radial-gradient(circle at 50% 40%, #fff, var(--we-soft) 78%); cursor: zoom-in; }
.we-gallery-pd__main img { width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: transform .25s ease-out, opacity .3s; }
.we-gallery-pd__main[data-we-viewer-main]:hover img { transform: scale(1.04); }
.we-gallery-pd__main[data-we-viewer-main]:focus-visible { outline: 3px solid var(--we-primary); outline-offset: 3px; }
.we-gallery-pd__expand { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--we-dark); box-shadow: 0 6px 18px rgba(15, 23, 42, .14); transition: transform .2s, background .2s; pointer-events: none; }
.we-gallery-pd__main:hover .we-gallery-pd__expand { transform: scale(1.08); background: #fff; }
.we-gallery-pd__main .we-pcard__badges { top: 18px; left: 18px; }
.we-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.we-thumbs button { flex: none; width: 82px; height: 82px; border-radius: 14px; border: 1.5px solid var(--we-line); background: #fff; padding: 6px; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.we-thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.we-thumbs button:hover { transform: translateY(-2px); }
.we-thumbs button.active { border-color: var(--we-primary); box-shadow: 0 0 0 3px var(--we-ps-2); }
.we-pd__info h1 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem); margin: 10px 0 12px; }
.we-pd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: .88rem; color: var(--we-text-3); margin-bottom: 20px; }
.we-pd__meta b { color: var(--we-text-2); }
.we-stock { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--we-ok); }
.we-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.we-stock.out { color: var(--we-accent); }
.we-pd__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 18px 22px; border-radius: var(--we-radius); background: linear-gradient(135deg, var(--we-as), #fff 70%); border: 1px solid color-mix(in srgb, var(--we-accent) 16%, #fff); margin-bottom: 22px; }
.we-pd__price .price-sale, .we-pd__price .we-price__now { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 800; color: var(--we-accent); letter-spacing: -.03em; }
.we-pd__price .price-old { font-size: 1.05rem; color: var(--we-text-3); }
.we-pd__price-note { width: 100%; font-size: .82rem; color: var(--we-text-2); }
.we-pd__save { background: var(--we-grad-accent); color: #fff; font-weight: 700; font-size: .78rem; padding: 4px 10px; border-radius: 999px; }
.we-pd__short { color: var(--we-text-2); font-size: 1.02rem; margin-bottom: 24px; }
.we-pd__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.we-pd__actions .we-btn--accent { grid-column: 1 / -1; }
.we-pd__sub { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .9rem; margin-bottom: 26px; }
.we-pd__sub button, .we-pd__sub a { border: 0; background: none; padding: 0; color: var(--we-text-2); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.we-pd__sub button:hover, .we-pd__sub a:hover, .we-pd__sub .active { color: var(--we-primary); }
.we-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; border-radius: var(--we-radius); background: var(--we-soft); }
.we-trust div { display: flex; align-items: center; gap: 10px; font-size: .87rem; font-weight: 600; color: var(--we-text); line-height: 1.35; }
.we-trust .i { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 11px; background: #fff; color: var(--we-primary); box-shadow: var(--we-shadow-sm); }
.variant-picker { margin-bottom: 22px; }
.variant-group { margin-bottom: 16px; }
.variant-label { font-size: .9rem; margin-bottom: 8px; color: var(--we-text-2); }
.variant-label b { color: var(--we-text); }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-opt { border: 1.5px solid var(--we-line-2); background: #fff; color: var(--we-text); border-radius: 12px; padding: 9px 16px; font-weight: 600; font-size: .9rem; transition: border-color .2s, box-shadow .2s, color .2s, transform .2s; }
.variant-opt:hover { border-color: var(--we-primary); transform: translateY(-1px); }
.variant-opt.active { border-color: var(--we-primary); color: var(--we-primary); background: var(--we-ps); box-shadow: 0 0 0 3px var(--we-ps-2); }
.variant-opt.unavailable { opacity: .45; text-decoration: line-through; }
.variant-picker.need-choose { animation: need-choose .4s 2; border-radius: 12px; outline: 2px solid var(--we-star); outline-offset: 8px; }
@keyframes need-choose { 50% { transform: translateX(6px); } }
.stock-out { display: inline-block; background: var(--we-as); color: var(--we-accent); font-weight: 600; border-radius: 10px; padding: 6px 12px; font-size: .88rem; }

.we-ptabs { position: sticky; top: calc(var(--we-header-h) - 1px); z-index: 50; display: flex; gap: 6px; padding: 8px 0; margin: clamp(40px, 5vw, 72px) 0 28px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--we-line); overflow-x: auto; scrollbar-width: none; }
.we-ptabs a { flex: none; padding: 10px 18px; border-radius: 999px; font-weight: 650; font-size: .93rem; color: var(--we-text-2); transition: background .25s, color .25s; }
.we-ptabs a:hover { color: var(--we-primary); }
.we-ptabs a.active { background: var(--we-ps); color: var(--we-primary); }
.we-psection { scroll-margin-top: calc(var(--we-header-h) + 76px); margin-bottom: clamp(40px, 5vw, 64px); }
.we-psection > h2 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.we-psection > h2::before { content: ""; width: 5px; height: 1.1em; border-radius: 3px; background: var(--we-grad-brand); }
.we-specs { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--we-line); border-radius: var(--we-radius); overflow: hidden; }
.we-specs th, .we-specs td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--we-line); font-size: .95rem; vertical-align: top; }
.we-specs tr:last-child th, .we-specs tr:last-child td { border-bottom: 0; }
.we-specs th { width: 34%; font-weight: 600; color: var(--we-text-2); background: var(--we-soft); }
.we-specs tr:hover td, .we-specs tr:hover th { background: var(--we-ps); }

.we-pd-bar { display: none; }
@media (max-width: 991.98px) {
    .we-pd { grid-template-columns: 1fr; }
    .we-gallery-pd { position: static; }
}
@media (max-width: 767.98px) {
    .we-pd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--we-line); box-shadow: 0 -10px 30px -16px rgba(13, 40, 80, .3); transform: translateY(110%); transition: transform .4s var(--we-ease); }
    .we-pd-bar.show { transform: none; }
    .we-pd-bar__price { flex: 1; min-width: 0; line-height: 1.25; }
    .we-pd-bar__price small { display: block; color: var(--we-text-3); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .we-pd-bar__price b { color: var(--we-accent); font-size: 1.05rem; }
    .we-pd-bar .we-btn { padding: .75em 1.1em; }
    body.we-has-bar .fc, body.we-has-bar .compare-bar { bottom: 84px; }
    body.we-has-bar .we-totop { bottom: 150px; }
    .we-pd__actions { grid-template-columns: 1fr; }
    .we-trust { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BÀI VIẾT
   ========================================================================== */
.we-cats-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.we-cats-pills a { padding: 8px 18px; border-radius: 999px; background: var(--we-soft); color: var(--we-text-2); font-weight: 600; font-size: .9rem; transition: background .25s, color .25s, transform .25s; }
.we-cats-pills a:hover { color: var(--we-primary); transform: translateY(-2px); }
.we-cats-pills a.active { background: var(--we-grad); color: #fff; box-shadow: var(--we-shadow-p); }

.we-article-head { max-width: 860px; margin: 0 auto; text-align: center; padding: clamp(28px, 3vw + 10px, 56px) 0 clamp(24px, 3vw, 40px); }
.we-article-head .we-crumbs { justify-content: center; }
.we-article-head h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.18; margin: 14px 0 18px; }
.we-article-head .we-meta { justify-content: center; font-size: .88rem; }
.we-article-head .we-meta a { color: var(--we-text-2); font-weight: 600; }
.we-author-mini { display: inline-flex; align-items: center; gap: 10px; }
.we-author-mini img, .we-author-mini .we-avatar { width: 36px; height: 36px; font-size: .85rem; box-shadow: none; }
.we-article-cover { max-width: 1100px; margin: 0 auto clamp(32px, 4vw, 56px); border-radius: calc(var(--we-radius) * 1.6); overflow: hidden; box-shadow: var(--we-shadow-lg); }
.we-article-cover img { width: 100%; display: block; aspect-ratio: 16 / 8; object-fit: cover; }
.we-article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.we-article--full { grid-template-columns: minmax(0, 820px); justify-content: center; }
.we-article__lead { font-size: 1.15rem; color: var(--we-text-2); font-weight: 500; border-left: 4px solid var(--we-primary); padding: 4px 0 4px 18px; margin-bottom: 28px; }
.we-aside { position: sticky; top: calc(var(--we-header-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.we-toc { background: var(--we-soft); border-radius: var(--we-radius); padding: 20px 18px; }
.we-toc h4 { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 12px; }
.we-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; }
.we-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: .88rem; color: var(--we-text-2); line-height: 1.45; border-left: 2px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.we-toc a.lv3 { padding-left: 22px; font-size: .84rem; }
.we-toc a:hover { color: var(--we-primary); background: #fff; }
.we-toc a.active { color: var(--we-primary); background: #fff; border-left-color: var(--we-primary); font-weight: 600; }
.we-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.we-share span { font-size: .85rem; font-weight: 600; color: var(--we-text-2); margin-right: 4px; }
.we-share a, .we-share button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--we-line); background: #fff; color: var(--we-text-2); display: grid; place-items: center; transition: all .25s; font-size: .95rem; }
.we-share a:hover, .we-share button:hover { background: var(--we-primary); color: #fff; border-color: var(--we-primary); transform: translateY(-2px); }
.we-share .we-zalo-txt { font-size: .62rem; font-weight: 800; }
.we-author-box { display: flex; gap: 20px; align-items: flex-start; margin-top: 48px; padding: 26px; border-radius: var(--we-r-lg); background: linear-gradient(135deg, var(--we-ps), #fff); border: 1px solid var(--we-line); }
.we-author-box img, .we-author-box .we-avatar { width: 76px; height: 76px; font-size: 1.4rem; }
.we-author-box small { color: var(--we-text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.we-author-box h4 { margin: 2px 0 6px; }
.we-author-box p { margin: 0; color: var(--we-text-2); font-size: .93rem; }
.we-article-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--we-line); }
/* Chuyên mục + thẻ dưới bài: chuyên mục nổi hơn (nền nhạt màu chủ đạo), thẻ dạng viền; xuống dòng gọn trên điện thoại. */
.we-article-tax { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.we-chip--cat { background: color-mix(in srgb, var(--we-primary) 8%, #fff); border-color: color-mix(in srgb, var(--we-primary) 25%, #fff); color: var(--we-primary-dark); font-weight: 600; }
.we-chip--tag { padding: 5px 12px 5px 10px; }
@media (max-width: 1099.98px) { .we-article { grid-template-columns: 1fr; } .we-aside { position: static; } .we-toc { display: none; } }

/* Kiểu chữ nội dung soạn thảo */
.prose { font-size: 1.06rem; line-height: 1.8; color: #1d2b3a; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.85rem); margin: 2.2em 0 .7em; scroll-margin-top: calc(var(--we-header-h) + 24px); }
.prose h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); margin: 1.8em 0 .6em; scroll-margin-top: calc(var(--we-header-h) + 24px); }
.prose h4 { margin: 1.6em 0 .5em; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.25em; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--we-primary) 35%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500; }
.prose a:hover { text-decoration-color: var(--we-primary); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 30px; margin-bottom: .55em; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 18px; height: 18px; border-radius: 50%; background: var(--we-ps) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230078b8'%3e%3cpath d='M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69z'/%3e%3c/svg%3e") center / 10px no-repeat; }
.prose ol { padding-left: 1.4em; }
.prose ol > li { margin-bottom: .55em; padding-left: .3em; }
.prose ol > li::marker { color: var(--we-primary); font-weight: 700; }
.prose strong { color: var(--we-text); font-weight: 700; }
.prose blockquote { margin: 1.8em 0; padding: 20px 24px 20px 26px; border-left: 4px solid var(--we-primary); background: var(--we-soft); border-radius: 0 var(--we-radius) var(--we-radius) 0; color: var(--we-text-2); font-size: 1.05rem; }
.prose blockquote p:last-child { margin: 0; }
.prose img { border-radius: var(--we-radius); margin: 1.4em auto; display: block; }
.prose figure { margin: 1.8em 0; }
.prose figure.image { display: table; margin: 1.8em auto; }
.prose figure.image img { margin: 0; }
.prose figcaption { display: table-caption; caption-side: bottom; text-align: center; color: var(--we-text-3); font-size: .88rem; padding-top: 8px; }
.prose table { width: 100%; margin: 1.8em 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--we-line); border-radius: var(--we-radius); overflow: hidden; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 12px 16px; border-bottom: 1px solid var(--we-line); border-right: 1px solid var(--we-line); text-align: left; }
.prose th { background: var(--we-soft); font-weight: 700; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:last-child, .prose th:last-child { border-right: 0; }
.prose code { background: var(--we-soft); padding: 2px 6px; border-radius: 6px; font-size: .9em; color: var(--we-primary-dark); }
.prose pre { background: var(--we-dark); color: #e2e8f0; padding: 18px 20px; border-radius: var(--we-radius); overflow-x: auto; font-size: .9rem; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose iframe, .prose video { max-width: 100%; border: 0; border-radius: var(--we-radius); }
.prose iframe[src*="youtube"], .prose iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.prose hr { margin: 2.6em 0; }
.prose details { border: 1px solid var(--we-line); border-radius: var(--we-radius); padding: 14px 18px; margin: 1em 0; }
.prose details summary { font-weight: 650; cursor: pointer; }
.prose .ql-align-center { text-align: center; } .prose .ql-align-right { text-align: right; } .prose .ql-align-justify { text-align: justify; }
.prose .mce-pagebreak { display: none; }

/* ==========================================================================
   LIÊN HỆ / TÌM KIẾM / TÁC GIẢ / LỖI / BÁO GIÁ / SO SÁNH
   ========================================================================== */
.we-contact-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.we-contact-card { background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-radius); padding: 24px 22px; transition: transform .35s var(--we-ease), box-shadow .35s; }
.we-contact-card:hover { transform: translateY(-4px); box-shadow: var(--we-shadow); }
.we-contact-card .we-ico { width: 50px; height: 50px; font-size: 1.3rem; margin-bottom: 14px; }
.we-contact-card small { display: block; color: var(--we-text-3); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.we-contact-card b, .we-contact-card a { color: var(--we-text); font-weight: 700; font-size: 1.02rem; word-break: break-word; }
.we-contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (max-width: 991.98px) { .we-contact-cards { grid-template-columns: 1fr 1fr; } .we-contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .we-contact-cards { grid-template-columns: 1fr; } }

.we-searchpage form { display: flex; gap: 10px; padding: 8px; background: #fff; border: 1.5px solid var(--we-line-2); border-radius: var(--we-r-lg); box-shadow: var(--we-shadow-sm); position: relative; }
.we-searchpage form:focus-within { border-color: var(--we-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--we-primary) 12%, transparent); }
.we-searchpage input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 10px 14px; font-size: 1.1rem; background: none; }
.we-result { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--we-line); }
.we-result img, .we-result__ph { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; flex: none; background: var(--we-soft); display: grid; place-items: center; color: var(--we-primary); font-size: 1.6rem; }
.we-result h2 { font-size: 1.15rem; margin: 4px 0 6px; }
.we-result h2 a { color: var(--we-text); }
.we-result h2 a:hover { color: var(--we-primary); }
.we-result p { margin: 0; color: var(--we-text-2); font-size: .93rem; }

.we-author-hero { display: flex; gap: 28px; align-items: center; }
.we-author-hero img, .we-author-hero .we-avatar { width: 120px; height: 120px; font-size: 2.4rem; flex: none; box-shadow: 0 0 0 5px #fff, 0 12px 30px -10px rgba(13, 40, 80, .35); }
@media (max-width: 575.98px) { .we-author-hero { flex-direction: column; text-align: center; } }

.we-error { text-align: center; padding: clamp(60px, 8vw, 120px) 0; }
.we-error__code { font-size: clamp(6rem, 4rem + 10vw, 11rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; background: var(--we-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.we-error h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 10px 0; }
.we-error p { color: var(--we-text-2); max-width: 520px; margin: 0 auto 26px; }
.we-error .we-searchpage { max-width: 560px; margin: 0 auto 26px; }

.quote-table { border: 1px solid var(--we-line); border-radius: var(--we-radius); overflow: hidden; background: #fff; }
.quote-table .table { margin: 0; }
.quote-table td { vertical-align: middle; }
.quote-table .q-prod { display: flex; align-items: center; gap: 14px; min-width: 200px; }
.quote-table .q-prod img { width: 60px; height: 60px; object-fit: contain; border-radius: 12px; background: var(--we-soft); padding: 4px; }
.quote-table .q-prod a { color: var(--we-text); font-weight: 650; }
.quote-table .q-prod small { display: block; color: var(--we-text-3); }
.quote-table .q-price, .quote-table .q-sum { white-space: nowrap; font-weight: 600; }
.quote-table tfoot td { font-size: 1.05rem; background: var(--we-soft); }
.q-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--we-line-2); border-radius: 12px; overflow: hidden; }
.q-qty button { border: 0; background: var(--we-soft); width: 32px; height: 38px; font-size: 1.1rem; color: var(--we-text-2); }
.q-qty button:hover { background: var(--we-ps); color: var(--we-primary); }
.q-qty input { width: 46px; border: 0; text-align: center; height: 38px; font-weight: 600; -moz-appearance: textfield; }
.q-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.q-del { border: 0; background: none; color: var(--we-text-3); font-size: 1rem; width: 34px; height: 34px; border-radius: 10px; }
.q-del:hover { color: var(--we-accent); background: var(--we-as); }
.we-quote-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.we-quote-grid > [data-quote-form] { position: sticky; top: calc(var(--we-header-h) + 20px); }
@media (max-width: 991.98px) { .we-quote-grid { grid-template-columns: minmax(0, 1fr); } .we-quote-grid > [data-quote-form] { position: static; } }   /* minmax(0) – 1fr không co nhỏ hơn bảng sản phẩm → cả form tràn ngang trên điện thoại */
/* cột danh sách hẹp (điện thoại, laptop 992–1199px khi nằm cạnh form): mỗi sản phẩm thành một thẻ (ảnh + tên + nút xóa / đơn giá / số lượng + thành tiền) thay vì bảng phải kéo ngang */
.we-quote-grid > [data-quote-items] { container: quote / inline-size; }
@container quote (max-width: 600px) {
    .quote-table thead { display: none; }
    .quote-table .table, .quote-table tbody, .quote-table tfoot { display: block; }
    .quote-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prod del" "price price" "qty sum"; align-items: center; gap: 8px 12px; padding: 14px; border-bottom: 1px solid var(--we-line); }
    .quote-table tbody td { display: block; padding: 0; border: 0; background: none; }
    .quote-table .q-prod { grid-area: prod; min-width: 0; gap: 12px; }
    .quote-table .q-prod img { width: 52px; height: 52px; flex: none; }
    .quote-table .q-prod span { min-width: 0; overflow-wrap: anywhere; }
    .quote-table .q-price { grid-area: price; padding-left: 64px; font-weight: 500; font-size: .9rem; color: var(--we-text-2); }
    .quote-table tbody td:nth-child(3) { grid-area: qty; padding-left: 64px; }
    .quote-table .q-sum { grid-area: sum; text-align: right; }
    .quote-table tbody td:nth-child(5) { grid-area: del; align-self: start; }
    .quote-table tfoot tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; background: var(--we-soft); }
    .quote-table tfoot td { display: block; padding: 0; border: 0; text-align: left !important; font-size: 1rem; }
    .quote-table tfoot td:empty { display: none; }
}

.compare-table { min-width: 680px; background: #fff; }
.compare-table thead th { vertical-align: top; min-width: 190px; padding: 18px 14px; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--we-text); }
.compare-table tbody th { width: 180px; color: var(--we-text-2); font-weight: 600; background: var(--we-soft); }
.compare-img { width: 150px; height: 150px; object-fit: contain; border-radius: 14px; background: var(--we-soft); padding: 8px; }
.compare-table tr.compare-diff td { background: #fff9e6; }
.compare-table .price-sale { color: var(--we-accent); font-weight: 800; }
.we-compare-wrap { border: 1px solid var(--we-line); border-radius: var(--we-radius); overflow-x: auto; }

/* ==========================================================================
   PHẦN DÙNG CHUNG CỦA LÕI (đánh giá, gợi ý tìm kiếm, cookie, so sánh, báo giá online)
   ========================================================================== */
.price { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.price-sale { color: var(--we-accent); font-weight: 800; }
.price-old { color: var(--we-text-3); font-size: .9em; text-decoration: line-through; }
.price-from { color: var(--we-text-3); font-size: .85em; }
.stars { color: var(--we-star); letter-spacing: 1px; }
.stars.big { font-size: 1.4rem; }
.reviews-top { display: grid; grid-template-columns: 190px 1fr auto; gap: 28px; align-items: center; margin: 18px 0; padding: 24px; background: var(--we-soft); border-radius: var(--we-r-lg); }
.reviews-score { text-align: center; }
.reviews-score .score { font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.reviews-bars { display: flex; flex-direction: column; gap: 4px; max-width: 440px; }
.rb-row { display: grid; grid-template-columns: 42px 1fr 36px; align-items: center; gap: 10px; border: 0; background: none; padding: 3px 6px; border-radius: 8px; font-size: .9rem; color: inherit; }
.rb-row:hover, .rb-row.active { background: #fff; }
.rb-bar { height: 8px; background: var(--we-line); border-radius: 4px; overflow: hidden; }
.rb-bar i { display: block; height: 100%; background: var(--we-star); border-radius: 4px; }
.rb-n { color: var(--we-text-3); text-align: right; }
.reviews-tools { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; }
.review { border-bottom: 1px solid var(--we-line); padding: 18px 0; }
.review-head { display: flex; gap: 12px; align-items: center; }
.review-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--we-ps); color: var(--we-primary); display: grid; place-items: center; font-weight: 700; flex: none; }
.review-meta { font-size: .85rem; color: var(--we-text-3); }
.review-verified { font-size: .76rem; color: var(--we-ok); background: color-mix(in srgb, var(--we-ok) 12%, #fff); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.review-title { font-weight: 700; margin-top: 10px; }
.review-body { white-space: pre-wrap; margin-top: 4px; color: var(--we-text-2); }
.review-images { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.review-images img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; }
.review-reply { background: var(--we-soft); border-left: 3px solid var(--we-primary); border-radius: 0 12px 12px 0; padding: 12px 16px; margin-top: 12px; font-size: .95rem; }
.review-reply div { white-space: pre-wrap; }
.review-helpful { border: 1px solid var(--we-line); background: #fff; border-radius: 999px; font-size: .8rem; padding: 4px 12px; margin-top: 10px; color: var(--we-text-2); }
.review-form { background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-r-lg); padding: clamp(18px, 2vw + 8px, 32px); margin-top: 24px; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 2rem; color: var(--we-line-2); cursor: pointer; transition: color .15s, transform .15s; line-height: 1; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--we-star); }
.star-input input:focus-visible + label { outline: 2px solid var(--we-primary); border-radius: 4px; }
@media (max-width: 767.98px) { .reviews-top { grid-template-columns: 1fr; } .reviews-score { text-align: left; } }

.search-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 1250; background: #fff; border-radius: var(--we-radius); box-shadow: var(--we-shadow-lg); border: 1px solid var(--we-line); padding: 6px; max-height: 60vh; overflow-y: auto; }
.search-suggest a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: inherit; }
.search-suggest a:hover, .search-suggest a.active { background: var(--we-ps); }
.search-suggest img, .search-suggest .ss-ph { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; flex: none; background: var(--we-soft); }
.search-suggest .ss-text { display: flex; flex-direction: column; min-width: 0; }
.search-suggest .ss-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.search-suggest .ss-title b { color: var(--we-primary); }
.search-suggest small { color: var(--we-text-3); }
.search-suggest .ss-all { justify-content: center; color: var(--we-primary); font-weight: 650; border-top: 1px solid var(--we-line); border-radius: 0 0 10px 10px; margin-top: 4px; }

.cookie-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080; max-width: 560px; margin: 0 auto; padding: 18px 20px; border-radius: var(--we-r-lg); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--we-shadow-lg), 0 0 0 1px var(--we-line); font-size: .9rem; animation: we-fade-up .5s var(--we-spring); }
.cookie-consent p { margin: 0 0 12px; color: var(--we-text); }
.cookie-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cookie-btn { border: 0; border-radius: var(--we-btn-r); padding: 9px 18px; font-weight: 650; background: var(--we-soft); color: var(--we-text); }
.cookie-btn.primary { background: var(--we-grad); color: #fff; }

.fc-btn { box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--fc) 70%, transparent), 0 2px 6px rgba(0, 0, 0, .12); }
.compare-bar { position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 1040; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 10px 12px 10px 18px; box-shadow: var(--we-shadow-lg); border: 1px solid var(--we-line); font-size: .9rem; max-width: calc(100vw - 24px); animation: we-fade-up .45s var(--we-spring); }
.quote-fab { position: fixed; left: 16px; bottom: 16px; z-index: 1039; background: var(--we-grad-accent); color: #fff !important; padding: 11px 18px; border-radius: 999px; box-shadow: var(--we-shadow-a); font-weight: 650; }
.quote-fab b { display: inline-block; min-width: 1.5em; padding: 0 .4em; margin-left: .3rem; border-radius: 999px; background: #fff; color: var(--we-accent); text-align: center; }
.card-rating { font-size: .82rem; color: var(--we-text-3); }
.lang-code { display: inline-block; min-width: 24px; padding: 1px 5px; border-radius: 5px; background: var(--we-soft); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-align: center; }
.cms-popup-btn { border-radius: var(--we-btn-r); }

.qo-card { background: #fff; border-radius: var(--we-r-lg); box-shadow: var(--we-shadow); padding: clamp(18px, 3vw, 36px); border: 1px solid var(--we-line); }
.qo-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid var(--we-primary); padding-bottom: 18px; margin-bottom: 18px; }
.qo-logo { max-height: 56px; max-width: 220px; margin-bottom: 8px; display: block; }
.qo-company { font-weight: 700; font-size: 1.2rem; }
.qo-title { font-size: 2rem; font-weight: 800; color: var(--we-primary); letter-spacing: .02em; }
.qo-muted { color: var(--we-text-3); }
.qo-customer { background: var(--we-soft); border-radius: var(--we-r-sm); padding: 14px 18px; margin-bottom: 18px; }
.qo-table thead th { background: var(--we-primary); color: #fff; border: 0; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .9rem; }
.qo-totals { max-width: 380px; margin-left: auto; }
.qo-totals > div:not(.qo-muted) { display: flex; justify-content: space-between; padding: 4px 0; }
.qo-totals .grand { border-top: 1px solid var(--we-line); margin-top: 6px; padding-top: 10px !important; font-weight: 800; font-size: 1.25rem; color: var(--we-primary); }
.qo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.qo-accept { display: flex; gap: 10px; flex: 1 1 420px; }
@media (max-width: 575.98px) { .qo-accept { flex-direction: column; } }
@media print { .we-topbar, .we-header, .we-footer, .we-prefooter, .qo-actions, .we-pagehead, [data-fc], .quote-fab, .we-totop { display: none !important; } .qo-card { box-shadow: none; border: 0; padding: 0; } }

/* Đang xem trước trong Customizer: viền nhẹ cho biết đây là bản nháp */
.we-preview-flag { position: fixed; left: 50%; top: 10px; translate: -50% 0; z-index: 3000; background: var(--we-dark); color: #fff; font-size: .78rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; box-shadow: var(--we-shadow); pointer-events: none; opacity: .9; }

/* Bổ sung */
.we-filter__form { display: flex; flex-direction: column; gap: 14px; }
.we-gallery > a { display: block; color: inherit; }
.we-gallery--masonry > a { break-inside: avoid; margin-bottom: 16px; }
.we-gallery--masonry > a .we-gallery__item { margin-bottom: 0; }
.product-reviews { scroll-margin-top: calc(var(--we-header-h) + 76px); }
.we-testi .we-stars { display: flex; gap: 2px; font-size: .9rem; }
.we-crumbs li[aria-hidden] { display: inline-flex; }
.we-pd__info .we-eyebrow:hover { color: var(--we-primary-dark); }

/* ==========================================================================
   TIỆN ÍCH CỦA LÕI (CSS gốc ở /css/cms-widgets.css – ở đây chỉ chỉnh cho hợp thương hiệu)
   ========================================================================== */
:root { --cms-primary: var(--we-primary); --cms-text: var(--we-text); --cms-muted: var(--we-text-3); --cms-radius: var(--we-radius); }
.fc { font-family: var(--we-font); }
.fc-btn { width: 54px; height: 54px; }
.fc-items .fc-btn svg { width: 22px; height: 22px; }
.fc-label { background: var(--we-dark); border-radius: 10px; font-size: .8rem; padding: 6px 11px; box-shadow: var(--we-shadow-sm); }
.cms-popup-box { border-radius: var(--we-r-lg); font-family: var(--we-font); }
.cms-popup-body h3 { font-weight: 800; letter-spacing: -.02em; }
.cms-popup-content { color: var(--we-text-2); }
.cms-popup-btn { border-radius: var(--we-btn-r); }
.cms-bar-inner { font-weight: 500; }
/* Nút lên đầu trang đứng cạnh nút liên hệ nổi (không chồng lên nhau) */
body:has(.fc-right) .we-totop { right: 84px; bottom: 23px; }
body:has(.fc-right) .compare-bar { bottom: 84px; }
@media (max-width: 767.98px) {
    body.we-has-bar .fc { bottom: 84px; }
    body.we-has-bar:has(.fc-right) .we-totop { bottom: 89px; }
}
body.has-popup-bar .we-header { top: 44px; }

/* ---------- Trung tâm tải về (phase 33) – bố cục; thẻ / hộp tải dùng .cms-dl-* của lõi ---------- */
.we-dl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 26px; }
.we-dl-search { position: relative; display: flex; gap: 8px; flex: 1 1 340px; max-width: 580px; min-width: 0; }
.we-dl-search > .i { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--we-text-3); pointer-events: none; }
.we-dl-search input { flex: 1; min-width: 0; height: 48px; padding: 0 16px 0 44px; border-radius: 14px; border: 1px solid var(--we-line-2); background: #fff; font: inherit; color: var(--we-text); }
.we-dl-search input:focus { outline: none; border-color: var(--we-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--we-primary) 15%, transparent); }
.we-dl-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.we-dl-groups .we-chip { padding: 7px 13px; }
.we-dl-groups .we-chip.is-active { background: var(--we-primary); border-color: var(--we-primary); color: #fff; }
.we-dl-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: .72em; font-weight: 700; background: var(--we-soft); color: var(--we-text-2); }
.we-dl-groups .we-chip.is-active .we-dl-count { background: rgba(255,255,255,.22); color: #fff; }
.we-dl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--we-text-2); margin-bottom: 18px; }
.we-dl-list .cms-dl { border-color: var(--we-line); border-radius: var(--we-radius); }
.we-dl-detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.we-dl-aside { position: sticky; top: 96px; }
.we-dl-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.we-dl-facts .we-chip { padding: 6px 12px; }
.we-dl-changes { margin-top: 30px; padding: 22px 24px; border-radius: var(--we-radius); background: var(--we-soft); }
.we-dl-changes h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 10px; }
.we-dl-related { margin-top: clamp(40px, 5vw, 64px); }
.we-dl-related h2 { font-size: 1.35rem; margin-bottom: 16px; }
.we-dl-aside .cms-dl-box, .we-dl-aside .cms-dl-side { border-color: var(--we-line); }
@media (max-width: 991.98px) {
    .we-dl-detail { grid-template-columns: 1fr; }
    .we-dl-aside { position: static; order: -1; }
}

/* ---------- Công cụ API (phase 34) ---------- */
.we-tool-card { background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-r-lg, 20px); box-shadow: var(--we-shadow); padding: clamp(20px, 4vw, 44px); }
.we-tool-card .cms-tool-result { border-top-color: var(--we-line); }

/* ---------- Trung tâm hỗ trợ (phase 37) – bố cục; thẻ / hỏi đáp / phản hồi dùng .cms-kb-* của lõi ---------- */
.we-kb-hero { padding-bottom: clamp(34px, 3vw + 16px, 64px); }
.we-kb-search { margin-top: 26px; }
.we-kb-search .cms-kb-search input { height: 58px; border-color: var(--we-line-2); border-radius: var(--we-r-lg); box-shadow: var(--we-shadow); }
.we-kb-search .cms-kb-search-ico { top: 29px; }
.we-kb-search .cms-kb-search button { border-radius: var(--we-r-lg); background: var(--we-grad); box-shadow: var(--we-shadow-p); padding: 0 26px; }
.we-kb-search--inline { margin: 0 0 28px; }
.we-kb-search--inline .cms-kb-search { max-width: none; }
.we-kb-search--inline .cms-kb-search input { height: 52px; box-shadow: none; }
.we-kb-search--inline .cms-kb-search-ico { top: 26px; }
.we-kb-quick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; font-size: .88rem; color: var(--we-text-2); }
.we-kb-quick .we-chip { padding: 5px 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.we-kb-h { display: flex; align-items: center; gap: 10px; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); margin: clamp(34px, 4vw, 52px) 0 16px; }
.we-kb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); align-items: start; }
.we-kb-cols--one { grid-template-columns: minmax(0, 860px); justify-content: center; }
.we-kb-topic { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.we-kb-topic .we-kb-h:first-of-type { margin-top: 0; }
.we-kb-aside { position: sticky; top: calc(var(--we-header-h) + 24px); padding: 20px; border-radius: var(--we-radius); background: var(--we-soft); }
.we-kb-aside h2 { font-size: 1rem; margin: 0 0 10px; }
.we-kb-nav { display: grid; gap: 2px; }
.we-kb-nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--we-text); font-weight: 500; font-size: .93rem; transition: background .2s, color .2s; }
.we-kb-nav a:hover { background: #fff; color: var(--we-primary); }
.we-kb-nav .we-kb-nav-all { justify-content: flex-start; gap: 6px; margin-top: 6px; color: var(--we-primary); font-weight: 600; }
.we-kb-related { margin-top: clamp(24px, 3vw, 40px); }
.we-kb-side h2 { font-size: 1rem; }
.cms-kb-topic, .cms-kb-item, .cms-kb-faq { border-color: var(--we-line); border-radius: var(--we-radius); }
.cms-kb-topic:hover { box-shadow: var(--we-shadow); }
.cms-kb-topic-ico, .cms-kb-item-ico { background: var(--we-ps); }
.cms-kb-topic:hover .cms-kb-topic-ico { background: var(--we-grad); color: #fff; }
.cms-kb-faq-icon { background: var(--we-ps); }
.cms-kb-faq[open] .cms-kb-faq-icon { background: var(--we-grad); }
.cms-kb-faq[open] .cms-kb-faq-icon::before, .cms-kb-faq[open] .cms-kb-faq-icon::after { background: #fff; }
.cms-kb-faq-a { color: var(--we-text-2); }
.cms-kb-btn { border-radius: var(--we-btn-r); }
.cms-kb-btn:not(.cms-kb-btn--ghost) { background: var(--we-grad); box-shadow: var(--we-shadow-p); }
.cms-kb-fb { background: var(--we-soft); border-radius: var(--we-radius); }
.cms-kb-cta { border-radius: var(--we-r-lg); background: var(--we-ps); border-color: color-mix(in srgb, var(--we-primary) 18%, transparent); }
.cms-kb-cta-ico { background: var(--we-grad); box-shadow: var(--we-shadow-p); border-radius: 17px; }
.cms-product-help .cms-kb-list { margin-bottom: 4px; }
@media (max-width: 991.98px) {
    .we-kb-cols, .we-kb-topic { grid-template-columns: minmax(0, 1fr); }
    .we-kb-aside { position: static; }
}

/* ---------- Yêu cầu hỗ trợ (phase 38) – bố cục; form / trao đổi dùng .cms-tk-* của lõi ---------- */
.we-tk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.we-tk-card { background: #fff; border: 1px solid var(--we-line); border-radius: var(--we-r-lg); box-shadow: var(--we-shadow); padding: clamp(20px, 4vw, 40px); }
.we-tk-aside { position: sticky; top: calc(var(--we-header-h) + 24px); }
.we-tk-tip { padding: 22px; border-radius: var(--we-radius); background: var(--we-soft); }
.we-tk-tip h2 { font-size: 1.05rem; margin: 0 0 10px; }
.we-tk-tip ul { margin: 0 0 14px; padding-left: 1.2em; color: var(--we-text-2); font-size: .93rem; }
.we-tk-tiplink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .93rem; }
.cms-tk-field :is(input, select, textarea), .cms-tk-reply textarea, .cms-tk-rate textarea { border-color: var(--we-line-2); border-radius: var(--we-r-sm); }
.cms-tk-head, .cms-tk-rate, .cms-tk-bubble { border-color: var(--we-line); }
.cms-tk-head { border-radius: var(--we-r-lg); box-shadow: var(--we-shadow-sm); }
.cms-tk-reply { background: var(--we-soft); border-radius: var(--we-radius); }
.cms-tk-steps .is-done span, .cms-tk-steps .is-current span { background: var(--we-grad); }
@media (max-width: 991.98px) {
    .we-tk-layout { grid-template-columns: minmax(0, 1fr); }
    .we-tk-aside { position: static; }
}

/* ==========================================================================
   TÙY BIẾN NÂNG CAO (Giao diện → Theme → Tùy biến)
   Màu "tự động" = để trống: <html data-xxx-bg=""> → giữ giao diện gốc; có màu thì áp dụng và chữ tự đổi trắng / đen theo độ sáng nền
   (--c = màu nền, --we-auto-fg = oklch(from var(--c) …) khai báo tại chính phần tử). Mọi giá trị mặc định giữ nguyên giao diện ban đầu.
   ========================================================================== */
body { background: var(--we-body-bg, #fff); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--we-heading, var(--we-text)); }
h1, h2, .h1, .h2 { font-weight: var(--we-hw, 800); }
.we-section, .section { padding-block: calc(clamp(56px, 3vw + 40px, 104px) * var(--we-space, 1)); }
.we-section--tight { padding-block: calc(clamp(36px, 2vw + 24px, 64px) * var(--we-space, 1)); }

/* ---------- Kiểu thẻ (sản phẩm, bài viết, tính năng) ---------- */
[data-card-style="border"] :is(.we-card, .we-pcard, .we-post, .we-feature):hover { transform: none; box-shadow: none; border-color: var(--we-primary); }
[data-card-style="shadow"] :is(.we-card, .we-pcard, .we-post, .we-feature) { border-color: transparent; box-shadow: var(--we-shadow-sm); }
[data-card-style="shadow"] :is(.we-card, .we-pcard, .we-post, .we-feature):hover { box-shadow: var(--we-shadow); }
[data-card-style="flat"] :is(.we-card, .we-pcard, .we-post, .we-feature) { border-color: transparent; background: var(--we-soft); }
[data-card-style="flat"] :is(.we-card, .we-pcard, .we-post, .we-feature):hover { transform: none; box-shadow: none; }

/* ---------- Thanh trên cùng ---------- */
html:not([data-topbar-bg=""]) .we-topbar { --c: var(--we-topbar-bg); --we-auto-fg: oklch(from var(--c) clamp(.2, (.64 - l) * 1000, .99) .012 255); background: var(--we-topbar-bg); }
html:not([data-topbar-bg=""]) .we-topbar, html:not([data-topbar-fg=""]) .we-topbar { --tfg: var(--we-topbar-fg, var(--we-auto-fg)); color: color-mix(in srgb, var(--tfg) 80%, transparent); }
html:not([data-topbar-bg=""]) .we-topbar :is(a, .i), html:not([data-topbar-fg=""]) .we-topbar :is(a, .i) { color: var(--tfg); }
html:not([data-topbar-bg=""]) .we-topbar__menu, html:not([data-topbar-fg=""]) .we-topbar__menu { border-left-color: color-mix(in srgb, var(--tfg) 22%, transparent); }

/* ---------- Đầu trang: màu ---------- */
.we-header { --hfg: var(--we-header-fg, var(--we-text)); }
html:not([data-header-bg=""]) .we-header { --c: var(--we-header-bg); --we-auto-fg: oklch(from var(--c) clamp(.2, (.64 - l) * 1000, .99) .012 255); --hfg: var(--we-header-fg, var(--we-auto-fg)); background: var(--we-header-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.we-nav__link, .we-icon-btn, .we-logo__text { color: var(--we-nav-fg, var(--hfg)); }
.we-icon-btn { color: var(--hfg); }
.we-nav__link::after { background: var(--we-nav-accent, var(--we-accent)); }
.we-nav__item:hover > .we-nav__link, .we-nav__link.active { color: var(--we-nav-hover, var(--we-primary)); }
html:not([data-header-bg=""]) .we-nav__item:hover > .we-nav__link, html:not([data-header-bg=""]) .we-nav__link.active,
html:not([data-nav-fg=""]) .we-nav__item:hover > .we-nav__link, html:not([data-nav-fg=""]) .we-nav__link.active { color: var(--we-nav-hover, var(--we-nav-fg, var(--hfg))); }
html:not([data-header-bg=""]) .we-icon-btn:hover { background: color-mix(in srgb, var(--hfg) 14%, transparent); color: var(--hfg); }
html:not([data-header-bg=""]) .we-count { border-color: var(--we-header-bg); }
.we-nav__link { font-size: var(--we-nav-fs, .95rem); }
[data-nav-case="upper"] .we-nav__link { text-transform: uppercase; letter-spacing: .05em; font-size: calc(var(--we-nav-fs, 15px) * .88); }
html:not([data-cta-bg=""]) .we-header__cta { --c: var(--we-cta-bg); --we-auto-fg: oklch(from var(--c) clamp(.2, (.64 - l) * 1000, .99) .012 255); background: var(--we-cta-bg); color: var(--we-auto-fg); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--we-cta-bg) 75%, transparent); }
[data-logo-plate="true"] .we-logo img { background: #fff; padding: 5px 10px; border-radius: var(--we-r-sm); box-shadow: var(--we-shadow-sm); }

/* ---------- Kiểu mục menu ---------- */
[data-nav-style="plain"] .we-nav__link::after { display: none; }
[data-nav-style="pill"] .we-nav__link::after, [data-nav-style="solid"] .we-nav__link::after { display: none; }
html[data-nav-style="pill"] .we-nav__item:hover > .we-nav__link, html[data-nav-style="pill"] .we-nav__link.active { background: color-mix(in srgb, currentColor 13%, transparent); border-radius: 999px; }
html[data-nav-style="solid"] .we-nav__link { border-radius: var(--we-btn-r); transition: background .2s, color .2s; }
html[data-nav-style="solid"] .we-nav__item:hover > .we-nav__link, html[data-nav-style="solid"] .we-nav__link.active { --c: var(--we-nav-accent, var(--we-accent)); --we-auto-fg: oklch(from var(--c) clamp(.2, (.64 - l) * 1000, .99) .012 255); background: var(--we-nav-accent, var(--we-accent)); color: var(--we-auto-fg); }

/* ---------- Đầu trang: kích thước, dính, bóng ---------- */
.we-header__inner { height: var(--we-header-height, var(--we-header-h)); }
.we-header.is-scrolled .we-header__inner { height: calc(var(--we-header-height, 78px) - 12px); }
.we-logo img { height: var(--we-logo-h, 46px); }
.is-scrolled .we-logo img { height: calc(var(--we-logo-h, 46px) * .87); }
[data-header-sticky="false"] .we-header { position: relative; }
[data-header-shadow="always"] .we-header { box-shadow: 0 10px 30px -14px rgba(13, 40, 80, .22); border-bottom-color: var(--we-line); }
[data-header-shadow="none"] .we-header, [data-header-shadow="none"] .we-header.is-scrolled { box-shadow: none; border-bottom-color: transparent; }

/* ---------- Bố cục đầu trang: thanh menu riêng (stacked) / logo ở giữa (centered) ---------- */
@media (min-width: 1140px) {
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-header__inner { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo . actions" "nav nav nav"; align-items: center; gap: 0 22px; height: auto; }
    [data-header-layout="centered"] .we-header__inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: ". logo actions" "nav nav nav"; }
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-logo { grid-area: logo; height: var(--we-header-height, var(--we-header-h)); transition: height .35s var(--we-ease); }
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-header__actions { grid-area: actions; justify-self: end; }
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .is-scrolled .we-logo { height: calc(var(--we-header-height, 78px) - 18px); }
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-nav { grid-area: nav; margin: 0; display: block; position: relative; --c: var(--nbg); --we-auto-fg: oklch(from var(--c) clamp(.2, (.64 - l) * 1000, .99) .012 255); --nbg: var(--we-nav-bg, var(--we-primary)); }
    [data-header-layout="centered"] .we-nav { --nbg: var(--we-nav-bg, transparent); border-top: 1px solid var(--we-line); }
    html[data-header-layout="centered"]:not([data-nav-bg=""]) .we-nav { border-top-color: transparent; }
    /* Nền thanh menu tràn hết chiều ngang màn hình. */
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-nav::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--nbg); z-index: -1; }
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-nav > ul { min-height: var(--we-nav-h, 52px); gap: 4px; align-items: stretch; }
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-nav__item { display: flex; }
    /* Khối màu phủ kín chiều cao thanh menu (kiểu tab). */
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"])[data-nav-style="solid"] .we-nav__link { border-radius: 0; padding-inline: 18px; }
    [data-header-layout="centered"] .we-nav > ul { justify-content: center; }
    /* Chữ thanh menu: theo màu chọn, không thì tự tương phản với nền thanh. */
    html:is([data-header-layout="stacked"], [data-header-layout="tool"]) .we-nav__link,
    html[data-header-layout="centered"]:not([data-nav-bg=""]) .we-nav__link { color: var(--we-nav-fg, var(--we-auto-fg)); }
    html:is([data-header-layout="stacked"], [data-header-layout="tool"]) .we-nav__item:hover > .we-nav__link, html:is([data-header-layout="stacked"], [data-header-layout="tool"]) .we-nav__link.active,
    html[data-header-layout="centered"]:not([data-nav-bg=""]) .we-nav__item:hover > .we-nav__link,
    html[data-header-layout="centered"]:not([data-nav-bg=""]) .we-nav__link.active { color: var(--we-nav-hover, var(--we-nav-fg, var(--we-auto-fg))); }
    html:is([data-header-layout="stacked"], [data-header-layout="tool"])[data-nav-style="solid"] .we-nav__item:hover > .we-nav__link, html:is([data-header-layout="stacked"], [data-header-layout="tool"])[data-nav-style="solid"] .we-nav__link.active,
    html[data-header-layout="centered"][data-nav-style="solid"] .we-nav__item:hover > .we-nav__link, html[data-header-layout="centered"][data-nav-style="solid"] .we-nav__link.active { --c: var(--we-nav-accent, var(--we-accent)); --we-auto-fg: oklch(from var(--c) clamp(.2, (.64 - l) * 1000, .99) .012 255); color: var(--we-auto-fg); }
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-nav__link::after { bottom: 0; }
    :is(:is([data-header-layout="stacked"], [data-header-layout="tool"]), [data-header-layout="centered"]) .we-dropdown { top: 100%; }
}

/* ---------- Bố cục "tool": logo | ô tra cứu (công cụ API) | mạng xã hội – thanh menu riêng bên dưới, CHỈ thanh menu dính khi cuộn ---------- */
.we-header__tool, .we-header__social, .we-htool-bar { display: none; }
.we-htool { position: relative; width: 100%; max-width: 600px; }
.we-htool__box { display: flex; align-items: center; height: 50px; padding: 4px 4px 4px 16px; border: 1.5px solid color-mix(in srgb, var(--we-primary) 30%, var(--we-line)); border-radius: var(--we-btn-r); background: #fff; box-shadow: var(--we-shadow-sm); transition: border-color .2s, box-shadow .2s; }
.we-htool__box:focus-within { border-color: var(--we-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--we-primary) 14%, transparent); }
.we-htool__ico { flex: none; color: var(--we-primary); font-size: 1.15rem; }
.we-htool__box input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 10px; font: inherit; font-size: .98rem; color: var(--we-text); letter-spacing: .02em; }
.we-htool__box input::placeholder { color: color-mix(in srgb, var(--we-text) 45%, transparent); letter-spacing: 0; }
.we-htool__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 22px; border: 0; border-radius: max(4px, calc(var(--we-btn-r) - 4px)); background: var(--we-primary); color: #fff; font: inherit; font-weight: 700; font-size: .92rem; white-space: nowrap; cursor: pointer; transition: filter .2s, transform .15s; }
.we-htool__btn:hover { filter: brightness(1.08); }
.we-htool__btn:active { transform: scale(.97); }
.we-htool__btn:disabled { opacity: .78; cursor: progress; }
.we-htool.is-loading .we-htool__btn::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: cms-spin .7s linear infinite; }
.we-htool__err { margin-top: 4px; padding-left: 18px; }
.we-htool .cms-captcha { margin-top: 8px; }
.we-htool__panel { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; max-height: min(70vh, 560px); overflow: auto; padding: 22px 26px 18px; background: #fff; color: var(--we-text); border: 1px solid var(--we-line); border-radius: var(--we-radius); box-shadow: var(--we-shadow-lg); text-align: center; animation: cms-tool-in .3s ease; }
.we-htool__panel[hidden] { display: none; }
.we-htool__html { overflow-wrap: anywhere; }
.we-htool__html :is(h1, h2, h3, h4) { font-size: 1.08rem; line-height: 1.4; margin: 0 0 10px; padding-inline: 22px; }
.we-htool__html p { margin: 0 0 6px; font-size: .95rem; line-height: 1.55; }
.we-htool__panel .cms-tool-msg { margin-right: 22px; }
.we-htool__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--we-muted, #64748b); display: grid; place-items: center; cursor: pointer; font-size: .9rem; }
.we-htool__close:hover { background: var(--we-soft); color: var(--we-text); }
.we-htool__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 650; font-size: .9rem; color: var(--we-primary); }
.we-htool__more:hover { text-decoration: underline; }
.we-hphone { display: flex; align-items: center; gap: 10px; color: var(--hfg); white-space: nowrap; line-height: 1.2; }
.we-hphone > .i { flex: none; width: 40px; height: 40px; padding: 11px; border-radius: 50%; background: color-mix(in srgb, var(--we-primary) 12%, transparent); color: var(--we-primary); }
.we-hphone small { display: block; font-size: .72rem; color: color-mix(in srgb, var(--hfg) 62%, transparent); }
.we-hphone b { font-size: 1rem; }
.we-hphone:hover b { color: var(--we-primary); }
/* Mạng xã hội: nút tròn màu thương hiệu (đầu trang) – rê chuột nổi lên + bóng cùng màu; chân trang: rê chuột đổi sang màu thương hiệu. */
.we-social a[data-brand] { --brand: var(--we-primary); }
.we-social a[data-brand="facebook"] { --brand: #1877f2; }
.we-social a[data-brand="youtube"] { --brand: #ff0000; }
.we-social a[data-brand="zalo"] { --brand: #0068ff; }
.we-social a[data-brand="tiktok"] { --brand: #010101; }
.we-social a[data-brand="instagram"] { --brand: #e1306c; }
.we-social a[data-brand="linkedin"] { --brand: #0a66c2; }
.we-social a[data-brand]:hover { background: var(--brand); color: #fff; }
.we-social.we-social--header { margin: 0; gap: 8px; }
.we-social--header a[data-brand] { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.05rem; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--brand) 70%, transparent); transition: transform .25s var(--we-spring), box-shadow .25s, filter .2s; }
.we-social--header a[data-brand="instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.we-social--header a[data-brand="tiktok"] .i { filter: drop-shadow(1px 1px 0 #fe2c55) drop-shadow(-1px -1px 0 #25f4ee); }
.we-social--header a[data-brand="facebook"] .i { font-size: 1.2rem; }
.we-social--header a[data-brand="zalo"] .we-zalo-txt { font-size: .66rem; font-weight: 800; letter-spacing: -.01em; }
.we-social--header a[data-brand]:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--brand) 80%, transparent); }
@media (min-width: 1140px) {
    html[data-header-layout="tool"] { --we-hrow: var(--we-header-height, 78px); --we-header-h: var(--we-nav-h, 52px); }
    /* Dính với "top" âm = chiều cao hàng logo → hàng logo + ô tra cứu cuộn đi, thanh menu ở lại trên cùng. */
    html[data-header-layout="tool"]:not([data-header-sticky="false"]) .we-header { top: calc(-1 * var(--we-hrow)); }
    html[data-header-layout="tool"]:not([data-header-sticky="false"]) body.has-popup-bar .we-header { top: calc(44px - var(--we-hrow)); }
    html[data-header-layout="tool"] .we-header { --nbg: var(--we-nav-bg, var(--we-primary)); background: linear-gradient(to bottom, var(--we-header-bg, #fff) 0 var(--we-hrow), var(--nbg) var(--we-hrow)); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
    /* Không viền dưới: viền 1px (dù trong suốt) lộ đầu dải nền màu trắng ngay dưới thanh menu. Bóng mờ khi cuộn vẫn giữ (box-shadow). */
    html[data-header-layout="tool"] .we-header .we-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo tool social" "nav nav actions"; gap: 0 28px; height: auto; }
    html[data-header-layout="tool"] .we-header .we-logo { height: var(--we-hrow); }
    html[data-header-layout="tool"] .we-header.is-scrolled .we-logo img { height: var(--we-logo-h, 46px); }
    [data-header-layout="tool"] .we-header__tool { grid-area: tool; display: flex; justify-content: center; min-width: 0; }
    [data-header-layout="tool"] .we-header__social { grid-area: social; display: flex; align-items: center; gap: 16px; justify-self: end; }
    [data-header-layout="tool"] .we-nav::before { display: none; }
    [data-header-layout="tool"] .we-header__actions { --c: var(--nbg); --we-auto-fg: oklch(from var(--c) clamp(.2, (.64 - l) * 1000, .99) .012 255); }
    html[data-header-layout="tool"] .we-header .we-header__actions .we-icon-btn { color: var(--we-nav-fg, var(--we-auto-fg)); }
    html[data-header-layout="tool"] .we-header .we-header__actions .we-icon-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
    html[data-header-layout="tool"] .we-header .we-count { border-color: var(--nbg); }
}
@media (min-width: 1140px) and (max-width: 1299.98px) {
    [data-header-layout="tool"] .we-hphone span { display: none; }
    html[data-header-layout="tool"] .we-header .we-header__inner { gap: 0 20px; }
}
/* Biểu tượng ngôi nhà trước mục Trang chủ (không xoay như mũi tên menu con). */
.we-nav .we-nav__item .we-nav__link .i.we-nav__home { font-size: 1.05em; opacity: 1; transform: none; margin-top: -2px; }
@media (min-width: 1140px) {
    /* Bố cục "tool" (kiểu FingerTAS): thanh menu cao hơn, mục đang chọn / rê chuột – chữ màu nhấn + gạch chân nằm trong thanh, ngay dưới chữ. */
    html[data-header-layout="tool"] { --we-header-h: var(--we-nav-h, 60px); }
    html[data-header-layout="tool"] .we-nav > ul { min-height: var(--we-nav-h, 60px); }
    html[data-header-layout="tool"] .we-nav__link::after { bottom: 12px; left: 14px; right: 14px; }
    html[data-header-layout="tool"]:is([data-nav-style="underline"], :not([data-nav-style])) .we-nav__item:hover > .we-nav__link,
    html[data-header-layout="tool"]:is([data-nav-style="underline"], :not([data-nav-style])) .we-nav__link.active { color: var(--we-nav-hover, var(--we-nav-accent, var(--we-accent))); }
}
/* Máy tính bảng / điện thoại: ô tra cứu tràn ngang ngay dưới đầu trang, kết quả hiện ngay bên dưới (không phủ). */
@media (max-width: 1139.98px) {
    html[data-header-layout="tool"] .we-htool-bar { display: block; position: relative; z-index: 999; padding: 10px 0 12px; background: var(--we-header-bg, #fff); border-bottom: 1px solid var(--we-line); }
    .we-htool--bar { max-width: none; }
    .we-htool--bar .we-htool__box { height: 48px; }
    .we-htool--bar .we-htool__panel { position: relative; top: auto; margin-top: 10px; max-height: none; padding: 18px 16px 14px; box-shadow: var(--we-shadow-sm); }
}
@media (max-width: 400px) {
    .we-htool__ico { display: none; }
    .we-htool__box { padding-left: 4px; }
    .we-htool__btn { padding: 0 14px; }
}

/* ---------- Chân trang ---------- */
html:not([data-footer-bg=""]) .we-footer { --c: var(--we-footer-bg); --we-auto-fg: oklch(from var(--c) clamp(.2, (.64 - l) * 1000, .99) .012 255); background: var(--we-footer-bg); }
html:not([data-footer-bg=""]) .we-footer, html:not([data-footer-fg=""]) .we-footer { --ffg: var(--we-footer-fg, var(--we-auto-fg)); color: color-mix(in srgb, var(--ffg) 72%, transparent); }
html:not([data-footer-bg=""]) .we-footer :is(a, .we-footer__contact .i), html:not([data-footer-fg=""]) .we-footer :is(a, .we-footer__contact .i) { color: color-mix(in srgb, var(--ffg) 86%, transparent); }
html:not([data-footer-bg=""]) .we-footer :is(h4, .we-footer__brand-text, a:hover), html:not([data-footer-fg=""]) .we-footer :is(h4, .we-footer__brand-text, a:hover) { color: var(--ffg); }
html:not([data-footer-bg=""]) .we-footer .we-social a, html:not([data-footer-fg=""]) .we-footer .we-social a { background: color-mix(in srgb, var(--ffg) 9%, transparent); color: var(--ffg); }
html:not([data-footer-bg=""]) .we-footer__bottom, html:not([data-footer-fg=""]) .we-footer__bottom { border-top-color: color-mix(in srgb, var(--ffg) 12%, transparent); }
[data-footer-glow="false"] .we-footer::before { display: none; }

@media (max-width: 640px) {
    .we-header__inner, .we-header.is-scrolled .we-header__inner { height: 64px; }
    .we-logo img, .is-scrolled .we-logo img { height: min(var(--we-logo-h, 46px), 38px); }
}