/* =========================================================================
   TIS — style.css
   Dựng lại theo DESIGN_SPEC.md (CSS thuần, không dùng Bootstrap).
   Bước 1: nền tảng + Header + Menu + Lớp phủ chuyên mục + Drawer + Footer.
   ========================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Màu riêng của site */
    --red: #E3141A;
    --red-dark: #E3141A;
    --yellow: #F2AF0D;
    --pink: #F20D5E;
    --pink-dark: #E51A62;
    --pink-light: #F20DAF;
    --white: #fff;
    --light: #f2f2f2;
    --cyan: #1AE5C1;
    --border-color: #D9D9D9;
    --text-primary: #333;
    --text-secondary: #4D4D4D;

    /* Màu tương đương Bootstrap 5.3 mà site cũ dùng qua class */
    --c-dark: #212529;
    --c-light: #f8f9fa;
    --c-border: #dee2e6;
    --c-gray-500: #adb5bd;
    --c-danger: #dc3545;
    --c-secondary: #6c757d;
    --c-primary: #0d6efd;

    --radius: .375rem;
    --gutter: 1.5rem;

    /* Header */
    --header-height: 60px;
    --header-border-width: 5px;

    --font: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

@media (min-width: 576px) {
    :root { --header-height: 80px; --header-border-width: 10px; }
}
@media (min-width: 768px) {
    :root { --header-height: 100px; --header-border-width: 10px; }
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--text-primary);
    background-color: #fff;
    overflow: auto;
}
@media (min-width: 992px)  { body { font-size: 16px; } }
@media (min-width: 1200px) { body { font-size: 18px; } }

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; }
/* Site cũ reset font-size 100% cho h1–h6 nhưng giữ weight/line-height của Bootstrap */
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; line-height: 1.2; }
hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }
img { max-width: 100%; border: 0; vertical-align: baseline; } /* site cũ reset img về baseline */

a { color: var(--text-primary); text-decoration: none; outline: 0; }
a:hover { color: var(--pink); text-decoration: none; }

input, select, textarea, button { font-family: var(--font); font-size: 18px; outline: 0; }

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--gutter) * .5);
    padding-right: calc(var(--gutter) * .5);
}

/* Icon: Font Awesome 6.4.0 (assets/vendor/fontawesome6) như site cũ */
.flex-fill { flex: 1 1 auto; }
.h-1 { height: 1px !important; }
.bg-border { background-color: var(--c-border); }

/* Tiêu đề dùng chung */
.title, .title2, .title3, .title4, .title5 { font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.title  { font-size: 2.25rem; }
.title2 { font-size: 1.35rem; }
.title3 { font-size: 1.25rem; }
.title4 { font-size: 1.125rem; }
.title5 { font-size: 1rem; }
.desc { color: var(--text-secondary); line-height: 1.6; font-weight: 400; }

/* ---------- 3. Nút & form cơ bản (tương đương Bootstrap) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .375rem .75rem;
    font-family: var(--font);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}
.btn-secondary { color: #fff; background-color: var(--c-secondary); border-color: var(--c-secondary); }
.btn-secondary:hover { color: #fff; background-color: #5c636a; }
.btn-danger { color: #fff; background-color: var(--c-danger); border-color: var(--c-danger); }
.btn-danger:hover { color: #fff; background-color: #bb2d3b; }

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem; /* Bootstrap .form-control = 16px (ghi đè input 18px của site) */
    line-height: 1.5;
    color: var(--text-secondary);
    background-color: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    appearance: none;
}
.form-control:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
.form-control::placeholder { color: #6c757d; }

/* Nút đóng (tương đương .btn-close của Bootstrap 5.3) */
.btn-close {
    box-sizing: content-box;
    display: inline-block;
    width: 1em;
    height: 1em;
    padding: .25em;
    color: #000;
    border: 0;
    border-radius: var(--radius);
    opacity: .5;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
}
.btn-close:hover { opacity: .75; }

.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ---------- 4. Header ---------- */
.header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--white);
    border-bottom: var(--header-border-width) solid var(--red);
}

.header-inner {
    display: flex;
    align-items: center;
    height: var(--header-height);
}

/* Logo: mobile ở giữa, desktop bên trái */
.header-logo {
    order: 1;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
.header-logo a { display: flex; align-items: center; justify-content: center; }
.header-logo img { height: 40px; width: auto; }
.header-logo-subtitle {
    display: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

/* Menu chính: chỉ hiện từ 992px */
.header-nav { display: none; margin-left: auto; }

/* Site cũ dùng class .navbar của Bootstrap: flex, padding .5rem 0 */
.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    white-space: nowrap;
    position: relative;
    z-index: 1001;
}
.navbar-item { display: inline-block; position: relative; z-index: 1001; margin-left: .75rem; }
.navbar-item:first-child { margin-left: 0; }
.navbar-link {
    display: inline-block;
    padding: 10px 0;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-primary);
}

.navbar-item .navbar-dropdown {
    display: none;
    position: absolute;
    z-index: 0;
    top: 100%;
    left: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: normal;
    background-color: var(--white);
    border: 1px solid var(--c-border);
    border-bottom: 0;
}
.navbar-item:hover .navbar-dropdown { display: block; }
.navbar-item .navbar-dropdown > .navbar-item {
    display: block;
    margin: 0;
    border-bottom: 1px solid var(--c-border);
}
.navbar-item .navbar-dropdown > .navbar-item > .navbar-link {
    display: block;
    padding: 8px 15px;
    font-weight: 400;
    text-transform: none;
    line-height: 1.5;
}

/* Nút tìm kiếm + ô tìm kiếm */
.header-search { position: relative; order: 2; }
.btn-search, .btn-nav { width: 40px; height: 40px; padding: 0; font-size: 18px; }
.btn-search { background-color: var(--yellow) !important; color: var(--white) !important; }

.header-searchbar {
    display: none;
    position: absolute;
    z-index: 1001;
    right: 0;
    top: 100%;
    width: 320px;
    padding: 1rem;
    background-color: var(--white) !important;
    border: 1px solid var(--c-border);
}
.header-searchbar.active { display: block; }

/* Nút ☰ */
.btn-nav {
    order: 0;
    margin-right: 0;
    background-color: var(--light) !important;
    color: var(--text-primary) !important;
}

/* Khi mở lớp phủ chuyên mục */
body.sidebar-active { overflow: hidden; }
body.sidebar-active .navbar-item .navbar-link { color: var(--c-gray-500); }
body.sidebar-active .navbar-item:hover .navbar-dropdown,
body.sidebar-active .header-searchbar { display: none; }

@media (min-width: 576px) {
    .header-logo-subtitle { display: block; }
    .header-logo img { margin-bottom: .35rem; }
}
@media (min-width: 768px) {
    .header-logo img { height: auto; margin-bottom: .5rem; }
}
@media (min-width: 992px) {
    .header-logo { order: 0; margin-left: 0; margin-right: 0; }
    .header-logo-subtitle { text-align: left; }
    .header-nav { display: block; }
    .navbar-item { margin-left: .5rem; }
    .header-search { margin-left: 1rem; }
    .btn-nav { order: 3; margin-left: 1rem; }
}
@media (min-width: 1200px) {
    .navbar-item { margin-left: 1rem; }
    .btn-nav { margin-right: -55px; }
}

/* ---------- 5. Lớp phủ "Tất cả chuyên mục" & drawer ---------- */
.sidebar {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.sidebar.active { display: block; }

.drawer-full, .drawer {
    position: absolute;
    z-index: 1000;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
}

/* Lớp phủ (≥ 768px) */
.drawer-full { right: 0; display: none; background-color: var(--c-light); }
.sitemap-inner { padding-top: 1rem; padding-bottom: 1rem; }
.sitemap-head { display: flex; align-items: center; padding: 1rem 0; }
.sitemap-title { font-weight: 700; }
.sitemap-close { margin-left: auto; }
.sitemap-close .btn-close { padding: 0; margin: 0; }
.sitemap-divider { margin-bottom: 1rem; }

.sitemap-grid { display: grid; grid-template-columns: 1fr; column-gap: var(--gutter); }
.sitemap-col { margin-bottom: 1rem; }
.sitemap-col-title { margin-bottom: .5rem; }
.sitemap-col-title .title4 { text-transform: uppercase; }
.sitemap .nav { list-style: none; margin: 0; padding: 0; }
.sitemap .nav-link {
    display: flex;
    align-items: baseline;
    padding: .25rem 0;
    color: var(--text-primary);
}
.sitemap .nav-link:hover { color: var(--pink-dark); }
.sitemap-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: .5rem;
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
}

/* Drawer (< 768px) */
.drawer { display: block; width: 100%; background-color: var(--white); }
.drawer-header { position: relative; z-index: 0; padding: 1rem; }
.drawer-header .btn-close {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 50%;
    margin-top: -30px;
    width: 40px;
    height: 40px;
    background-color: var(--c-light);
    border-radius: 50%;
}
.drawer-logo { display: flex; flex-direction: column; align-items: center; width: 100%; }
.drawer-logo a { display: block; }
.drawer-logo img { height: 40px; width: auto; }
.drawer-logo .header-logo-subtitle { display: block; }
.drawer-search { padding: 0 1rem 1rem; }

.drawer .nav { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border-color); border-top: 0; }
.drawer .nav-link {
    display: flex;
    align-items: baseline;
    padding: .5rem 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.drawer .nav-link:hover { color: var(--pink-dark); }
.drawer .nav-item .nav { display: none; padding: 0; margin: 0; border: 0; }
.drawer .nav-item.expanded .nav { display: block; }
.drawer .nav-item .nav .nav-item { border: 0; border-top: 1px solid var(--border-color); }
.drawer .nav-item > .nav > .nav-item > .nav-link { font-weight: 400; padding-left: 2rem; }
.drop-icon {
    display: inline-block;
    min-width: 32px;
    margin-left: .5rem;
    padding: 5px;
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
}
.drop-icon .drop-open { display: none; }
.drawer .nav-item.expanded > .nav-link .drop-closed { display: none; }
.drawer .nav-item.expanded > .nav-link .drop-open { display: inline-block; }

@media (min-width: 576px) {
    .drawer { width: 320px; }
}
@media (min-width: 768px) {
    .sidebar { top: var(--header-height); }
    .drawer-full { display: block; }
    .drawer { display: none; }
    .sitemap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .sitemap-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 6. Footer ---------- */
.footer { clear: both; }
/* Site cũ: .container-fluid (padding .75rem) bọc .container → thêm lề 12px mỗi bên, đường kẻ cũng thụt vào */
.footer-top { background-color: var(--c-dark); color: #fff; padding-left: .75rem; padding-right: .75rem; }
.footer-body { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.footer-grid { display: grid; grid-template-columns: 1fr; }
.footer .title2 { margin-bottom: 1rem; }
.footer .title2 span { color: #fff; }
.footer .desc { color: #fff; }
.footer a { color: #fff; }
.footer a:hover { color: var(--pink); }

.footer-contact { margin: 1rem 0; }
.footer-contact-row { margin-bottom: 1rem; }
.footer-contact-pair { display: grid; grid-template-columns: 1fr; }
.footer-contact-icon { margin-right: .5rem; color: #fff; }

.footer-col-links { display: none; }
.footer-link ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.footer-link li { display: block; margin-bottom: 10px; }
.footer-link a { display: block; color: #fff; }
.footer-link a:hover { color: #fff; }

.socials { display: flex; flex-wrap: wrap; padding-top: .5rem; margin-bottom: 1rem; }
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-right: .5rem;
    color: #fff !important;
    border: 1px solid #fff;
    border-radius: 12px;
}
.social-icon:last-child { margin-right: 0; }
.social-icon .zalo-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../img/zalo-mono.svg) center / 16px no-repeat;
}

.footer-hr { margin: 0; padding: 0; height: 1px; border: 0; background-color: var(--c-light); opacity: .25; }
.footer-copyright { padding-top: 1rem; padding-bottom: 1rem; }
.footer-copyright span { display: block; padding: .5rem 0; color: #fff; }

@media (min-width: 992px) {
    .footer-body { padding-top: 3rem; padding-bottom: 3rem; }
    /* Mô phỏng lưới Bootstrap row gx-lg-5 (gutter 3rem, lề âm) + col-lg-5/3/4 */
    .footer-grid { grid-template-columns: 5fr 3fr 4fr; margin-left: -1.5rem; margin-right: -1.5rem; }
    .footer-col { padding-left: 1.5rem; padding-right: 1.5rem; }
    /* row row-cols-lg-2 (gutter 1.5rem) */
    .footer-contact-pair { grid-template-columns: 1fr 1fr; margin-left: -.75rem; margin-right: -.75rem; }
    .footer-contact-pair > div { padding-left: .75rem; padding-right: .75rem; }
    .footer-col-links { display: flex; justify-content: center; }
    .footer-copyright { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* ---------- 7. Thành phần dùng chung ---------- */
.w-100 { width: 100% !important; }
.h-auto { height: auto !important; }
.position-relative { position: relative; }
.clearfix::after { display: block; clear: both; content: ""; }
.text-white { color: #fff !important; }
.text-danger { color: var(--c-danger) !important; }
.small { font-size: .875em; }

/* Khung ảnh theo tỉ lệ (tương đương .ratio của Bootstrap) */
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--ratio); content: ""; }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio-1x1  { --ratio: 100%; }
.ratio-16x9 { --ratio: 56.25%; }
.ratio-5x3  { --ratio: 60%; }
.ratio-3x2  { --ratio: 66.666666%; }
.ratio-2x3  { --ratio: 150%; }
.ratio > iframe { border: 0; }

.avatar { display: block; clear: both; background-color: #f2f2f2; }
.avatar-thumb  { width: 100px; }
.avatar-small  { width: 140px; }
.avatar-normal { width: 100%; }
@media (min-width: 768px) {
    .avatar-small  { width: 200px; }
    .avatar-normal { width: 300px; }
}

/* Cắt chữ theo số dòng */
.line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: var(--line-clamp);
    line-clamp: var(--line-clamp);
}
.line-clamp-2 { --line-clamp: 2; }
.line-clamp-3 { --line-clamp: 3; }
.line-clamp-4 { --line-clamp: 4; }
.line-clamp-5 { --line-clamp: 5; }
.line-clamp-6 { --line-clamp: 6; }

/* Chữ */
.headline { font-weight: 700; font-size: 20px; line-height: 1.4; }
.teaser { color: var(--text-secondary); line-height: 1.6; font-weight: 400; }
.desc a, .teaser a { color: var(--text-secondary); }
.post-date { color: #333; }

/* Tiêu đề khối: căn giữa, gạch đỏ 100×2px */
.titlebar {
    position: relative;
    z-index: 0;
    display: block;
    clear: both;
    padding: 0 1rem 1rem;
    margin-bottom: 2rem;
    text-align: center;
}
.titlebar a, .titlebar span {
    display: inline-block;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.titlebar a:hover { color: var(--pink); }
.titlebar::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 0;
    width: 100px;
    height: 2px;
    margin-left: -50px;
    background-color: var(--red);
}
.titlebar a.text-white:hover { color: #fff !important; }
@media (min-width: 992px) {
    .titlebar-nd { padding: 0 !important; text-align: left; }
    .titlebar-nd::after { display: none !important; }
}

/* Nút */
.btn-more, .btn-send { color: var(--white) !important; border: 0 !important; }
.btn-more { background-color: var(--pink-dark) !important; padding-left: 2rem; padding-right: 2rem; }
.btn-send { background-color: var(--red-dark) !important; padding: .75rem 2rem; }

/* Thẻ sản phẩm */
.product-item { clear: both; padding: 15px; }
.product-item-title { clear: both; line-height: 1.5; text-align: center; color: var(--text-primary); }

/* Swiper: điều chỉnh chung như site cũ */
.swiper-pagination-bullet-active { color: var(--yellow); background-color: var(--yellow); }
.parners .swiper-pagination, .testimonials .swiper-pagination { position: static; margin-top: 1rem; }
.swiper-nav {
    width: 48px !important;
    height: 48px !important;
    color: var(--white) !important;
    background-color: var(--red) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    border-radius: 50%;
}
.swiper-nav::after { content: "" !important; }
.swiper-nav.swiper-button-prev { left: -80px; background-image: url("../img/arrow-left-white.svg"); }
.swiper-nav.swiper-button-next { right: -80px; background-image: url("../img/arrow-right-white.svg"); }

/* ---------- 7b. Slider / banner (trang chủ + chuyên mục) ---------- */
.slider { clear: both; position: relative; z-index: 1; }
/* overflow: hidden thay cho khung .swiper (overflow: hidden) bọc banner ở site cũ — tránh tràn ngang khi chữ banner rộng hơn màn hình */
.slider-photo { position: relative; z-index: 0; clear: both; overflow: hidden; }
/* Ảnh để inline (mặc định) như site cũ: chừa khoảng trống dưới chân ảnh → chiều cao banner khớp site cũ */
.slider-photo img { vertical-align: baseline; }
.slider-photo-overlay {
    display: none;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60%;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0));
}
.slider-photo-intro { display: none; position: absolute; z-index: 1; }
.slider-photo-col { width: calc((100% + 1.5rem) * 5 / 12 - 1.5rem); }
.slider-photo-title { font-size: 48px; font-weight: 700; line-height: 1.5; color: var(--text-primary); margin-bottom: 1rem; }
.slider-photo-desc { font-size: 20px; color: var(--text-primary); margin-bottom: 1rem; }
.slider-photo-desc:empty { min-height: 1.5em; }
.btn-slider-more {
    color: var(--white) !important;
    background-color: var(--yellow) !important;
    border-radius: 0 !important;
    padding-left: 1rem;
    padding-right: 1rem;
    text-transform: uppercase;
}
.btn-slider-more .fa { font-size: .9em; }

/* Mũi tên slider */
.slider-nav {
    display: none !important;
    width: 64px !important;
    height: 64px !important;
    color: var(--white) !important;
    background-color: var(--pink-dark) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    border-radius: 50%;
}
.slider-nav::after { content: "" !important; }
.slider-nav.swiper-button-prev { left: 10px; background-image: url("../img/arrow-left-white.svg"); }
.slider-nav.swiper-button-next { right: 10px; background-image: url("../img/arrow-right-white.svg"); }

/* 6 ô icon làm phân trang */
.slider-icons { display: none; position: absolute; z-index: 100 !important; }
.slider-icons .swiper-pagination-bullet {
    display: inline-block;
    width: 96px;
    height: 96px;
    padding: 8px 0;
    margin: 0 30px 0 0;
    background-color: var(--white);
    border-radius: 10px;
    opacity: 1;
}
.slider-icon { display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--text-primary); }
.slider-icon img { display: block; width: 48px; height: 48px; margin: .25rem 0; }
.slider-icon span { font-size: 16px; line-height: 1.5; }

@media (min-width: 768px) {
    .slider-photo-overlay { display: block; }
    .slider-photo-intro { display: block; top: 30px; left: 100px; }
    .slider-photo-title { font-size: 30px; }
    .slider-photo-desc { font-size: 18px; }
    .slider-nav { display: block !important; width: 48px !important; height: 48px !important; background-size: 10px; }
    .slider-nav.swiper-button-prev { left: 20px; }
    .slider-nav.swiper-button-next { right: 20px; }
    .slider-icons { bottom: 20px !important; }
}
@media (min-width: 992px) {
    .slider-icons { display: block; }
}
@media (min-width: 1200px) {
    .slider-photo-title { font-size: 48px; margin-bottom: 1.5rem; }
    .slider-photo-desc { font-size: 20px; margin-bottom: 1.5rem; }
}
@media (min-width: 1400px) {
    .slider-nav { width: 64px !important; height: 64px !important; background-size: 14px; }
    .slider-nav.swiper-button-prev { left: 60px; }
    .slider-nav.swiper-button-next { right: 60px; }
    .slider-photo-intro { top: 100px; left: 50%; transform: translateX(-50%); }
    .slider-icons { bottom: 60px !important; }
}

/* ---------- 7c. Trang con: breadcrumb, bố cục 2 cột, menu trái ---------- */
.sitepath { clear: both; padding: 1rem 0; font-size: 16px; }
.sitepath-link { color: var(--text-primary); }
.sitepath-link.selected, .sitepath-link:hover { color: var(--pink-dark); }
.sitepath-sep { padding: 0 .5rem; }

.page-body { background-color: #fff; margin-bottom: 3rem; }
/* row gx-0 gx-lg-4 + col-lg-3 / col-lg-9 */
.page-row { display: grid; grid-template-columns: minmax(0, 1fr); }
.page-main { min-width: 0; }
@media (min-width: 992px) {
    .page-row { grid-template-columns: calc((100% + 1.5rem) / 4 - 1.5rem) minmax(0, 1fr); column-gap: 1.5rem; }
}
@media (min-width: 1400px) {
    .page-row { grid-template-columns: calc((100% + 2rem) / 4 - 2rem) minmax(0, 1fr); column-gap: 2rem; }
}

.menubar { display: none; margin-bottom: 1.5rem; background-color: var(--white); border-radius: 0; }
.menubar .nav { display: block; list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-color); border-bottom: 0; }
.menubar .nav .nav-item { display: block; border-bottom: 1px solid var(--border-color); }
.menubar .nav .nav-link {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-secondary);
}
/* Danh mục con (menu trái trang sản phẩm): chữ thường, thụt 2rem, không viền — như site cũ */
.menubar .nav .nav { border: 0; }
.menubar .nav .nav .nav-item { border-bottom: 0; }
.menubar .nav .nav .nav-link { padding-left: 2rem; font-weight: 400; }
.menubar .nav .nav-link:hover { background-color: var(--c-light); color: var(--pink-dark); }
.menubar .nav .nav-link.active { color: var(--pink-dark); }
.menubar .nav .nav-link.nav-link-head,
.menubar .nav .nav-link.nav-link-head:hover { background-color: var(--c-danger) !important; color: #fff !important; text-transform: uppercase; }
.nav-icon { display: inline-block; width: 16px; height: 16px; font-size: 16px; line-height: 16px; text-align: center; }
@media (min-width: 992px) { .menubar { display: block; } }

/* Tiêu đề chuyên mục: thanh dọc đỏ + chữ in hoa */
.zonebar, .categorybar { clear: both; position: relative; z-index: 0; padding-left: 1rem; margin-bottom: 1rem; }
.zonebar a, .zonebar span, .categorybar a, .categorybar span { font-size: 24px; font-weight: 700; text-transform: uppercase; color: #333; }
.zonebar::after, .categorybar::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 50%;
    width: 4px;
    height: 20px;
    margin-top: -10px;
    background-color: var(--red-dark);
}

/* Tiêu đề phụ: chữ thường + chữ cái đầu hoa, gạch dưới xám + đoạn đỏ 50px */
.subtitlebar { position: relative; z-index: 0; display: block; clear: both; padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--c-border); }
.subtitlebar a, .subtitlebar span { display: inline-block; font-size: 20px; font-weight: 700; text-transform: lowercase; color: var(--text-primary); }
.subtitlebar a::first-letter, .subtitlebar span::first-letter { text-transform: uppercase; }
.subtitlebar::after { content: ""; position: absolute; z-index: 0; left: 0; bottom: -1px; width: 50px; height: 1px; background-color: var(--red); }

/* Lưới ô bài viết (row-cols-2 row-cols-lg-3) */
.zoneteaser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; margin-bottom: 3rem; }
.zoneteaser-grid-related { margin-bottom: 0; }
/* margin dưới đặt trên từng ô (kể cả hàng cuối) như col mb-3 mb-lg-4 của site cũ */
.zoneteaser-col { margin-bottom: 1rem; }
.zoneteaser { clear: both; height: 100%; background-color: var(--c-dark); }
.zoneteaser-headline { padding: .5rem; font-size: 100%; font-weight: 400; line-height: 1.5; color: var(--white); }
.zoneteaser-headline a { color: var(--white); }
@media (min-width: 992px) {
    .zoneteaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zoneteaser-col { margin-bottom: 1.5rem; }
}

/* Phân trang */
.pagination-wrap { display: flex; justify-content: center; margin-top: 1rem; }
.pagination { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; list-style: none; margin: 0 !important; padding: 0; }
.pagination .page-item { display: flex; justify-content: center; align-items: center; margin: .25rem !important; border: 0; border-radius: var(--radius); }
.pagination .page-link {
    display: block;
    padding: .6rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--white) !important;
    background-color: var(--c-dark) !important;
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
    cursor: pointer !important;
}
.pagination .page-link:hover { color: var(--red-dark) !important; }
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover { background-color: var(--red-dark) !important; color: var(--white) !important; }
/* Trang Video, Tài liệu, Tìm kiếm: site cũ dùng pt-4 thay vì mt-3 */
.pagination-wrap.pagination-wrap-pt { margin-top: 0; padding-top: 1.5rem; }
.pagination .page-item-num { display: none; }
@media (min-width: 992px) { .pagination .page-item-num { display: flex; } }

/* Tags (không bấm được, như site cũ) */
.tag-list { clear: both; display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; color: #333; }
.tag-list-item {
    display: inline-block;
    margin-right: .35rem;
    margin-bottom: .5rem;
    padding: .25rem .75rem;
    background-color: #fff;
    border: 1px solid var(--c-border);
    border-radius: 50rem !important;
}
.tag-list-label { color: var(--text-primary); }
.tag-list-link {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    color: #333;
}
.me-2 { margin-right: .5rem; }

/* Thẻ sản phẩm có khung (border rounded shadow-sm) */
.product-card {
    clear: both;
    padding: 15px;
    margin-bottom: .5rem;
    background-color: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

/* Lưới form (trang chủ "Tư vấn & Báo giá", trang Liên hệ): 1 cột, từ 992px 2 cột, cách nhau 1.5rem */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.form-grid-full { grid-column: 1 / -1; }
@media (min-width: 992px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 8. Nội dung tạm (Bước 1) ---------- */
.main { clear: both; position: relative; z-index: 0; }
.dev-placeholder { padding-top: 3rem; padding-bottom: 3rem; min-height: 40vh; }
.dev-placeholder p { margin-bottom: .5rem; }

/* ---------- 9. Form: lỗi từng trường, thông báo, bẫy spam ---------- */
.form-field { min-width: 0; }
.field-error { display: block; margin-top: .25rem; font-size: .875em; color: #ff6b6b; }
.field-error:empty { display: none; }
.form-control.is-invalid { box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5); }
.form-alert { margin-bottom: 1.5rem; padding: 1rem; border-radius: var(--radius); line-height: 1.5; }
.form-alert-success { color: #0f5132; background-color: #d1e7dd; }
.form-alert-error { color: #842029; background-color: #f8d7da; }
.form-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn-send[disabled] { opacity: .65; cursor: wait; }