/* ==========================================================================
   May Trang Phục Việt Đức — stylesheet chính
   Viết tay, không cần build. Chỉ 1 file duy nhất.
   ========================================================================== */

:root {
    --vd-red:        #C8102E;
    --vd-red-dark:   #A00D24;
    --vd-red-soft:   #FDECEF;
    --vd-navy:       #2B2E6E;
    --vd-navy-dark:  #22245A;
    --vd-ink:        #1F2937;
    --vd-muted:      #6B7280;
    --vd-line:       #E5E7EB;
    --vd-bg-soft:    #F5F7FB;
    --vd-white:      #FFFFFF;

    --vd-radius:     10px;
    --vd-radius-lg:  16px;
    --vd-shadow:     0 1px 3px rgba(17, 24, 39, .08), 0 6px 20px rgba(17, 24, 39, .06);
    --vd-shadow-lg:  0 10px 40px rgba(17, 24, 39, .12);
    --vd-container:  1200px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--vd-ink);
    background: var(--vd-white);
    -webkit-font-smoothing: antialiased;
    /* chặn tràn ngang; bảng rộng đã có .table-wrap tự cuộn riêng */
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0 0 .6em; line-height: 1.25; font-weight: 700; }
p   { margin: 0 0 1em; }
ul  { margin: 0; padding: 0; list-style: none; }

.container {
    width: 100%;
    max-width: var(--vd-container);
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- tiện ích ---------- */
.text-center  { text-align: center; }
.text-red     { color: var(--vd-red); }
.text-navy    { color: var(--vd-navy); }
.text-muted   { color: var(--vd-muted); }
.bg-soft      { background: var(--vd-bg-soft); }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 16px; }
.mb-4  { margin-bottom: 24px; }
.mb-5  { margin-bottom: 32px; }

.section     { padding: 56px 0; }
.section-sm  { padding: 36px 0; }

/* ---------- tiêu đề section ---------- */
.section-head { margin-bottom: 32px; }

.section-head h2 {
    font-size: 28px;
    text-transform: uppercase;
    color: var(--vd-red);
    margin-bottom: 10px;
    letter-spacing: .3px;
}

.section-head .lead {
    color: var(--vd-muted);
    max-width: 760px;
    margin: 0 auto;
}

.section-head.center { text-align: center; }

/* gạch chân đỏ dưới tiêu đề — lấy motif từ catalogue */
.section-head .rule {
    display: block;
    width: 68px;
    height: 4px;
    background: var(--vd-red);
    border-radius: 2px;
    margin-bottom: 14px;
}
.section-head.center .rule { margin-left: auto; margin-right: auto; }

/* ---------- nút ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--vd-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .18s;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary  { background: var(--vd-red); color: #fff; }
.btn-primary:hover  { background: var(--vd-red-dark); }

.btn-navy     { background: var(--vd-navy); color: #fff; }
.btn-navy:hover     { background: var(--vd-navy-dark); }

.btn-outline  { background: transparent; color: var(--vd-red); border-color: var(--vd-red); }
.btn-outline:hover  { background: var(--vd-red); color: #fff; }

.btn-ghost-white { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-white:hover { background: #fff; color: var(--vd-navy); }

.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 14px 30px; font-size: 16px; }

/* ==========================================================================
   HEADER
   ========================================================================== */

/* topbar */
.topbar {
    background: var(--vd-red);
    color: #fff;
    font-size: 13.5px;
    line-height: 38px;
}
.topbar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a:hover { text-decoration: underline; }
.topbar .sep { opacity: .45; }

/* header chính */
.site-header { background: #fff; border-bottom: 1px solid var(--vd-line); }
.site-header.is-stuck { position: sticky; top: 0; z-index: 90; box-shadow: var(--vd-shadow); }

.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
}

/* logo — file thật tỉ lệ ~1.95:1, để height auto cho khỏi bị bóp méo */
.logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo .vd-logo { width: 62px; height: auto; flex-shrink: 0; }
.logo-text .name {
    display: block;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    color: var(--vd-red);
    text-transform: uppercase;
    letter-spacing: .2px;
}
.logo-text .tagline {
    display: block;
    font-size: 12px;
    color: var(--vd-muted);
    font-style: italic;
}

/* form tìm kiếm */
.header-search { flex: 1; max-width: 380px; }
.header-search form { display: flex; }
.header-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--vd-line);
    border-right: 0;
    border-radius: var(--vd-radius) 0 0 var(--vd-radius);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}
.header-search input:focus { border-color: var(--vd-red); }
.header-search button {
    padding: 10px 16px;
    border: 0;
    background: var(--vd-red);
    color: #fff;
    border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.header-search button:hover { background: var(--vd-red-dark); }

/* hotline ở header */
.header-hotline { display: flex; align-items: center; gap: 10px; }
.header-hotline .ico {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--vd-red-soft);
    color: var(--vd-red);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.header-hotline .label { font-size: 12px; color: var(--vd-muted); line-height: 1.3; }
.header-hotline .num   { font-size: 17px; font-weight: 800; color: var(--vd-red); line-height: 1.2; }

/* nút mở menu mobile */
.nav-toggle,
.search-toggle {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--vd-line);
    background: #fff;
    border-radius: var(--vd-radius);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--vd-ink);
}

/* ---------- thanh menu ---------- */
.main-nav { background: var(--vd-navy); }
.main-nav > .container { display: flex; align-items: center; }

.nav-list { display: flex; flex-wrap: wrap; }
.nav-list > li { position: relative; }

.nav-list > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 17px;
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
    text-transform: uppercase;
    letter-spacing: .2px;
    transition: background .18s;
}
.nav-list > li > a:hover,
.nav-list > li.active > a { background: var(--vd-red); }

.nav-list .caret { width: 10px; height: 10px; opacity: .8; }

/* dropdown */
.nav-list .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 290px;
    background: #fff;
    border-radius: 0 0 var(--vd-radius) var(--vd-radius);
    box-shadow: var(--vd-shadow-lg);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 80;
}
.nav-list > li:hover .submenu,
.nav-list > li:focus-within .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-list .submenu a {
    display: block;
    padding: 9px 20px;
    font-size: 14.5px;
    color: var(--vd-ink);
    border-left: 3px solid transparent;
}
.nav-list .submenu a:hover {
    background: var(--vd-bg-soft);
    color: var(--vd-red);
    border-left-color: var(--vd-red);
}

/* ==========================================================================
   HERO / SLIDER
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    overflow: hidden;
    /* chừa chỗ cho dải sóng ở đáy */
    padding-bottom: 72px;
    background: var(--vd-navy-dark);
}

/* ---- nền: gradient chuyển động + các khối mờ trôi nhẹ ---- */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        #284CB6 0%,
        #1D378E 42%,
        #152768 72%,
        #101B52 100%);
}
.hero-scrim {
    position: absolute;
    inset: 0;
    background: rgba(5, 13, 54, .08);
}
.hero-bg::after,
.hero-blob { display: none; }
/* ---- bố cục ---- */
.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 20px;
}

/* ---- phần chữ: mỗi slide một khối, chồng lên nhau rồi mờ dần ---- */
.hero-copy { position: relative; }
.hero-texts { position: relative; }

.hero-text {
    position: absolute;
    inset: 0 0 auto 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
    pointer-events: none;
}
.hero-text.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* Các phần tử trong slide đang hiện trôi lên lần lượt.
   Nhịp slide 4s nên vào nhanh (~0.6s là xong), để lại ~3.4s đứng yên cho dễ đọc. */
.hero-text.is-active .hero-chip  { animation: heroUp .45s .02s both; }
.hero-text.is-active h1          { animation: heroUp .45s .09s both; }
.hero-text.is-active .hero-sub   { animation: heroUp .45s .16s both; }

@keyframes heroUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(4px);
    padding: 6px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}
.hero-chip::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #6EE7A8;
    box-shadow: 0 0 0 3px rgba(110,231,168,.28);
}

.hero h1 {
    font-size: clamp(27px, 3.4vw, 43px);
    line-height: 1.16;
    margin-bottom: 16px;
    letter-spacing: -.4px;
}
/* Nhấn bằng gạch chân dày mềm, không dùng khối màu đặc cho đỡ cứng. */
.hero h1 em {
    font-style: normal;
    color: #FFE1E7;
    text-decoration: underline;
    text-decoration-color: #FF4D73;
    text-decoration-thickness: 7px;
    text-underline-offset: 7px;
    text-decoration-skip-ink: none;
}
.hero .hero-sub {
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(255,255,255,.9);
    max-width: 540px;
    margin-bottom: 26px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---- phần ảnh ---- */
.hero-media { position: relative; }

.hero-stage {
    position: relative;
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
    outline: 1px solid rgba(255,255,255,.18);
    outline-offset: -1px;
}
/* Ảnh banner thương hiệu đều là khổ ngang 3:2 — khung giữ đúng tỉ lệ đó
   để ảnh vừa khít, không phải cắt và không để lề. */
.hero-stage::before { content: ''; display: block; padding-top: 66.7%; }

.hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    /* Nhịp slide 4s nên mờ nhanh lại, kẻo ảnh vừa hiện rõ đã phải đổi. */
    transition: opacity .55s ease;
}
.hero-slide.is-active { opacity: 1; }
/* contain vì ảnh banner có logo sát mép trên-trái — cover sẽ cắt mất logo. */
.hero-slide img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: var(--hero-x, 50%) var(--hero-y, 50%);
}

/* Video khổ ngang: phủ kín khung. */
.hero-slide video {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--hero-x, 50%) var(--hero-y, 50%);
    display: block;
    background: #0B1020;
}

/* ---- Video khổ DỌC (9:16) trong khung ngang 3:2 ----
   Không thể phủ kín mà không cắt mất đầu/chân người, nên:
   video canh giữa theo chiều cao (contain), hai bên lấp bằng chính
   ảnh poster phóng to + làm mờ. Cách này giữ nguyên chiều cao khung
   nên PC và mobile đều không nhảy layout. */
.hero-vfill {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.1) brightness(.62);
    transform: scale(1.18);   /* phóng to để viền mờ không hở mép */
    z-index: 0;
}

.hero-slide video.is-vertical {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
    background: transparent;
    /* tách khỏi nền mờ cho có chiều sâu */
    box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}

/* Dấu play nhỏ trên ảnh nhỏ của slide video */
.hero-thumbs button { position: relative; }
.thumb-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(11,16,32,.7);
    border: 1px solid rgba(255,255,255,.85);
}
.thumb-play::after {
    content: '';
    position: absolute;
    top: 50%; left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #fff;
}
/* Bỏ hiệu ứng zoom chậm: ảnh vừa khít khung nên phóng to là cắt mất logo. */

/* nhãn tên sản phẩm nổi trên ảnh */
.hero-slide figcaption {
    position: absolute;
    left: 18px; bottom: 18px;
    background: rgba(17,20,45,.62);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 999px;
    transition: background .2s;
}
.hero-slide figcaption:hover { background: var(--vd-red); border-color: var(--vd-red); }

/* Huy hiệu tròn nổi ở góc ảnh. Đặt ở phải-dưới vì góc trái-trên của ảnh
   banner đã có sẵn logo công ty, để trên đó là che mất. */
.hero-ring {
    position: absolute;
    right: -14px; bottom: -14px;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--vd-red);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    box-shadow: 0 12px 28px rgba(200,16,46,.45);
    border: 3px solid rgba(255,255,255,.9);
    z-index: 2;
}
.hero-ring b { font-size: 27px; font-weight: 800; }
.hero-ring span { font-size: 10.5px; font-weight: 600; margin-top: 3px; letter-spacing: .3px; }

/* ---- điều hướng: dải ảnh nhỏ + mũi tên ---- */
.hero-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}
.hero-thumbs { display: flex; gap: 9px; }
.hero-thumbs button {
    width: 52px; height: 52px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.28);
    border-radius: 12px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .58;
    transition: opacity .2s, border-color .2s, transform .2s;
}
.hero-thumbs button:hover { opacity: .9; transform: translateY(-2px); }
.hero-thumbs button.is-active { opacity: 1; border-color: #fff; }
.hero-thumbs img, .hero-thumbs video { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.hero-arrows { display: flex; gap: 8px; margin-left: auto; }
.hero-arrows button {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.1);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s;
}
.hero-arrows button:hover { background: #fff; color: var(--vd-navy); border-color: #fff; }

/* thanh tiến trình tự chạy */
.hero-progress {
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.2);
    overflow: hidden;
    margin-top: 18px;
}
.hero-progress i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #fff, #FFD8DE);
}
.hero-progress.is-running i { animation: heroBar var(--hero-delay, 6s) linear both; }
@keyframes heroBar { from { width: 0; } to { width: 100%; } }

/* ---- dải sóng đáy hero: lấy motif bìa catalogue (đỏ + trắng + navy) ---- */
.hero-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    width: 100%;
    height: 78px;
    display: block;
    pointer-events: none;
}

/* ==========================================================================
   HERO — điều chỉnh cho ảnh banner khổ ngang
   ========================================================================== */

/* Ảnh ngang thì cho cột ảnh rộng hơn cột chữ một chút. */
.hero-inner { grid-template-columns: .92fr 1.08fr; }

/* Chỉ còn 1 ảnh (config site.slider_enabled = false) thì ẩn phần điều hướng. */
.hero--single .hero-nav,
.hero--single .hero-progress { display: none; }

@media (max-width: 860px) {
    .hero-media { max-width: 620px; }
    .hero-ring { right: 4px; bottom: 4px; }
}

/* ---- tôn trọng thiết lập giảm chuyển động của người dùng ---- */
@media (prefers-reduced-motion: reduce) {
    .hero-bg::before,
    .hero-blob,
    .hero-slide.is-active img,
    .hero-text.is-active .hero-chip,
    .hero-text.is-active h1,
    .hero-text.is-active .hero-sub,
    .hero-progress.is-running i { animation: none; }
    .hero-slide { transition: none; }
    .hero-progress { display: none; }
}

/* ==========================================================================
   THANH CAM KẾT
   ========================================================================== */
.strengths { border-bottom: 1px solid var(--vd-line); background: #fff; }
.strengths .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.strength {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 24px 14px;
    border-right: 1px solid var(--vd-line);
    text-align: center;
}
.strength:last-child { border-right: 0; }
.strength .ico {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--vd-red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.strength h3 { font-size: 14.5px; line-height: 1.35; margin: 0; }

/* ==========================================================================
   LƯỚI DANH MỤC
   ========================================================================== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.cat-card {
    background: #fff;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.cat-card:hover {
    box-shadow: var(--vd-shadow-lg);
    transform: translateY(-3px);
    border-color: transparent;
}
.cat-card .thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
}
/* Cũng là ảnh nguyên trang catalogue — dùng contain cho khỏi cắt mất nội dung. */
.cat-card .thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform .35s;
}
.cat-card:hover .thumb img { transform: scale(1.05); }
.cat-card .body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.cat-card h3 { font-size: 16.5px; margin-bottom: 6px; }
.cat-card h3 a:hover { color: var(--vd-red); }
.cat-card p { font-size: 13.5px; color: var(--vd-muted); flex: 1; margin-bottom: 12px; }
.cat-card .more { font-size: 14px; font-weight: 600; color: var(--vd-red); }
.cat-card .more:hover { text-decoration: underline; }

/* ==========================================================================
   THẺ SẢN PHẨM
   ========================================================================== */
/* Lưới sản phẩm: thẻ có bề rộng tối đa nên hàng thiếu vẫn căn giữa,
   không bị dồn hết sang trái để hở một mảng trống bên phải. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 272px));
    justify-content: center;
    gap: 22px;
}
.product-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 280px)); }

/* Carousel sản phẩm nổi bật: nhịp và điều khiển đồng nhất với carousel khách hàng. */
.product-carousel {
    --product-cols: 4;
    --product-gap: 20px;
    position: relative;
    padding: 0 34px;
}
.product-viewport { overflow: hidden; padding: 4px 0 18px; }
.product-track {
    display: flex;
    align-items: stretch;
    gap: var(--product-gap);
    transition: transform .65s ease;
    will-change: transform;
}
.product-track .p-card {
    flex: 0 0 calc((100% - (var(--product-cols) - 1) * var(--product-gap)) / var(--product-cols));
    min-width: 0;
}
.product-carousel .p-card .thumb img {
    object-fit: cover;
    object-position: center 18%;
}
/* Card carousel chỉ giữ ảnh và tên để mọi thẻ thẳng hàng, dễ lướt. */
.product-carousel .p-card .tag,
.product-carousel .p-card .cat-label,
.product-carousel .p-card p { display: none; }
.product-carousel .p-card .actions { display: flex; margin-top: auto; padding-top: 12px; }
.product-carousel .p-card .actions .btn:first-child { display: none; }
.product-carousel .p-card .actions .btn:last-child { flex: 1; }
.product-carousel .p-card .body {
    flex: 1;
    padding: 13px 12px 15px;
    text-align: center;
}
.product-carousel .p-card h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}
.product-arrow {
    position: absolute;
    top: 38%;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--vd-line);
    border-radius: 50%;
    background: #fff;
    color: var(--vd-navy);
    box-shadow: var(--vd-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}
.product-arrow:hover { background: var(--vd-red); border-color: var(--vd-red); color: #fff; }
.product-prev { left: -2px; }
.product-prev svg { transform: rotate(180deg); }
.product-next { right: -2px; }

/* Thẻ "Xem tất cả" đặt cuối lưới — biến chỗ trống thành lối đi tiếp. */
.p-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 26px 20px;
    min-height: 260px;
    border: 2px dashed var(--vd-line);
    border-radius: var(--vd-radius-lg);
    background: var(--vd-bg-soft);
    color: var(--vd-muted);
    transition: border-color .2s, background .2s, transform .2s;
}
.p-more:hover {
    border-color: var(--vd-red);
    background: var(--vd-red-soft);
    transform: translateY(-3px);
}
.p-more .ico {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--vd-line);
    color: var(--vd-red);
    display: flex; align-items: center; justify-content: center;
}
.p-more:hover .ico { border-color: var(--vd-red); }
.p-more b { font-size: 15.5px; color: var(--vd-ink); line-height: 1.35; }
.p-more span { font-size: 13.5px; }
.p-more .go { font-size: 14px; font-weight: 600; color: var(--vd-red); }

.p-card {
    background: #fff;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.p-card:hover { box-shadow: var(--vd-shadow-lg); transform: translateY(-3px); }

.p-card .thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    /* nền trắng để phần lề khi thu vừa khung hoà vào thẻ */
    background: #fff;
}
/* Ảnh sản phẩm là nguyên trang catalogue (có chữ, có ảnh chi tiết) nên phải
   dùng contain — cover sẽ cắt mất phần trên và phần hai bên. */
.p-card .thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: var(--hero-x, 50%) var(--hero-y, 50%);
    transition: transform .35s;
}
.p-card:hover .thumb img { transform: scale(1.05); }

.p-card .tag {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--vd-red);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.p-card .body { padding: 14px 16px 18px; flex: 1; display: flex; flex-direction: column; }
.p-card .cat-label { font-size: 12px; color: var(--vd-red); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.p-card h3 { font-size: 16px; margin-bottom: 6px; }
.p-card h3 a:hover { color: var(--vd-red); }
.p-card p { font-size: 13.5px; color: var(--vd-muted); flex: 1; margin-bottom: 14px; }
.p-card .actions { display: flex; gap: 8px; }
.p-card .actions .btn { flex: 1; }

/* ==========================================================================
   DỊCH VỤ
   ========================================================================== */
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.service-card {
    display: grid;
    grid-template-columns: 210px 1fr;
    background: #fff;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    transition: box-shadow .2s;
}
.service-card:hover { box-shadow: var(--vd-shadow-lg); }
.service-card .thumb { background: var(--vd-bg-soft); }
.service-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.service-card .body { padding: 22px; }
.service-card h3 { font-size: 18px; color: var(--vd-navy); }
.service-card p  { font-size: 14px; color: var(--vd-muted); }
.service-card ul li {
    position: relative;
    padding-left: 20px;
    font-size: 13.8px;
    margin-bottom: 5px;
}
.service-card ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--vd-red);
}

/* ==========================================================================
   GIỚI THIỆU (2 cột)
   ========================================================================== */
.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
}
.about-split .figure {
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    box-shadow: var(--vd-shadow);
}
.about-quote {
    background: var(--vd-red);
    color: #fff;
    padding: 20px 26px;
    border-radius: var(--vd-radius);
    font-style: italic;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    margin-top: 22px;
}

.capability-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.capability-list .ico {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--vd-red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.capability-list strong { display: block; font-size: 15px; }
.capability-list span { font-size: 13.5px; color: var(--vd-muted); }

/* ==========================================================================
   VÌ SAO CHỌN
   ========================================================================== */
.reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.reason-card {
    background: #fff;
    border-radius: var(--vd-radius-lg);
    padding: 26px 22px;
    text-align: center;
    box-shadow: var(--vd-shadow);
    border-top: 4px solid var(--vd-red);
}
.reason-card .num {
    font-size: 34px;
    font-weight: 800;
    color: var(--vd-red);
    line-height: 1.1;
    margin-bottom: 6px;
}
.reason-card h3 { font-size: 16px; margin-bottom: 6px; }
.reason-card p  { font-size: 13.5px; color: var(--vd-muted); margin: 0; }

/* ==========================================================================
   DẢI CTA
   ========================================================================== */
.cta-band {
    background: var(--vd-red);
    color: #fff;
    padding: 42px 0;
}
.cta-band .btn-primary {
    background: #fff;
    border-color: #fff;
    color: var(--vd-red);
}
.cta-band .btn-primary:hover { background: #F2F2F2; border-color: #F2F2F2; }
.cta-band .btn-ghost-white {
    background: var(--vd-ink);
    border-color: var(--vd-ink);
    color: #fff;
}
.cta-band .btn-ghost-white:hover { background: #000; border-color: #000; color: #fff; }
.cta-band .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
.cta-band h2 { font-size: 25px; margin-bottom: 6px; }
.cta-band p  { margin: 0; opacity: .9; }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   KHÁCH HÀNG
   ========================================================================== */
.client-carousel {
    --client-cols: 6;
    --client-gap: 18px;
    position: relative;
    padding: 0 34px;
}
.client-viewport {
    overflow: hidden;
    padding: 4px 0 18px;
}
.client-track {
    display: flex;
    gap: var(--client-gap);
    transition: transform .65s ease;
    will-change: transform;
}
.client-track .client-card {
    flex: 0 0 calc((100% - (var(--client-cols) - 1) * var(--client-gap)) / var(--client-cols));
    min-width: 0;
}
.client-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--vd-line);
    border-radius: 50%;
    background: #fff;
    color: var(--vd-navy);
    box-shadow: var(--vd-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}
.client-arrow:hover { background: var(--vd-red); border-color: var(--vd-red); color: #fff; }
.client-prev { left: -2px; }
.client-prev svg { transform: rotate(180deg); }
.client-next { right: -2px; }
.client-card {
    background: #fff;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-lg);
    padding: 20px 16px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.client-card:hover {
    box-shadow: var(--vd-shadow-lg);
    border-color: var(--vd-red);
    transform: translateY(-2px);
}

/* Khung logo cao bằng nhau để các thẻ thẳng hàng, logo tự co theo tỉ lệ. */
.client-card .logo-box {
    height: 96px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.client-card .logo-box img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
/* Logo nằm ngang: cho phép rộng hơn nhưng thấp lại để cân với logo tròn. */
.client-card .logo-box.wide img { max-height: 70px; }

/* Dự phòng khi chưa có file logo */
.client-card .mark {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--vd-bg-soft);
    border: 2px solid var(--vd-navy);
    color: var(--vd-navy);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 15px;
}
.client-card .cname { font-size: 13.5px; font-weight: 600; line-height: 1.4; }

/* ==========================================================================
   TIN TỨC
   ========================================================================== */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.post-card {
    background: #fff;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.post-card:hover { box-shadow: var(--vd-shadow-lg); transform: translateY(-3px); }
.post-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--vd-bg-soft); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.post-card .body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.post-card .date { font-size: 12.5px; color: var(--vd-red); font-weight: 600; margin-bottom: 6px; }
.post-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.post-card h3 a:hover { color: var(--vd-red); }
.post-card p { font-size: 13.5px; color: var(--vd-muted); flex: 1; margin-bottom: 12px; }
.post-card .more { font-size: 14px; font-weight: 600; color: var(--vd-red); }

/* ==========================================================================
   BREADCRUMB / PAGE HEAD
   ========================================================================== */
.page-head {
    background: var(--vd-bg-soft);
    border-bottom: 1px solid var(--vd-line);
    padding: 26px 0;
}
.page-head h1 { font-size: 30px; color: var(--vd-navy); margin-bottom: 6px; }
.page-head .lead { color: var(--vd-muted); max-width: 820px; margin: 0; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: var(--vd-muted);
    margin-bottom: 10px;
}
.breadcrumb a:hover { color: var(--vd-red); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .current { color: var(--vd-ink); font-weight: 600; }

/* ==========================================================================
   LAYOUT 2 CỘT (sidebar)
   ========================================================================== */
.with-sidebar {
    display: grid;
    grid-template-columns: 276px 1fr;
    gap: 32px;
    align-items: start;
}

.sidebar-box {
    background: #fff;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    margin-bottom: 22px;
}
.sidebar-box > h3 {
    background: var(--vd-navy);
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    padding: 13px 18px;
    margin: 0;
    letter-spacing: .3px;
}
.sidebar-box .inner { padding: 16px 18px; }

.sidebar-cats li a {
    display: block;
    padding: 10px 18px;
    font-size: 14.2px;
    border-bottom: 1px solid var(--vd-line);
    border-left: 3px solid transparent;
}
.sidebar-cats li:last-child a { border-bottom: 0; }
.sidebar-cats li a:hover,
.sidebar-cats li.active a {
    background: var(--vd-bg-soft);
    color: var(--vd-red);
    border-left-color: var(--vd-red);
    font-weight: 600;
}

.sidebar-contact {
    background: #fff;
    color: var(--vd-ink);
    text-align: center;
    padding: 24px 20px;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-lg);
}
.sidebar-contact h3 { color: var(--vd-ink); font-size: 17px; }
.sidebar-contact .num { color: var(--vd-red); font-size: 24px; font-weight: 800; display: block; margin: 6px 0 4px; }
.sidebar-contact p { font-size: 13.5px; color: var(--vd-muted); }
.sidebar-contact .btn-ghost-white { background: var(--vd-red); border-color: var(--vd-red); color: #fff; }
.sidebar-contact .btn-ghost-white:hover { background: var(--vd-red-dark); border-color: var(--vd-red-dark); color: #fff; }

/* ==========================================================================
   CHI TIẾT SẢN PHẨM
   ========================================================================== */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.gallery-main {
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    background: #fff;
    margin-bottom: 14px;
}
.gallery-main img { width: 100%; }

.gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumbs button {
    width: 84px; height: 84px;
    padding: 0;
    border: 2px solid var(--vd-line);
    border-radius: var(--vd-radius);
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}
.gallery-thumbs button.active,
.gallery-thumbs button:hover { border-color: var(--vd-red); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.product-detail h1 { font-size: 28px; color: var(--vd-navy); margin-bottom: 10px; }
.product-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--vd-muted); margin-bottom: 16px; }
.product-meta strong { color: var(--vd-ink); }

.price-box {
    background: var(--vd-red-soft);
    border: 1px dashed var(--vd-red);
    border-radius: var(--vd-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.price-box .label { font-size: 13px; color: var(--vd-muted); }
.price-box .value { font-size: 22px; font-weight: 800; color: var(--vd-red); }

.feature-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
    font-size: 14.5px;
}
.feature-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--vd-red);
    /* dấu tích trắng */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,8.5 6.8,11 12,5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.color-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.color-chips span {
    border: 1px solid var(--vd-line);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13.5px;
    background: #fff;
}

.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.prose { font-size: 15px; }
.prose h2 { font-size: 21px; color: var(--vd-navy); margin-top: 28px; }
.prose h3 { font-size: 18px; color: var(--vd-navy); margin-top: 22px; }
/* :not(.spec-grid) — danh sách thông số đã tự vẽ chấm đỏ bằng ::before,
   nếu để disc ở đây nó sẽ hiện thêm chấm đen thành hai chấm.
   Phải loại trừ ngay tại đây vì `.prose ul` (0-1-1) ưu tiên cao hơn `.spec-grid` (0-1-0). */
.prose ul:not(.spec-grid) { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.prose ul:not(.spec-grid) li { margin-bottom: 6px; }
.prose .spec-grid { margin-bottom: 1em; }
.prose > p:first-child { margin-top: 0; }

/* tab mô tả */
.tabs { border-bottom: 2px solid var(--vd-line); display: flex; gap: 4px; margin-bottom: 24px; flex-wrap: wrap; }
.tabs button {
    border: 0;
    background: transparent;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--vd-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.tabs button.active { color: var(--vd-red); border-bottom-color: var(--vd-red); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ==========================================================================
   BẢNG SIZE
   ========================================================================== */
.table-wrap { overflow-x: auto; margin-bottom: 32px; border-radius: var(--vd-radius); }

table.size-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}
table.size-table caption {
    background: var(--vd-red);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
table.size-table th {
    background: var(--vd-navy);
    color: #fff;
    font-weight: 600;
    padding: 11px 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.18);
}
table.size-table td {
    padding: 10px 12px;
    text-align: center;
    border: 1px solid var(--vd-line);
}
table.size-table td:first-child { font-weight: 700; text-align: left; }
table.size-table tbody tr:nth-child(even) { background: var(--vd-bg-soft); }

/* list-style: none để không dính thêm chấm đen của `.prose ul` —
   danh sách này đã có chấm đỏ riêng ở ::before rồi. */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 28px;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.spec-grid li {
    position: relative;
    padding-left: 20px;
    font-size: 14.5px;
}
.spec-grid li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--vd-red);
}

/* ==========================================================================
   FORM
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-row  { display: flex; flex-direction: column; gap: 6px; }
.form-row.full { grid-column: 1 / -1; }
.form-row label { font-size: 14px; font-weight: 600; }
.form-row label .req { color: var(--vd-red); }

.form-row input,
.form-row textarea,
.form-row select {
    padding: 11px 14px;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius);
    font-size: 14.5px;
    font-family: inherit;
    outline: none;
    background: #fff;
    color: inherit;
    transition: border-color .18s;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus { border-color: var(--vd-red); }
.form-row textarea { resize: vertical; min-height: 130px; }
.form-row .err { font-size: 13px; color: var(--vd-red); }
.form-row input.is-invalid,
.form-row textarea.is-invalid { border-color: var(--vd-red); }

.alert {
    padding: 14px 18px;
    border-radius: var(--vd-radius);
    margin-bottom: 22px;
    font-size: 14.5px;
    border: 1px solid transparent;
}
.alert-success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.alert-error   { background: var(--vd-red-soft); border-color: #FCA5A5; color: #991B1B; }

/* thông tin liên hệ */
.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}
.contact-info .ico {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--vd-red-soft);
    color: var(--vd-red);
    display: flex; align-items: center; justify-content: center;
}
.contact-info .label { font-size: 12.5px; color: var(--vd-muted); }
.contact-info .value { font-weight: 600; font-size: 14.8px; word-break: break-word; }

.map-embed {
    border-radius: var(--vd-radius-lg);
    overflow: hidden;
    border: 1px solid var(--vd-line);
    line-height: 0;
}
.map-embed iframe { width: 100%; height: 340px; border: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    /* Đồng bộ gradient xanh navy của hero theo màu thương hiệu đã duyệt. */
    background: linear-gradient(180deg,
        #284CB6 0%,
        #1D378E 42%,
        #152768 72%,
        #101B52 100%);
    color: rgba(255,255,255,.88);
    font-size: 14px;
    padding-top: 46px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: 32px;
    padding-bottom: 34px;
}
.site-footer h4 {
    color: #fff;
    font-size: 15.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    letter-spacing: .3px;
    position: relative;
    padding-bottom: 10px;
}
.site-footer h4::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 42px; height: 3px;
    background: var(--vd-red);
    border-radius: 2px;
}
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-logo { margin-bottom: 14px; }
.site-footer .footer-logo .vd-logo { width: 76px; height: auto; }
.site-footer .company-name { color: #fff; font-weight: 700; display: block; margin-bottom: 8px; }

.footer-links li { margin-bottom: 9px; }

.footer-contact li { display: flex; gap: 10px; margin-bottom: 11px; align-items: flex-start; }
.footer-contact svg { flex-shrink: 0; margin-top: 3px; opacity: .85; }

/* Nút dẫn sang Google Maps, thay cho iframe bản đồ nặng ở footer. */
.footer-map-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    transition: background .2s, border-color .2s;
}
.footer-map-link:hover {
    background: var(--vd-red);
    border-color: var(--vd-red);
    text-decoration: none;
}

.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    transition: background .18s;
}
.footer-social a:hover { background: var(--vd-red); }

/* Zalo giữ nền trắng để dấu Zalo hiện đúng màu. */
.footer-social .fs-zalo,
.footer-social .fs-zalo:hover { background: #fff; overflow: hidden; }
.footer-social .fs-zalo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.14);
    padding: 16px 0;
    font-size: 13.5px;
}
.footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

/* ==========================================================================
   NÚT LIÊN HỆ NỔI
   ========================================================================== */
.quick-contact {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quick-contact a {
    position: relative;
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: var(--vd-shadow-lg);
    transition: transform .18s;
}
.quick-contact a:hover { transform: scale(1.08); }
.quick-contact .qc-phone { background: var(--vd-red); }
.quick-contact .qc-facebook {
    background: #1877f2;
    border: 2px solid #fff;
}
.quick-contact .qc-facebook .facebook-mark {
    width: 34px;
    height: 34px;
    display: block;
    color: #fff;
}

/* Nút Zalo dùng dấu Zalo chính thức (xanh trên nền trắng) nên để nền trắng.
   Ảnh đã chừa sẵn viền trắng quanh dấu, nên cho phủ kín rồi bo tròn —
   phần bị vòng tròn cắt chỉ là viền trắng, dấu Zalo luôn nằm giữa. */
.quick-contact .qc-zalo { background: #fff; overflow: hidden; }
.quick-contact .qc-zalo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* hiệu ứng nhấp nháy quanh nút gọi */
.quick-contact .qc-phone::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--vd-red);
    animation: qc-ring 1.6s ease-out infinite;
}
@keyframes qc-ring {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* ==========================================================================
   PHÂN TRANG
   ========================================================================== */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 34px; }
.pagination a, .pagination span {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--vd-line);
    border-radius: var(--vd-radius);
    font-size: 14px;
    background: #fff;
}
.pagination a:hover { border-color: var(--vd-red); color: var(--vd-red); }
.pagination .active span,
.pagination span[aria-current] { background: var(--vd-red); border-color: var(--vd-red); color: #fff; font-weight: 700; }
.pagination .disabled span { opacity: .45; }

/* trạng thái rỗng */
.empty-state {
    text-align: center;
    padding: 56px 20px;
    color: var(--vd-muted);
    background: var(--vd-bg-soft);
    border-radius: var(--vd-radius-lg);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .cat-grid, .product-grid, .reason-grid { grid-template-columns: repeat(3, 1fr); }
    .with-sidebar { grid-template-columns: 1fr; }
    .client-carousel { --client-cols: 4; }
    .product-carousel { --product-cols: 3; }
    .header-search { display: none; }
    .hero-inner { gap: 32px; }
    .hero-ring { width: 82px; height: 82px; top: -10px; left: -10px; }
    .hero-ring b { font-size: 23px; }
}

@media (max-width: 860px) {
    .hero { padding-top: 0; padding-bottom: 56px; }
    .hero-inner { grid-template-columns: 1fr; padding-top: 0; }
    /* Chữ xuống dưới ảnh nên tối đều thay vì tối lệch sang trái. */
    .hero-scrim { background: rgba(5, 13, 54, .08); }
    /* Mobile/tablet: banner chạm sát header, tràn đủ chiều rộng màn hình. */
    .hero-media {
        order: -1;
        width: 100vw;
        max-width: none;
        margin: 0 calc(50% - 50vw);
    }
    /* Giữ đúng tỷ lệ ảnh banner ngang 3:2, không ép thành hình vuông. */
    .hero-stage {
        border-radius: 0;
        box-shadow: none;
        outline: 0;
    }
    .hero-stage::before { padding-top: 66.7%; }
    .hero-slide > img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: var(--hero-x, 50%) var(--hero-y, 50%);
    }
    .hero-ring { display: none; }
    .hero-nav { justify-content: center; padding: 0 16px; }
    .hero-arrows { margin-left: 0; }
    .hero-wave { height: 54px; }
    .about-split { grid-template-columns: 1fr; gap: 28px; }
    .product-detail { grid-template-columns: 1fr; gap: 28px; }
    .service-grid, .post-grid, .form-grid, .spec-grid { grid-template-columns: 1fr; }
    .service-card { grid-template-columns: 1fr; }
    .service-card .thumb { aspect-ratio: 16 / 9; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }

    /* Menu mobile là lớp phủ cố định, không làm nội dung bên dưới dịch chuyển. */
    .nav-toggle { display: flex; }
    .main-nav.is-mobile-open {
        position: fixed;
        top: var(--mobile-nav-top, 0);
        left: 0;
        right: 0;
        z-index: 88;
        max-height: calc(100vh - var(--mobile-nav-top, 0));
        overflow-y: auto;
        box-shadow: 0 18px 35px rgba(17, 24, 39, .28);
    }
    .main-nav > .container { padding: 0; }
    .nav-list {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-list.open { display: flex; }
    .nav-list > li { width: 100%; }
    .nav-list > li > a { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
    .nav-list .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        background: rgba(0,0,0,.16);
        padding: 0;
        display: none;
    }
    .nav-list > li.open .submenu { display: block; }
    .nav-list .submenu a { color: rgba(255,255,255,.9); border-left: 0; padding-left: 34px; }
    .nav-list .submenu a:hover { background: rgba(0,0,0,.25); color: #fff; }
}

@media (max-width: 620px) {
    .cat-grid, .product-grid, .product-grid.cols-3, .reason-grid { grid-template-columns: repeat(2, 1fr); }
    .client-carousel { --client-cols: 2; --client-gap: 12px; padding: 0 28px; }
    .client-arrow { width: 34px; height: 34px; }
    .product-carousel { --product-cols: 2; --product-gap: 12px; padding: 0 22px; }
    .product-arrow { width: 34px; height: 34px; }
    .product-carousel .p-card .body { padding: 10px 7px 12px; }
    .product-carousel .p-card h3 { font-size: 13px; }
    .footer-grid { grid-template-columns: 1fr; }
    .section { padding: 40px 0; }
    .strength { padding: 16px 5px; gap: 8px; }
    .strength .ico { width: 38px; height: 38px; }
    .strength h3 { font-size: 11px; line-height: 1.3; }

    .hero-slide img { box-shadow: none; }
    .hero-vfill { display: none; }
    .hero-thumbs button { width: 44px; height: 44px; }
    .hero-actions .btn { flex: 1 1 100%; }
    /* Màn hẹp: kéo huy hiệu vào trong kẻo bị mép trái cắt mất. */
    .hero-ring {
        width: 68px; height: 68px;
        top: 8px; left: 8px;
        border-width: 2px;
    }
    .hero-ring b { font-size: 19px; }
    .hero-ring span { font-size: 8px; margin-top: 2px; }
    .section-head h2 { font-size: 22px; }
    .page-head h1 { font-size: 24px; }
    .topbar { font-size: 12.5px; }
    .topbar-right { display: none; }
    .topbar-left {
        width: 100%;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .cta-band .container { flex-direction: column; align-items: flex-start; }

    /* Header hẹp: icon tìm kiếm cạnh menu; form xổ đè bên dưới khi được mở. */
    .header-main { position: relative; gap: 8px; }
    .logo { margin-right: auto; }
    .search-toggle { display: flex; }
    .header-search {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        z-index: 92;
        max-width: none;
        padding: 12px 0;
        background: #fff;
        box-shadow: 0 16px 28px rgba(17, 24, 39, .18);
    }
    .header-search.open { display: block; }
    .logo .vd-logo { width: 48px; }
    .logo-text .name { font-size: 14px; }
    .logo-text .tagline { display: none; }
    .header-hotline { display: none; }
    .reason-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 420px) {
    .product-grid, .cat-grid, .product-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   PREVIEW THEME — tinh thần UNIQLO: nền sáng, chữ đen, đỏ làm điểm nhấn
   ========================================================================== */
:root {
    --vd-red: #E60012;
    --vd-red-dark: #C90010;
    --vd-red-soft: #FFF0F1;
    --vd-navy: #1B1B1B;
    --vd-navy-dark: #111111;
    --vd-ink: #1B1B1B;
    --vd-muted: #666666;
    --vd-line: #DADADA;
    --vd-bg-soft: #F7F7F7;
}

.main-nav { background: #fff; border-top: 1px solid var(--vd-line); border-bottom: 1px solid var(--vd-line); }
.nav-list > li > a { color: var(--vd-ink); border-bottom: 3px solid transparent; }
.nav-list > li > a:hover,
.nav-list > li.active > a { background: #fff; color: var(--vd-red); border-bottom-color: var(--vd-red); }
.nav-list .submenu { border: 1px solid var(--vd-line); border-top: 0; }

.hero { background: #fff; color: var(--vd-ink); }
.hero-bg::before { background: #F7F7F7; }
.hero-scrim { background: transparent; }
.hero-chip { background: #fff; border-color: var(--vd-line); color: var(--vd-ink); }
.hero-chip::before { background: var(--vd-red); box-shadow: 0 0 0 3px rgba(230,0,18,.14); }
.hero h1 em { color: var(--vd-red); text-decoration-color: rgba(230,0,18,.25); }
.hero .hero-sub { color: var(--vd-muted); }
.hero .btn-ghost-white { background: #fff; color: var(--vd-ink); border-color: var(--vd-ink); }
.hero .btn-ghost-white:hover { background: var(--vd-ink); color: #fff; }
.hero-thumbs button { border-color: #C8C8C8; }
.hero-thumbs button.is-active { border-color: var(--vd-red); }
.hero-arrows button { border-color: #BDBDBD; background: #fff; color: var(--vd-ink); }
.hero-arrows button:hover { background: var(--vd-red); border-color: var(--vd-red); color: #fff; }
.hero-progress { background: #E0E0E0; }
.hero-progress i { background: var(--vd-red); }

.site-footer { background: #F7F7F7; color: #444; }
.site-footer h4,
.site-footer .company-name { color: var(--vd-ink); }
.site-footer a:hover { color: var(--vd-red); }
.footer-map-link { color: var(--vd-ink); border-color: #AFAFAF; }
.footer-map-link:hover { color: #fff; }
.footer-social a { background: #E5E5E5; color: var(--vd-ink); }
.footer-social a:hover { color: #fff; }
.footer-bottom { border-top-color: var(--vd-line); }

@media (max-width: 860px) {
    .nav-list > li > a { color: var(--vd-ink); background: #fff; border-bottom: 1px solid var(--vd-line); }
    .nav-list > li > a:hover,
    .nav-list > li.active > a { color: var(--vd-red); background: #fff; }
    .nav-list .submenu { background: #F2F2F2; border: 0; }
    .nav-list .submenu a { color: var(--vd-ink); }
    .nav-list .submenu a:hover { background: #E8E8E8; color: var(--vd-red); }
}
/* ---------- in ấn ---------- */
@media print {
    .topbar, .main-nav, .quick-contact, .site-footer, .cta-band, .header-search { display: none !important; }
}

/* iPhone: animated GIF fallback for the first hero video. */
.hero-ios-gif {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-x, 50%) var(--hero-y, 50%);
}
.hero-slide.is-ios-fallback video { display: none; }
.hero-slide.is-ios-fallback .hero-ios-gif { display: block; }

@media (max-width: 620px) {
    /* Keep the complete horizontal artwork visible inside the square mobile banner. */
    .hero-slide > img,
    .hero-slide.is-ios-fallback .hero-ios-gif {
        object-fit: contain;
        object-position: var(--hero-x, 50%) var(--hero-y, 50%);
        background: #fff;
    }
}

/* Soft image-fill behind contained artwork in the square mobile hero. */
.hero-mobile-fill { display: none; }
@media (max-width: 620px) {
    .hero-slide > img {
        position: relative;
        background: transparent;
        z-index: 1;
    }
    .hero-mobile-fill:not(.hero-ios-fill),
    .hero-slide.is-ios-fallback .hero-ios-fill {
        display: block;
        position: absolute;
        inset: -22px;
        z-index: 0;
        background-size: cover;
        background-position: center;
        filter: blur(18px) brightness(.72) saturate(.9);
        transform: scale(1.08);
    }
}

/* Slide banner chính 2:1: tràn toàn chiều rộng, không chữ hay trang trí phủ ảnh. */
.hero-inner { transition: opacity .22s ease; }
.hero.hero--layout-switching .hero-inner { opacity: 0; }
.hero.hero--full-active { padding-bottom: 0; }
.hero--full-active .hero-bg,
.hero--full-active .hero-copy,
.hero--full-active .hero-ring,
.hero--full-active .hero-wave { display: none; }
.hero--full-active .hero-inner {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
}
.hero--full-active .hero-media { width: 100%; max-width: none; }
.hero--full-active .hero-stage {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
}
.hero--full-active .hero-stage::before { padding-top: 55.814%; }
.hero--full-active .hero-slide img { object-fit: cover; }
.hero--full-active .hero-nav {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 18px;
    width: min(1180px, calc(100% - 32px));
    margin: 0;
    transform: translateX(-50%);
}
.hero--full-active .hero-progress { display: none; }
@media (max-width: 860px) {
    .hero--full-active .hero-stage { border-radius: 0; }
    .hero--full-active .hero-stage::before { padding-top: 55.814%; }
    .hero--full-active .hero-nav { bottom: 10px; }
}
/* HERO NAV OVERLAY — bỏ thumbnail, đặt Previous/Next trực tiếp trên vùng ảnh. */
.hero .hero-thumbs { display: none; }
.hero .hero-nav,
.hero.hero--full-active .hero-nav {
    position: absolute;
    z-index: 6;
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 14px;
    transform: translateY(-50%);
    pointer-events: none;
}
.hero .hero-arrows {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
}
.hero .hero-arrows button {
    pointer-events: auto;
    background: rgba(255,255,255,.9);
    border-color: rgba(17,20,45,.18);
    color: var(--vd-ink);
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
    backdrop-filter: blur(5px);
}
@media (max-width: 600px) {
    .hero .hero-nav,
    .hero.hero--full-active .hero-nav { padding: 0 8px; }
    .hero .hero-arrows button { width: 36px; height: 36px; }
}
/* MOBILE MAIN BANNER — dùng artwork dọc riêng, hiển thị trọn khung 768×1376. */
.hero-slide picture {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 620px) {
    .hero.hero--full-active .hero-stage::before { padding-top: 179.1667%; }
    .hero.hero--full-active .hero-slide picture,
    .hero.hero--full-active .hero-slide picture img { width: 100%; height: 100%; }
    .hero.hero--full-active .hero-slide picture img { object-fit: cover; object-position: center; }
}