/* ==========================================================
   KHO LANH CHAT LUONG CAO — MODERN CORPORATE UI
   Loaded AFTER style.css so legacy markup/functionality stays intact.
   Responsive targets: mobile / tablet / laptop / desktop.
   ========================================================== */

:root {
    --ui-primary: #222463;
    --ui-primary-2: #3446a8;
    --ui-primary-dark: #141738;
    --ui-red: #da0018;
    --ui-coral: #ff5b66;
    --ui-cyan: #1598d4;
    --ui-teal: #00a67d;
    --ui-gold: #f2b236;
    --ui-ink: #182033;
    --ui-muted: #697386;
    --ui-line: #e7ebf2;
    --ui-soft: #f5f7fb;
    --ui-white: #ffffff;
    --ui-radius-sm: 10px;
    --ui-radius: 16px;
    --ui-radius-lg: 24px;
    --ui-shadow-sm: 0 8px 24px rgba(23, 31, 56, .07);
    --ui-shadow: 0 16px 44px rgba(23, 31, 56, .11);
    --ui-shadow-hover: 0 24px 58px rgba(23, 31, 56, .16);
    --ui-transition: 260ms cubic-bezier(.2, .75, .25, 1);
}

/* Featured products use the same visual language as related-product cards. */
body.site-modern .featured-products-related-style {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Desktop gallery: balanced editorial mosaic (7/5 then 5/7).
   Four images keep equal visual weight without looking like a plain 2 x 2 grid. */
@media (min-width: 1200px) {
    body.site-modern .home-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, clamp(235px, 17vw, 300px)) !important;
        grid-auto-rows: clamp(235px, 17vw, 300px) !important;
        gap: 20px !important;
    }

    body.site-modern .home-gallery-card,
    body.site-modern .home-gallery-card-featured,
    body.site-modern .home-gallery-card.is-featured {
        grid-row: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 22px !important;
    }

    body.site-modern .home-gallery-card:nth-child(1) {
        grid-column: 1 / span 7 !important;
    }

    body.site-modern .home-gallery-card:nth-child(2) {
        grid-column: 8 / span 5 !important;
    }

    body.site-modern .home-gallery-card:nth-child(3) {
        grid-column: 1 / span 5 !important;
    }

    body.site-modern .home-gallery-card:nth-child(4) {
        grid-column: 6 / span 7 !important;
    }

    body.site-modern .home-gallery-card:nth-child(1) img,
    body.site-modern .home-gallery-card:nth-child(4) img {
        object-position: center 48%;
    }

    body.site-modern .home-gallery-card:hover {
        z-index: 3;
        transform: translateY(-6px) scale(1.008) !important;
    }
}

body.site-modern .featured-products-related-style .block--title {
    position: relative;
    margin: 0 0 28px;
    text-align: center;
}

body.site-modern .featured-products-related-style .block--title::before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: #ef233c;
    content: "";
}

body.site-modern .featured-products-related-style .main--title {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0;
    padding: 0 18px 10px;
    background: #fff;
    color: #202365;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
}

body.site-modern .featured-products-related-style .main--title::after {
    position: absolute;
    bottom: 0;
    left: 18px;
    width: 78px;
    height: 5px;
    border-radius: 10px;
    background: linear-gradient(90deg, #ed1c35 0 58%, #f7b733 58% 100%);
    content: "";
}

body.site-modern .featured-products-related-style .slick-list {
    margin: 0 -10px;
}

body.site-modern .featured-products-related-style .slick-track {
    display: flex;
}

body.site-modern .featured-products-related-style .slick-slide {
    height: auto;
    padding: 0 10px;
}

body.site-modern .featured-products-related-style .slick-slide > div,
body.site-modern .featured-products-related-style .featured-product-slide {
    height: 100%;
}

body.site-modern .featured-products-related-style .box-product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 480px;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e1e6ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(26, 42, 84, .08);
}

body.site-modern .featured-products-related-style .block-product--image {
    position: relative;
    padding: 8px;
    background: #f4f6fa;
}

body.site-modern .featured-products-related-style .block-product--image > a {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}

body.site-modern .featured-products-related-style .block-product--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.site-modern .featured-products-related-style .block-product--button {
    display: none;
}

body.site-modern .featured-products-related-style .block-product--content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 22px 22px;
}

body.site-modern .featured-products-related-style .block-product--title h3 {
    min-height: 52px;
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

body.site-modern .featured-products-related-style .block-product--title a {
    display: -webkit-box;
    overflow: hidden;
    color: #172052;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.site-modern .featured-products-related-style .block-product--rating {
    margin-top: auto;
    margin-bottom: 14px;
    color: #ff9d13;
    font-size: 17px;
}

body.site-modern .featured-products-related-style .block-product--price .price--sale {
    color: #ee132d;
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 575px) {
    body.site-modern .featured-products-related-style .block--title {
        margin-bottom: 20px;
    }

    body.site-modern .featured-products-related-style .main--title {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 25px;
    }

    body.site-modern .featured-products-related-style .main--title::after {
        left: 10px;
    }

    body.site-modern .featured-products-related-style .box-product-item {
        min-height: 0;
    }

    body.site-modern .featured-products-related-style .block-product--content {
        padding: 18px 16px 20px;
    }

    body.site-modern .featured-products-related-style .block-product--title h3 {
        min-height: 48px;
        font-size: 17px;
    }
}

/* ==========================================================
   Unified cart UI — mobile, tablet and laptop
   ========================================================== */
body.site-modern .box-cart-hidden,
body.site-modern .modern-cart-item,
body.site-modern .modern-cart-summary {
    border-color: #e3e8f1 !important;
    background: #fff !important;
    box-shadow: 0 16px 38px rgba(27, 36, 82, .10) !important;
}

body.site-modern .mobile-cart .block-cart-hidden--button .btn,
body.site-modern .modern-cart-summary .block-wapper-cart-bill--button .btn {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center;
    box-shadow: 0 9px 20px rgba(34, 36, 99, .16);
}

body.site-modern .mobile-cart .block-cart-hidden--button .btn--cart,
body.site-modern .modern-cart-summary button[type="submit"] {
    background: linear-gradient(135deg, #3446a8, #222463) !important;
    color: #fff !important;
}

body.site-modern .mobile-cart .block-cart-hidden--button .btn--payment,
body.site-modern .modern-cart-summary .btn--hover-color {
    background: linear-gradient(135deg, #e60023, #ff4355) !important;
    color: #fff !important;
}

body.site-modern .modern-cart-image img {
    padding: 6px;
    object-fit: contain !important;
}

body.site-modern .modern-cart-summary {
    padding: 20px !important;
}

body.site-modern .modern-cart-summary .block--title {
    margin-bottom: 18px !important;
}

body.site-modern .modern-cart-summary .block-wapper-cart-bill--total {
    margin-bottom: 10px;
    padding: 12px 0 16px !important;
    border-bottom: 1px solid #e8ecf3;
}

/* Tablet: compact anchored quick cart instead of a full-width sheet. */
@media (min-width: 576px) and (max-width: 991px) {
    body.site-modern .mobile-cart .block-minicart .box-cart-hidden {
        top: 70px !important;
        right: 14px !important;
        left: auto !important;
        width: min(620px, calc(100vw - 28px)) !important;
        max-width: 620px !important;
        padding: 16px !important;
        border-radius: 20px !important;
    }

    body.site-modern .mobile-cart .block-cart-hidden-list {
        max-height: 310px !important;
    }

    body.site-modern .mobile-cart .cart-item {
        grid-template-columns: 84px minmax(0, 1fr) 30px !important;
        gap: 12px !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    body.site-modern .mobile-cart .cart--image a,
    body.site-modern .mobile-cart .cart--image img {
        width: 84px !important;
        height: 84px !important;
    }

    body.site-modern .mobile-cart .product--title {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    body.site-modern .mobile-cart .product--qualities .input-group {
        width: 58px !important;
        max-width: 58px !important;
        height: 31px !important;
        min-height: 31px !important;
    }

    body.site-modern .mobile-cart .mini-cart-qty {
        height: 29px !important;
        min-height: 29px !important;
        line-height: 29px !important;
    }

    body.site-modern .modern-cart-summary {
        width: min(520px, 100%);
        margin-right: 0;
        margin-left: auto;
    }
}

/* Phone: same visual language, arranged vertically for touch. */
@media (max-width: 575px) {
    body.site-modern .mobile-cart .block-minicart .box-cart-hidden {
        right: 8px !important;
        left: 8px !important;
        padding: 13px !important;
        border-radius: 18px !important;
    }

    body.site-modern .mobile-cart .block-cart-hidden--total {
        margin-top: 4px;
        padding: 13px 2px !important;
        border-top: 1px solid #e8ecf3;
    }

    body.site-modern .modern-cart-summary {
        padding: 17px !important;
        border-radius: 18px !important;
    }

    body.site-modern .modern-cart-item {
        border-radius: 17px !important;
    }

    body.site-modern .modern-cart-field {
        min-height: 48px !important;
        padding: 9px 0 !important;
    }

    body.site-modern .modern-qty-control {
        width: 108px !important;
        height: 38px !important;
    }

    body.site-modern .modern-qty-control .input-group-btn,
    body.site-modern .modern-qty-control .btn {
        flex-basis: 34px;
        width: 34px !important;
        height: 36px !important;
    }

    body.site-modern .modern-qty-control .qty {
        height: 36px !important;
    }
}

/* Laptop: compact, aligned rows using the same controls and colors. */
@media (min-width: 992px) {
    body.site-modern .modern-cart-item {
        min-height: 126px;
        padding: 16px 18px !important;
    }

    body.site-modern .modern-cart-summary {
        border-radius: 20px !important;
    }
}

/* Desktop product navigation: reliable two-level hover flyout. */
@media (min-width: 992px) {
    body.site-modern .box-header,
    body.site-modern .box-header .block-header-bottom,
    body.site-modern .box-header .box-menu,
    body.site-modern .box-header .wsmainwp,
    body.site-modern .box-header .wsmenu,
    body.site-modern .box-header .wsmenu > .wsmenu-list,
    body.site-modern .box-header .wsmenu > .wsmenu-list > li,
    body.site-modern .box-header .wsmenu > .wsmenu-list > li > ul.sub-menu {
        overflow: visible !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu {
        z-index: 2200 !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children {
        position: relative !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children > ul.sub-menu {
        position: absolute !important;
        z-index: 2300 !important;
        top: -8px !important;
        left: calc(100% + 6px) !important;
        display: block !important;
        width: 300px !important;
        min-width: 300px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 8px 0 !important;
        overflow: visible !important;
        border: 1px solid #e1e6f0 !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 20px 48px rgba(17,28,67,.20) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(12px) scale(.985) !important;
        transform-origin: top left;
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children > ul.sub-menu::before {
        position: absolute;
        top: 0;
        right: 100%;
        width: 8px;
        height: 100%;
        content: "";
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:hover > ul.sub-menu,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:focus-within > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) scale(1) !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children > a {
        transition: padding-left .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:hover > a,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:focus-within > a {
        padding-left: 20px !important;
        color: var(--ui-red) !important;
        background: linear-gradient(90deg, #f1f4ff, #fff) !important;
        box-shadow: inset 3px 0 var(--ui-red);
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:hover > a .menu-child-arrow,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:focus-within > a .menu-child-arrow {
        color: var(--ui-red);
        transform: translateX(3px);
    }
}

/* Remove the former Slick shell; the shared paginated section owns the card. */
body.site-modern .shop-featured-carousel-section {
    padding: 0 !important;
    overflow: visible;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.site-modern .shop-featured-carousel-section .product-featured-section {
    width: 100%;
}

@media (max-width: 991px) {
    body.site-modern .shop-featured-column.shop-featured-carousel-section {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* Featured products share the exact card/pagination layout used by featured news. */
body.site-modern .shop-featured-carousel-section .product-featured-section {
    width: 100%;
    margin: 0;
}

body.site-modern .product-featured-card .product-featured-image {
    aspect-ratio: 16 / 10;
    padding: 8px;
    background: #f3f5f9;
}

body.site-modern .product-featured-card .product-featured-image img {
    object-fit: contain !important;
    background: #fff;
}

body.site-modern .product-featured-content h3 {
    min-height: 52px;
    margin-bottom: 18px;
}

body.site-modern .product-featured-rating {
    margin-top: auto;
    margin-bottom: 13px;
    color: #ff970f;
    font-size: 17px;
    letter-spacing: 1px;
}

body.site-modern .product-featured-price {
    min-height: 30px;
    margin-bottom: 15px;
}

body.site-modern .product-featured-price .price--sale {
    color: #ed1731;
    font-size: 20px;
    font-weight: 800;
}

body.site-modern .product-featured-price .price--origin {
    margin-left: 8px;
    color: #949cad;
    font-size: 13px;
    text-decoration: line-through;
}

body.site-modern .product-featured-more {
    margin-top: 0;
}

@media (max-width: 991px) {
    body.site-modern .shop-featured-carousel-section {
        padding-right: 0;
        padding-left: 0;
    }

    body.site-modern .product-featured-card .product-featured-image {
        aspect-ratio: 4 / 3;
    }
}

/* Article detail: use the full content width now that featured news is below. */
body.site-modern .box-single-post .single-post-main-column {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

body.site-modern .box-single-post .block-single-post--image,
body.site-modern .box-single-post .block-single-post--title,
body.site-modern .box-single-post .block-single-post--content {
    width: 100%;
    max-width: 100%;
}

body.site-modern .box-single-post .block-single-post--image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

@media (min-width: 992px) {
    body.site-modern .box-single-post .single-post-main-column {
        padding-right: 22px;
        padding-left: 22px;
    }

    body.site-modern .box-single-post .block-single-post--content {
        font-size: 17px;
        line-height: 1.8;
    }
}

/* Mobile banner: show the complete artwork instead of cropping its edges. */
@media (max-width: 767px) {
    body.site-modern .block-banner--slider .imgslideshow,
    body.site-modern .block-banner--slider .slick-active .imgslideshow {
        width: 100%;
        height: auto !important;
        object-fit: contain;
        transform: none;
    }
}

html {
    scroll-behavior: smooth;
    background: var(--ui-soft);
}

body.site-modern {
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 6% 3%, rgba(21, 152, 212, .08), transparent 23rem),
        radial-gradient(circle at 96% 18%, rgba(218, 0, 24, .06), transparent 22rem),
        var(--ui-soft);
    color: var(--ui-ink);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body.site-modern * {
    box-sizing: border-box;
}

body.site-modern img {
    max-width: 100%;
    height: auto;
}

body.site-modern a {
    color: var(--ui-primary);
    transition: color var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition), transform var(--ui-transition), box-shadow var(--ui-transition), opacity var(--ui-transition);
}

body.site-modern a:hover,
body.site-modern a:focus {
    color: var(--ui-red);
}

body.site-modern .site-shell {
    width: 100%;
    min-width: 0;
    overflow: clip;
}

body.site-modern .site-main {
    position: relative;
    z-index: 1;
    min-height: 58vh;
    padding-bottom: 42px;
}

body.site-modern .container {
    width: 100%;
    max-width: 1280px;
    padding-right: 24px;
    padding-left: 24px;
}

body.site-modern section {
    position: relative;
}

body.site-modern article > section:not(:first-child),
body.site-modern .site-main > section:not(:first-child) {
    margin-top: 4px;
}

/* ---------- Typography / section titles ---------- */
body.site-modern h1,
body.site-modern h2,
body.site-modern h3,
body.site-modern h4,
body.site-modern h5,
body.site-modern h6 {
    color: var(--ui-ink);
    font-family: "Montserrat", Arial, sans-serif;
    letter-spacing: -.02em;
}

body.site-modern .block--title,
body.site-modern .title-text,
body.site-modern .header-product-home,
body.site-modern .section-box-post > .card-title {
    position: relative;
    margin-bottom: 22px;
}

body.site-modern .block--title .main--title,
body.site-modern .title-text h2,
body.site-modern .header-product-home h4,
body.site-modern .section-box-post > .card-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 0 12px;
    color: var(--ui-primary) !important;
    font-size: clamp(22px, 2.1vw, 31px);
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

body.site-modern .block--title .main--title::after,
body.site-modern .title-text h2::after,
body.site-modern .header-product-home h4::after,
body.site-modern .section-box-post > .card-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-red), var(--ui-coral), var(--ui-gold));
    box-shadow: 0 4px 12px rgba(218, 0, 24, .18);
}

body.site-modern .block--title .sub--title {
    margin-top: 8px;
    color: var(--ui-muted);
}

/* ---------- Header ---------- */
body.site-modern .site-header {
    position: relative;
    z-index: 1040;
    width: 100%;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 32px rgba(18, 28, 56, .08);
    transition: box-shadow var(--ui-transition), transform var(--ui-transition);
}

body.site-modern .site-header.is-scrolled {
    box-shadow: 0 14px 42px rgba(18, 28, 56, .13);
}

body.site-modern .site-header-accent,
body.site-modern .site-footer-accent {
    height: 5px;
    background: linear-gradient(90deg, var(--ui-primary), var(--ui-cyan), var(--ui-teal), var(--ui-gold), var(--ui-red), var(--ui-primary));
    background-size: 220% 100%;
    animation: uiBrandFlow 9s linear infinite;
}

@keyframes uiBrandFlow {
    0% { background-position: 0 50%; }
    100% { background-position: 220% 50%; }
}

body.site-modern .box-header {
    height: auto !important;
    background: transparent;
}

body.site-modern .box-header .block-header-center {
    padding: 16px 0 !important;
    background: rgba(255,255,255,.98) !important;
}

body.site-modern .header-main-row {
    min-height: 76px;
}

body.site-modern .header-brand {
    display: flex;
    align-items: center;
    min-height: 64px;
}

body.site-modern .header-brand a {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    min-height: 58px;
    padding: 4px 0;
}

body.site-modern .header-brand img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(30, 36, 88, .08));
    transition: transform var(--ui-transition), filter var(--ui-transition);
}

body.site-modern .header-brand a:hover img {
    transform: translateY(-2px) scale(1.015);
    filter: drop-shadow(0 9px 18px rgba(30, 36, 88, .14));
}

body.site-modern .align-seft-center {
    align-self: center;
    padding-left: 15px;
}

body.site-modern .box-search {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

body.site-modern .box-search .input-group {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 52px;
    overflow: hidden;
    border: 1px solid #dce2ed;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(31, 39, 86, .07);
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

body.site-modern .box-search .input-group:focus-within {
    border-color: rgba(52, 70, 168, .62);
    box-shadow: 0 10px 30px rgba(52, 70, 168, .14), 0 0 0 4px rgba(52, 70, 168, .07);
    transform: translateY(-1px);
}

body.site-modern .box-search .form-control {
    height: 52px;
    padding: 0 20px;
    border: 0 !important;
    background: transparent;
    color: var(--ui-ink);
    font-size: 14px;
    box-shadow: none !important;
}

body.site-modern .box-search .form-control::placeholder {
    color: #98a1b1;
}

body.site-modern .box-search .input-group-append {
    padding: 5px;
}

body.site-modern .box-search .btn--search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary));
    color: #fff;
    box-shadow: 0 8px 18px rgba(34, 36, 99, .22);
}

body.site-modern .box-search .btn--search:hover {
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    color: #fff;
    transform: rotate(5deg) scale(1.06);
}

body.site-modern .header-actions > ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-modern .header-actions .box-cart {
    margin: 0 !important;
}

body.site-modern .box-cart .block-minicart > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid #e1e5ee;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f4f6fb);
    box-shadow: var(--ui-shadow-sm);
}

body.site-modern .box-cart .block-minicart > a:hover {
    border-color: rgba(218,0,24,.25);
    background: #fff;
    transform: translateY(-3px) rotate(-2deg);
    box-shadow: 0 14px 28px rgba(218, 0, 24, .12);
}

body.site-modern .box-cart .block-minicart > a img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

body.site-modern .box-cart .block-minicart .count-item {
    top: -7px;
    right: -8px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    box-shadow: 0 6px 14px rgba(218,0,24,.24);
}

body.site-modern .box-cart .block-minicart .box-cart-hidden {
    right: 0;
    top: calc(100% + 14px);
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: rgba(255,255,255,.99);
    box-shadow: var(--ui-shadow);
}

/* Desktop navigation */
body.site-modern .box-header .block-header-bottom {
    position: relative;
    padding: 0 !important;
    background: linear-gradient(112deg, var(--ui-primary-dark), var(--ui-primary) 58%, #2d3e99) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.08);
}

body.site-modern .block-header-bottom .container {
    max-width: 1280px;
}

body.site-modern .wsmainwp {
    max-width: none;
}

body.site-modern .wsmenu {
    font-family: "Montserrat", Arial, sans-serif;
}

body.site-modern .wsmenu > .wsmenu-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 !important;
    padding: 0;
}

body.site-modern .wsmenu > .wsmenu-list > li {
    position: relative;
}

body.site-modern .wsmenu > .wsmenu-list > li > a {
    position: relative;
    min-height: 52px;
    padding: 14px 22px !important;
    overflow: hidden;
    color: rgba(255,255,255,.9) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 24px;
    text-transform: uppercase;
}

body.site-modern .wsmenu > .wsmenu-list > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-gold), #fff, var(--ui-coral));
    transform: translateX(-50%);
    transition: width var(--ui-transition);
}

body.site-modern .wsmenu > .wsmenu-list > li:hover > a,
body.site-modern .wsmenu > .wsmenu-list > li > a.active,
body.site-modern .wsmenu > .wsmenu-list > li > a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

body.site-modern .wsmenu > .wsmenu-list > li:hover > a::after,
body.site-modern .wsmenu > .wsmenu-list > li > a.active::after,
body.site-modern .wsmenu > .wsmenu-list > li > a:hover::after {
    width: calc(100% - 38px);
}

body.site-modern .wsmenu > .wsmenu-list > li:first-child > a::before {
    color: var(--ui-gold);
}

body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu,
body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu {
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: rgba(255,255,255,.99);
    box-shadow: var(--ui-shadow);
}

body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu a {
    color: #394056;
    font-weight: 600;
}

body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li:hover > a,
body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu a:hover {
    background: #f4f6fb;
    color: var(--ui-red);
}

/* ---------- Breadcrumb ---------- */
body.site-modern .box-breadcrumb {
    margin: 24px 0 16px;
}

body.site-modern .box-breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid var(--ui-line);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 7px 22px rgba(22,32,55,.05);
    backdrop-filter: blur(10px);
}

body.site-modern .breadcrumb-item,
body.site-modern .breadcrumb-item a {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 650;
}

body.site-modern .breadcrumb-item a:hover {
    color: var(--ui-red);
}

/* ---------- Generic surfaces ---------- */
body.site-modern .box-wapper-shop,
body.site-modern .box-single-product,
body.site-modern .box-contact,
body.site-modern .section-box-post,
body.site-modern .box-wapper-cart,
body.site-modern .box-checkout,
body.site-modern .box-user,
body.site-modern .registration-area,
body.site-modern .box-search-result {
    padding-top: 28px;
    padding-bottom: 34px;
}

body.site-modern .card,
body.site-modern .panel,
body.site-modern .box-filter,
body.site-modern .menu-danhmuc,
body.site-modern .section-box-post,
body.site-modern .block-contact-form,
body.site-modern .block-contact-information,
body.site-modern .block-single-product--content,
body.site-modern .block-single-product--image,
body.site-modern .block-single-product--tabs {
    border: 1px solid rgba(222,228,239,.92);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
}

/* ---------- Homepage banner ---------- */
body.site-modern .box-banner {
    position: relative;
    max-width: 1280px;
    margin: 26px auto 0;
    padding: 0 24px;
}

body.site-modern .block-banner--slider {
    overflow: hidden;
    border-radius: 26px;
    background: #dfe5ef;
    box-shadow: 0 22px 55px rgba(18, 27, 62, .15);
}

body.site-modern .block-banner--slider .slide {
    position: relative;
    overflow: hidden;
}

body.site-modern .block-banner--slider .slide::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(12, 19, 49, .18), transparent);
}

body.site-modern .block-banner--slider .imgslideshow {
    display: block;
    width: 100%;
    height: clamp(210px, 31vw, 410px) !important;
    object-fit: cover;
    transition: transform 5.5s ease;
}

body.site-modern .block-banner--slider .slick-active .imgslideshow {
    transform: scale(1.025);
}

body.site-modern .block-banner--slider .slick-dots {
    bottom: 16px;
}

body.site-modern .block-banner--slider .slick-dots li button::before {
    color: #fff;
    font-size: 10px;
    opacity: .55;
}

body.site-modern .block-banner--slider .slick-dots li.slick-active button::before {
    color: var(--ui-gold);
    opacity: 1;
}

/* ---------- Homepage about ---------- */
body.site-modern .box-partner {
    padding: 58px 0 26px;
}

body.site-modern #about {
    position: relative;
    align-items: stretch;
    overflow: hidden;
    margin-right: 0;
    margin-left: 0;
    padding: 28px;
    border: 1px solid var(--ui-line);
    border-radius: 26px;
    background:
        radial-gradient(circle at 94% 12%, rgba(21,152,212,.12), transparent 16rem),
        linear-gradient(135deg, #ffffff, #f8faff);
    box-shadow: var(--ui-shadow);
}

body.site-modern #about::before {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -95px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(218,0,24,.11), rgba(242,178,54,.08));
}

body.site-modern #about > [class*="col-"] {
    display: flex;
}

body.site-modern #about .col-inner {
    width: 100%;
}

body.site-modern #about__p {
    position: relative;
    z-index: 1;
    color: #4e596c;
    font-size: 15px;
    line-height: 1.85;
}

body.site-modern #about__p p {
    height: 112px;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.85;
}

body.site-modern #about__p.showContent p {
    height: auto;
}

body.site-modern #about__p .readmore-btn {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    margin-top: 18px;
    padding: 9px 18px;
    border: 1px solid rgba(34,36,99,.16);
    border-radius: 999px;
    background: #fff;
    color: var(--ui-primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(34,36,99,.07);
}

body.site-modern #about__p .readmore-btn:hover {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 13px 26px rgba(34,36,99,.19);
}

body.site-modern #image__about1,
body.site-modern #about .img-inner {
    height: 100%;
    min-height: 310px;
}

body.site-modern #about .img-inner {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 18px 36px rgba(23,31,56,.14);
}

body.site-modern #about .img-inner img {
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
    transition: transform .75s ease, filter .75s ease;
}

body.site-modern #about .img-inner:hover img {
    transform: scale(1.055);
    filter: saturate(1.08) contrast(1.03);
}

/* ---------- Homepage news / gallery ---------- */
body.site-modern .bai_viet_tin_tuc {
    margin-top: 42px;
    padding: 52px 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.64), rgba(241,245,251,.86));
}

body.site-modern .div__ttha > .row {
    gap: 0;
}

body.site-modern .div__ttha > .row > .col {
    min-width: 0;
    padding: 18px;
}

body.site-modern .bai_viet_tin_tuc .image-cover {
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--ui-shadow-sm);
}

body.site-modern .bai_viet_tin_tuc .image-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease, filter .6s ease;
}

body.site-modern .bai_viet_tin_tuc .image-cover:hover img {
    transform: scale(1.07) rotate(.4deg);
    filter: saturate(1.08);
}

/* ---------- Product cards ---------- */
body.site-modern .product__div,
body.site-modern .block-item-product {
    display: flex;
    margin-bottom: 24px;
}

body.site-modern .box-product-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(24,32,51,.065);
    transition: transform var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition);
}

body.site-modern .box-product-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 4px;
    opacity: 0;
    background: linear-gradient(90deg, var(--ui-primary-2), var(--ui-cyan), var(--ui-red));
    transform: scaleX(.35);
    transform-origin: center;
    transition: opacity var(--ui-transition), transform var(--ui-transition);
}

body.site-modern .box-product-item:hover {
    border-color: rgba(52,70,168,.17);
    box-shadow: var(--ui-shadow-hover);
    transform: translateY(-7px);
}

body.site-modern .box-product-item:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

body.site-modern .box-product-item .block-product--image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(145deg, #fbfcff, #f1f4f9);
}

body.site-modern .box-product-item .block-product--image > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

body.site-modern .box-product-item .block-product--image img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
    transition: transform .55s cubic-bezier(.2,.75,.25,1), filter .55s ease;
}

body.site-modern .box-product-item:hover .block-product--image img {
    transform: scale(1.055);
    filter: saturate(1.04);
}

body.site-modern .box-product-item .block-product--image .block-product--button {
    top: auto !important;
    bottom: -70px;
    padding: 12px;
    background: linear-gradient(to top, rgba(16,23,56,.76), transparent);
    transition: bottom var(--ui-transition), opacity var(--ui-transition);
    opacity: 0;
}

body.site-modern .box-product-item:hover .block-product--image .block-product--button {
    top: auto !important;
    bottom: 0;
    opacity: 1;
}

body.site-modern .box-product-item .block-product--image .block-product--button .btn--add {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    box-shadow: 0 8px 18px rgba(218,0,24,.25);
}

body.site-modern .box-product-item .block-product--content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 18px 20px;
}

body.site-modern .box-product-item .block-product--title h3 {
    min-height: 48px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.55;
}

body.site-modern .box-product-item .block-product--title h3 a {
    color: #293044;
}

body.site-modern .box-product-item:hover .block-product--title h3 a {
    color: var(--ui-primary);
}

body.site-modern .box-product-item .block-product--rating {
    margin-top: auto;
    margin-bottom: 8px;
    color: var(--ui-gold);
    font-size: 12px;
}

body.site-modern .box-product-item .block-product--price .price--sale,
body.site-modern .price-product .price-sale {
    color: var(--ui-red);
    font-size: 17px;
    font-weight: 800;
}

body.site-modern .box-product-item .block-product--price .price--origin,
body.site-modern .price-product .price-original {
    margin-left: 8px;
    color: #9aa3b2;
    font-size: 12px;
}

/* Alternate legacy product card markup */
body.site-modern .block-item-product {
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-transition), box-shadow var(--ui-transition);
}

body.site-modern .block-item-product:hover {
    transform: translateY(-6px);
    box-shadow: var(--ui-shadow-hover);
}

body.site-modern .block-item-product > a {
    display: block;
    overflow: hidden;
    background: #f6f8fb;
}

body.site-modern .block-item-product > a img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: transform .55s ease;
}

body.site-modern .block-item-product:hover > a img {
    transform: scale(1.05);
}

body.site-modern .block-item-product .card-body {
    padding: 18px;
}

body.site-modern .block-item-product .card-body h3 {
    min-height: 44px;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.45;
}

body.site-modern .block-item-product .btn-cart {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    box-shadow: 0 7px 16px rgba(218,0,24,.18);
}

/* ---------- Product listing sidebar / filters ---------- */
body.site-modern .menu-danhmuc {
    float: none;
    width: 100%;
    margin: 0 0 20px;
    padding: 18px;
    overflow: hidden;
    background: #fff;
}

body.site-modern .menu-danhmuc .block-wapper--title h3,
body.site-modern .box-filter .block-wapper--title h3 {
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-primary) !important;
    font-size: 16px;
    font-weight: 800;
}

body.site-modern .menu-danhmuc > ul,
body.site-modern .box-filter-list ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

body.site-modern .menu-danhmuc li a,
body.site-modern .box-filter-list li label {
    display: block;
    padding: 9px 10px;
    border-radius: 9px;
    color: #4a5365;
    font-size: 13px !important;
    font-weight: 600;
}

body.site-modern .menu-danhmuc li a:hover {
    background: linear-gradient(90deg, rgba(52,70,168,.08), rgba(21,152,212,.06));
    color: var(--ui-red);
    transform: translateX(3px);
}

body.site-modern .box-filter {
    margin-bottom: 20px;
    padding: 18px;
}

body.site-modern .box-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.site-modern .box-filter-item input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--ui-primary);
}

body.site-modern .box-sort {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 7px 20px rgba(23,31,56,.045);
}

body.site-modern .box-sort .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

body.site-modern .box-sort .block-wapper--title {
    margin: 0;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- News cards ---------- */
body.site-modern .box-news-item,
body.site-modern .post-item {
    position: relative;
    height: calc(100% - 24px);
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition);
}

body.site-modern .box-news-item:hover,
body.site-modern .post-item:hover {
    border-color: rgba(52,70,168,.16);
    transform: translateY(-6px);
    box-shadow: var(--ui-shadow-hover);
}

body.site-modern .box-news-item .block-news--image {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #eef2f7;
}

body.site-modern .box-news-item .block-news--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease, filter .6s ease;
}

body.site-modern .box-news-item:hover .block-news--image img {
    transform: scale(1.055);
    filter: saturate(1.08);
}

body.site-modern .box-news-item .block-news--content {
    padding: 20px;
}

body.site-modern .box-news-item .block-news--title h3 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.45;
}

body.site-modern .box-news-item .block-news--postby {
    margin-bottom: 10px;
    color: var(--ui-cyan);
    font-size: 11px;
    font-weight: 650;
}

body.site-modern .box-news-item .block-news--hometext {
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.7;
}

body.site-modern .box-news-item .block-news--posttime {
    border-radius: 0 12px 0 12px;
    background: linear-gradient(145deg, var(--ui-primary), var(--ui-primary-2));
    box-shadow: 0 8px 18px rgba(34,36,99,.22);
}

body.site-modern .section-box-post {
    padding: 22px;
}

body.site-modern .section-box-post > hr {
    margin: -10px 0 22px;
    border-top-color: var(--ui-line);
}

/* ---------- Forms / controls ---------- */
body.site-modern .form-control,
body.site-modern .select--field,
body.site-modern .input--field,
body.site-modern .area--field {
    min-height: 44px;
    border: 1px solid #dfe4ed;
    border-radius: 10px;
    background: #fff;
    color: var(--ui-ink);
    font-size: 14px;
    box-shadow: none;
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
}

body.site-modern textarea.form-control,
body.site-modern .area--field {
    min-height: 120px;
}

body.site-modern .form-control:focus,
body.site-modern .select--field:focus,
body.site-modern .input--field:focus,
body.site-modern .area--field:focus {
    border-color: rgba(52,70,168,.55);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(52,70,168,.08);
}

body.site-modern .btn {
    border-radius: 10px;
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 700;
    transition: transform var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition);
}

body.site-modern .btn:hover {
    transform: translateY(-2px);
}

body.site-modern .btn--submit,
body.site-modern .btn--button,
body.site-modern .btn-primary,
body.site-modern .single-product-form--button .btn--add,
body.site-modern .single-product-form--button .btn--buy {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary));
    box-shadow: 0 8px 20px rgba(34,36,99,.2);
}

body.site-modern .btn--submit:hover,
body.site-modern .btn--button:hover,
body.site-modern .btn-primary:hover,
body.site-modern .single-product-form--button .btn--add:hover,
body.site-modern .single-product-form--button .btn--buy:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    box-shadow: 0 12px 26px rgba(218,0,24,.2);
}

/* ---------- Product detail ---------- */
body.site-modern .box-single-product {
    padding-top: 34px;
}

body.site-modern .block-single-product--image,
body.site-modern .block-single-product--content {
    height: 100%;
    padding: 22px;
}

body.site-modern .single-product-image--show {
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfcfe, #eef2f7);
}

body.site-modern .single-product-image--show img {
    width: 100%;
    object-fit: contain;
}

body.site-modern .single-product-image--slider {
    margin-top: 14px;
}

body.site-modern .single-product-slider-item {
    margin: 4px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    background: #fff;
    transition: border-color var(--ui-transition), transform var(--ui-transition);
}

body.site-modern .single-product-slider-item:hover {
    border-color: var(--ui-cyan);
    transform: translateY(-2px);
}

body.site-modern .block-single-product--content .single-product--title h3 {
    margin-bottom: 16px;
    color: var(--ui-primary);
    font-size: clamp(23px, 2.3vw, 34px);
    font-weight: 800;
    line-height: 1.3;
}

body.site-modern .single-product--price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

body.site-modern .single-product--price .price--sale {
    color: var(--ui-red);
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 850;
}

body.site-modern .single-product--price .price--origin {
    color: #a2a9b6;
    font-size: 14px;
}

body.site-modern .single-product--hometext {
    margin: 16px 0 22px;
    padding: 16px;
    border-left: 4px solid var(--ui-cyan);
    border-radius: 0 12px 12px 0;
    background: linear-gradient(90deg, rgba(21,152,212,.07), rgba(255,255,255,.4));
    color: #4f5869;
    line-height: 1.75;
}

/* Áp dụng khoảng đệm cho mobile, tablet và laptop; selector đầy đủ
   ngăn quy tắc cũ `padding: 15px 0` ghi đè phần lề trái/phải. */
body.site-modern .box-single-product .block-single-product--content .single-product--hometext {
    width: 100%;
    padding: 16px;
    border-top: 1px dashed var(--ui-red);
    border-right: 1px dashed var(--ui-red);
    border-bottom: 1px dashed var(--ui-red);
    border-left: 4px solid var(--ui-cyan);
    box-sizing: border-box;
}

body.site-modern .single-product-form--qualities .input-group {
    width: 150px;
}

body.site-modern .single-product-form--qualities .btn--value {
    min-width: 42px;
    border-color: var(--ui-line);
    background: #f5f7fa;
    color: var(--ui-primary);
}

body.site-modern .single-product-form--button {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.site-modern .single-product-form--button .btn {
    flex: 1 1 180px;
    padding: 11px 20px;
}

body.site-modern .block-single-product--tabs {
    margin-top: 28px;
    overflow: hidden;
}

body.site-modern .block-single-product--tabs .nav-tabs {
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--ui-line);
    background: #f8fafd;
}

body.site-modern .block-single-product--tabs .nav-link {
    border: 0;
    border-radius: 9px 9px 0 0;
    color: var(--ui-muted);
    font-weight: 700;
}

body.site-modern .block-single-product--tabs .nav-link.active {
    background: #fff;
    color: var(--ui-primary);
    box-shadow: 0 -5px 14px rgba(22,30,54,.05);
}

body.site-modern .block-single-product--tabs .tab-content {
    padding: 24px;
    color: #4d5666;
    line-height: 1.75;
}

body.site-modern .box-relative {
    margin-top: 36px;
    padding: 26px 0;
}

/* ---------- Contact / login / register / account ---------- */
body.site-modern .block-contact-form,
body.site-modern .block-contact-information {
    padding: 24px;
}

body.site-modern .block-contact-form h3,
body.site-modern .registration-area h3,
body.site-modern .panel-heading h3,
body.site-modern .panel-title {
    color: var(--ui-primary);
    font-weight: 800;
}

body.site-modern .registration-area .panel,
body.site-modern .registration-area .card {
    overflow: hidden;
}

body.site-modern .registration-area .panel-heading,
body.site-modern .registration-area .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-line);
    background: linear-gradient(135deg, #f9fbff, #f2f5fb);
}

body.site-modern .registration-area .panel-body,
body.site-modern .registration-area .card-body {
    padding: 22px;
}

/* ---------- Cart / checkout / tables ---------- */
body.site-modern .table-responsive {
    overflow-x: auto;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
    -webkit-overflow-scrolling: touch;
}

body.site-modern .table {
    margin-bottom: 0;
    background: #fff;
}

body.site-modern .table > thead > tr > th,
body.site-modern .table thead th {
    padding: 13px 12px;
    border-bottom: 1px solid var(--ui-line);
    background: linear-gradient(180deg, #f7f9fc, #f1f4f8);
    color: #4b5567;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
    vertical-align: middle;
}

body.site-modern .table > tbody > tr > td,
body.site-modern .table tbody td {
    padding: 13px 12px;
    border-top-color: #edf0f5;
    vertical-align: middle;
}

body.site-modern .table tbody tr {
    transition: background var(--ui-transition);
}

body.site-modern .table tbody tr:hover {
    background: #f8faff;
}

body.site-modern .box-wapper-cart,
body.site-modern .box-checkout {
    padding-top: 30px;
}

/* ---------- Pagination ---------- */
body.site-modern .box-pagination {
    display: flex;
    justify-content: center;
    margin: 28px 0 8px;
}

body.site-modern .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

body.site-modern .pagination > li > a,
body.site-modern .pagination > li > span,
body.site-modern .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    border: 1px solid var(--ui-line);
    border-radius: 10px !important;
    background: #fff;
    color: var(--ui-primary);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(24,32,51,.04);
}

body.site-modern .pagination > .active > a,
body.site-modern .pagination > .active > span,
body.site-modern .page-item.active .page-link,
body.site-modern .pagination > li > a:hover,
body.site-modern .page-link:hover {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary));
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- Modal ---------- */
body.site-modern .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(16,24,52,.25);
}

body.site-modern .modal-header {
    border-bottom-color: var(--ui-line);
    background: #f7f9fc;
}

/* ---------- Footer ---------- */
body.site-modern .site-footer {
    position: relative;
    z-index: 2;
    margin-top: 12px;
}

body.site-modern .box-footer {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background-color: var(--ui-primary-dark);
    background-position: center;
    background-size: cover;
}

body.site-modern .site-footer-overlay {
    padding: 58px 0 0;
    background:
        radial-gradient(circle at 86% 10%, rgba(21,152,212,.18), transparent 24rem),
        radial-gradient(circle at 8% 85%, rgba(218,0,24,.15), transparent 22rem),
        linear-gradient(118deg, rgba(16,20,53,.97), rgba(30,34,93,.94));
}

body.site-modern .footer-grid {
    align-items: flex-start;
}

body.site-modern .footer-column {
    margin-bottom: 34px;
}

body.site-modern .box-footer .block-footer--title h3,
body.site-modern .box-footer .main--title {
    position: relative;
    margin: 0 0 18px;
    padding-bottom: 12px;
    color: #fff !important;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    text-transform: uppercase;
}

body.site-modern .box-footer .block-footer--title h3::after,
body.site-modern .box-footer .main--title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-cyan), var(--ui-gold), var(--ui-coral));
}

body.site-modern .footer-contact-list,
body.site-modern .box-footer .block-footer--list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site-modern .footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 12px;
}

body.site-modern .footer-contact-list p {
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: 13px;
    line-height: 1.65;
}

body.site-modern .footer-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: var(--ui-gold);
}

body.site-modern .box-footer .block-footer--list ul li {
    margin: 0 0 6px;
}

body.site-modern .box-footer .block-footer--list ul li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 0 6px 14px;
    color: rgba(255,255,255,.75);
    font-size: 13px;
}

body.site-modern .box-footer .block-footer--list ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ui-cyan);
    transition: transform var(--ui-transition), background var(--ui-transition);
}

body.site-modern .box-footer .block-footer--list ul li a:hover {
    color: #fff;
    transform: translateX(4px);
}

body.site-modern .box-footer .block-footer--list ul li a:hover::before {
    background: var(--ui-red);
    transform: scale(1.45);
}

body.site-modern .footer-newsletter .block-newsletter--form {
    padding: 16px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 15px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
}

body.site-modern .footer-newsletter .input-group {
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

body.site-modern .footer-newsletter .form-control {
    min-height: 48px;
    border: 0;
    border-radius: 0;
}

body.site-modern .btn--newsletter {
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

body.site-modern .btn--newsletter:hover {
    background: linear-gradient(135deg, var(--ui-gold), #f29d25);
    color: #1d234b;
}

body.site-modern .box-copyright {
    margin-top: 10px;
    padding: 20px 0 22px;
    border-top: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.6);
    font-size: 12px;
    text-align: center;
}

/* ---------- Scroll reveal / motion ---------- */
body.site-modern.modern-ui-ready .ui-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1);
}

body.site-modern.modern-ui-ready .ui-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.site-modern .ui-back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary));
    color: #fff;
    box-shadow: 0 14px 30px rgba(34,36,99,.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--ui-transition), visibility var(--ui-transition), transform var(--ui-transition), background var(--ui-transition);
}

body.site-modern .ui-back-to-top.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.site-modern .ui-back-to-top:hover {
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    transform: translateY(-3px);
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
    body.site-modern .container {
        max-width: 100%;
        padding-right: 22px;
        padding-left: 22px;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > a {
        padding-right: 16px !important;
        padding-left: 16px !important;
        font-size: 13px;
    }

    body.site-modern .block-banner--slider .imgslideshow {
        height: clamp(210px, 35vw, 370px) !important;
    }
}

/* ---------- Mobile menu breakpoint used by webslidemenu ---------- */
@media only screen and (max-width: 991px) {
    html {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.site-modern {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body.site-modern.wsactive {
        overflow: hidden !important;
    }

    body.site-modern .site-main {
        padding-top: 0;
    }

    body.site-modern .box-header .block-header-center {
        padding: 12px 0 14px !important;
    }

    body.site-modern .header-main-row {
        min-height: 0;
    }

    body.site-modern .header-brand-col,
    body.site-modern .header-actions-col {
        display: none;
    }

    body.site-modern .header-search-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.site-modern .box-search {
        max-width: none;
    }

    body.site-modern .box-search .input-group {
        min-height: 48px;
    }

    body.site-modern .box-search .form-control {
        height: 48px;
        font-size: 13px;
    }

    body.site-modern .box-search .btn--search {
        width: 42px;
        height: 38px;
    }

    body.site-modern .block-header-bottom {
        min-height: 58px;
    }

    body.site-modern .wsmobileheader {
        position: relative;
        top: auto;
        height: 58px;
        border: 0;
        background: linear-gradient(112deg, var(--ui-primary-dark), var(--ui-primary));
        box-shadow: none;
    }

    body.site-modern .wsmobileheader .smllogo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 58px;
        padding: 5px 80px;
    }

    body.site-modern .wsmobileheader .smllogo img {
        width: auto;
        max-width: 118px;
        height: 46px;
        object-fit: contain;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,.14));
    }

    body.site-modern .wsanimated-arrow {
        top: 8px;
        left: 8px;
        width: 44px;
        height: 42px;
        border-radius: 12px;
        background: rgba(255,255,255,.08);
    }

    body.site-modern .wsanimated-arrow span,
    body.site-modern .wsanimated-arrow span::before,
    body.site-modern .wsanimated-arrow span::after {
        background: #fff;
    }

    body.site-modern .wsmobileheader .callusbtn {
        top: 0;
        right: 8px;
        display: flex;
        align-items: center;
        height: 58px;
    }

    body.site-modern .wsmobileheader .box-cart .block-minicart > a {
        width: 40px;
        height: 40px;
        border-color: rgba(255,255,255,.13);
        border-radius: 12px;
        background: rgba(255,255,255,.09);
        box-shadow: none;
    }

    body.site-modern .wsmobileheader .box-cart .block-minicart > a img {
        width: 23px;
        filter: brightness(0) invert(1);
    }

    body.site-modern .wsmobileheader .block-header--account > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: 6px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 12px;
        background: rgba(255,255,255,.09);
    }

    body.site-modern .wsmobileheader .block-header--account > a img {
        width: 25px !important;
        filter: brightness(0) invert(1);
    }

    body.site-modern .wsmenu {
        z-index: 1100;
    }

    body.site-modern .wsmenu > .wsmenu-list {
        justify-content: flex-start;
        width: 280px;
        margin-left: -280px !important;
        padding: 12px 10px 30px;
        overflow-y: auto;
        background: #fff;
        box-shadow: 18px 0 45px rgba(15,23,50,.18);
    }

    body.site-modern.wsactive .wsmenu > .wsmenu-list {
        margin-left: 0 !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > a {
        min-height: 47px;
        padding: 11px 38px 11px 14px !important;
        border: 0;
        border-bottom: 1px solid #edf0f5;
        border-radius: 9px;
        background: transparent !important;
        color: #40495b !important;
        font-size: 13px;
        text-align: left;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > a::after {
        display: none;
    }

    body.site-modern .wsmenu > .wsmenu-list > li:hover > a,
    body.site-modern .wsmenu > .wsmenu-list > li > a.active {
        background: linear-gradient(90deg, rgba(52,70,168,.09), rgba(21,152,212,.05)) !important;
        color: var(--ui-primary) !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu,
    body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu {
        border: 0;
        border-radius: 8px;
        box-shadow: none;
    }

    body.site-modern .box-banner {
        margin-top: 20px;
        padding-right: 22px;
        padding-left: 22px;
    }

    body.site-modern .block-banner--slider {
        border-radius: 20px;
    }

    body.site-modern #about {
        padding: 22px;
    }

    body.site-modern #about > [class*="col-"] + [class*="col-"] {
        margin-top: 22px;
    }

    body.site-modern .box-sort {
        justify-content: stretch;
    }

    body.site-modern .box-sort .form-group {
        width: 100%;
    }

    body.site-modern .box-sort .select--field {
        flex: 1;
    }

    body.site-modern .menu-danhmuc {
        margin-top: 0;
    }

    body.site-modern .block-single-product--content {
        margin-top: 20px;
    }

    body.site-modern .site-footer-overlay {
        padding-top: 44px;
    }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
    body.site-modern {
        font-size: 14px;
    }

    body.site-modern .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    body.site-modern .site-main {
        padding-bottom: 24px;
    }

    body.site-modern .box-header .block-header-center {
        padding: 10px 0 12px !important;
    }

    body.site-modern .box-search .form-control {
        padding-right: 12px;
        padding-left: 15px;
    }

    body.site-modern .box-banner {
        margin-top: 15px;
        padding-right: 15px;
        padding-left: 15px;
    }

    body.site-modern .block-banner--slider {
        border-radius: 15px;
        box-shadow: 0 13px 34px rgba(18,27,62,.13);
    }

    body.site-modern .block-banner--slider .imgslideshow {
        height: clamp(150px, 43vw, 220px) !important;
    }

    body.site-modern .block-banner--slider .slick-dots {
        bottom: 8px;
    }

    body.site-modern .box-partner {
        padding: 32px 0 12px;
    }

    body.site-modern #about {
        margin-right: 0;
        margin-left: 0;
        padding: 18px;
        border-radius: 18px;
    }

    body.site-modern #about .title-text h2,
    body.site-modern .title-text h2,
    body.site-modern .block--title .main--title,
    body.site-modern .header-product-home h4,
    body.site-modern .section-box-post > .card-title {
        font-size: 21px;
    }

    body.site-modern #about__p p {
        height: 132px;
        font-size: 14px;
        line-height: 1.75;
    }

    body.site-modern #image__about1,
    body.site-modern #about .img-inner,
    body.site-modern #about .img-inner img {
        min-height: 220px;
    }

    body.site-modern .bai_viet_tin_tuc {
        margin-top: 28px;
        padding: 32px 0;
    }

    body.site-modern .div__ttha > .row {
        display: block;
    }

    body.site-modern .div__ttha > .row > .col {
        width: 100%;
        padding: 10px 0 22px;
    }

    body.site-modern .product__div,
    body.site-modern .block-item-product {
        margin-bottom: 16px;
    }

    body.site-modern .box-product-item {
        border-radius: 14px;
    }

    body.site-modern .box-product-item .block-product--content {
        padding: 13px;
    }

    body.site-modern .box-product-item .block-product--title h3 {
        min-height: 42px;
        margin-bottom: 7px;
        font-size: 13px;
        line-height: 1.45;
    }

    body.site-modern .box-product-item .block-product--price .price--sale,
    body.site-modern .price-product .price-sale {
        font-size: 15px;
    }

    body.site-modern .box-product-item .block-product--image .block-product--button {
        display: none;
    }

    body.site-modern .box-product-item:hover {
        transform: translateY(-3px);
    }

    body.site-modern .box-news-item .block-news--content {
        padding: 16px;
    }

    body.site-modern .section-box-post {
        padding: 16px;
    }

    body.site-modern .box-sort {
        padding: 11px;
    }

    body.site-modern .box-sort .form-group {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    body.site-modern .menu-danhmuc,
    body.site-modern .box-filter {
        padding: 15px;
        border-radius: 14px;
    }

    body.site-modern .block-single-product--image,
    body.site-modern .block-single-product--content,
    body.site-modern .block-single-product--tabs .tab-content {
        padding: 16px;
    }

    body.site-modern .block-single-product--content .single-product--title h3 {
        font-size: 23px;
    }

    body.site-modern .single-product--price .price--sale {
        font-size: 26px;
    }

    body.site-modern .single-product-form--button .btn {
        flex: 1 1 100%;
    }

    body.site-modern .block-single-product--tabs .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }

    body.site-modern .table-responsive {
        border-radius: 12px;
    }

    body.site-modern .table {
        min-width: 680px;
    }

    body.site-modern .box-breadcrumb {
        margin: 16px 0 12px;
    }

    body.site-modern .box-breadcrumb .breadcrumb {
        gap: 3px;
        padding: 9px 12px;
        border-radius: 12px;
    }

    body.site-modern .footer-column {
        margin-bottom: 28px;
    }

    body.site-modern .site-footer-overlay {
        padding-top: 36px;
    }

    body.site-modern .footer-newsletter .input-group {
        display: flex;
        flex-wrap: nowrap;
    }

    body.site-modern .footer-newsletter .form-control {
        min-width: 0;
    }

    body.site-modern .btn--newsletter {
        padding-right: 13px;
        padding-left: 13px;
    }

    body.site-modern .ui-back-to-top {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }
}

/* ---------- Small phone ---------- */
@media (max-width: 575px) {
    body.site-modern .container {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.site-modern .box-banner {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.site-modern .wsmobileheader .smllogo {
        padding-right: 90px;
        padding-left: 56px;
        justify-content: flex-start;
    }

    body.site-modern .wsmobileheader .smllogo img {
        max-width: 105px;
    }

    body.site-modern .box-product-item .block-product--image img {
        padding: 6px;
    }

    body.site-modern .product__div {
        padding-right: 6px;
        padding-left: 6px;
    }

    body.site-modern .product__div.row,
    body.site-modern .row > .product__div:first-child {
        margin-left: 0;
    }

    body.site-modern .footer-newsletter .input-group {
        flex-wrap: wrap;
        overflow: visible;
        background: transparent;
    }

    body.site-modern .footer-newsletter .form-control {
        flex: 1 1 100%;
        width: 100%;
        margin-bottom: 8px;
        border-radius: 10px !important;
    }

    body.site-modern .footer-newsletter .input-group-append {
        width: 100%;
    }

    body.site-modern .btn--newsletter {
        width: 100%;
        border-radius: 10px !important;
    }
}

/* ==========================================================
   FEATURED SHOWCASE — card layout based on supplied reference
   ========================================================== */
body.site-modern .featured-showcase-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

body.site-modern .featured-showcase-line {
    display: block;
    width: 54px;
    height: 3px;
    margin-bottom: 10px;
    border-radius: 99px;
    background: #1d55f5;
}

body.site-modern .featured-showcase-heading h3 {
    margin: 0 0 8px;
    color: #14234b;
    font-size: clamp(25px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.12;
}

body.site-modern .featured-showcase-heading p {
    max-width: 310px;
    margin: 0;
    color: #727b91;
    font-size: 13px;
    line-height: 1.5;
}

body.site-modern .featured-showcase-icon {
    display: inline-flex;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-top: 12px;
    border-radius: 50%;
    background: #fff;
    color: #2054ec;
    font-size: 24px;
    box-shadow: 0 12px 30px rgba(32,84,236,.14);
}

body.site-modern .featured-showcase-card {
    position: relative;
}

body.site-modern .featured-showcase-card .block-feature--image {
    position: relative;
}

body.site-modern .featured-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 7px;
    background: #1f55eb;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(31,85,235,.25);
}

body.site-modern .featured-card-description {
    margin: 12px 0 0;
    color: #70798d;
    font-size: 12px;
    line-height: 1.55;
}

body.site-modern .featured-card-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 14px;
}

body.site-modern .featured-card-benefits > span {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    min-width: 0;
}

body.site-modern .featured-card-benefits i {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #edf3ff;
    color: #2459ed;
    font-size: 10px;
}

body.site-modern .featured-card-benefits b,
body.site-modern .featured-card-benefits small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.site-modern .featured-card-benefits b {
    color: #253354;
    font-size: 9px;
}

body.site-modern .featured-card-benefits small {
    color: #8790a2;
    font-size: 7px;
}

body.site-modern .featured-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding: 10px 15px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2058f3, #0d44df);
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(20,76,226,.2);
}

body.site-modern .featured-showcase-footer {
    margin-top: 24px;
    text-align: center;
}

body.site-modern .featured-showcase-footer a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border: 1px solid #e5e9f2;
    border-radius: 999px;
    background: #fff;
    color: #253354;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 7px 20px rgba(24,34,60,.08);
}

body.site-modern .shop-featured-carousel-section .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: 7px;
    width: auto;
    height: auto;
    margin-top: 18px;
    overflow: visible;
    background: transparent;
}

body.site-modern .shop-featured-carousel-section .slick-dots li {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
}

body.site-modern .shop-featured-carousel-section .slick-dots li button {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9d2e8;
}

body.site-modern .shop-featured-carousel-section .slick-dots li.slick-active button {
    background: #1f55ed;
}

@media (max-width: 575px) {
    body.site-modern .shop-featured-carousel-section {
        padding: 28px 20px 22px;
        border-radius: 22px;
        background: linear-gradient(145deg, #fff, #fbfcff);
    }

    body.site-modern .featured-showcase-heading {
        padding: 0 14px;
    }

    body.site-modern .featured-showcase-heading h3 {
        font-size: 27px;
    }

    body.site-modern .featured-showcase-heading p {
        max-width: 220px;
        font-size: 11px;
    }

    body.site-modern .featured-showcase-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        font-size: 21px;
    }

    body.site-modern .shop-featured-column .featured-showcase-card {
        min-height: 0;
        border-radius: 16px;
    }

    body.site-modern .shop-featured-column .featured-showcase-card .block-feature--image a {
        height: 230px !important;
        padding: 10px;
    }

    body.site-modern .shop-featured-column .featured-showcase-card .block-feature--content {
        padding: 14px 16px 0;
    }

    body.site-modern .featured-card-benefits {
        gap: 5px;
    }
}

/* Full-width featured rail on laptop/desktop and tablet. */
body.site-modern .shop-featured-carousel-section {
    width: 100%;
    margin-top: 38px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--ui-shadow-sm);
}

body.site-modern .shop-featured-carousel-section .box-feature {
    width: 100%;
}

body.site-modern .shop-featured-carousel-section .block-feature-list {
    margin: 0 -9px;
    overflow: hidden;
}

body.site-modern .shop-featured-carousel-section .slick-list {
    overflow: hidden;
    padding: 4px 0 10px;
}

body.site-modern .shop-featured-carousel-section .slick-track {
    display: flex;
}

body.site-modern .shop-featured-carousel-section .slick-slide {
    height: auto;
}

@media (min-width: 576px) {
    body.site-modern .shop-featured-carousel-section .block-feature-item {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        min-height: 350px;
        margin: 0 9px !important;
        padding: 0 0 18px !important;
        border: 1px solid var(--ui-line) !important;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 9px 24px rgba(23,31,56,.07);
    }

    body.site-modern .shop-featured-carousel-section .block-feature--image {
        width: 100% !important;
        max-width: none !important;
    }

    body.site-modern .shop-featured-carousel-section .block-feature--image a {
        width: 100% !important;
        height: 215px !important;
        border-radius: 17px 17px 0 0;
    }

    body.site-modern .shop-featured-carousel-section .block-feature--content {
        width: 100%;
        padding: 16px 18px 0;
    }
}

body.site-modern .shop-featured-carousel-section .slick-prev,
body.site-modern .shop-featured-carousel-section .slick-next {
    z-index: 4;
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #3446a8, #222463);
    box-shadow: 0 10px 24px rgba(34,36,99,.3);
}

body.site-modern .shop-featured-carousel-section .slick-prev {
    left: -13px;
}

body.site-modern .shop-featured-carousel-section .slick-next {
    right: -13px;
}

body.site-modern .shop-featured-carousel-section .slick-prev::before,
body.site-modern .shop-featured-carousel-section .slick-next::before {
    display: none;
}

body.site-modern .shop-featured-carousel-section .slick-prev i,
body.site-modern .shop-featured-carousel-section .slick-next i {
    color: #fff;
    font-size: 17px;
}

@media (max-width: 575px) {
    body.site-modern .shop-featured-carousel-section {
        margin-top: 26px;
        padding: 18px 20px 24px;
        border-radius: 18px;
    }
}

/* ==========================================================
   PRODUCT LISTING — responsive information hierarchy
   ========================================================== */
body.site-modern .box-wapper-shop > .container > .row {
    align-items: flex-start;
}

body.site-modern .shop-sidebar-column {
    position: sticky;
    top: 92px;
}

body.site-modern .product-category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.site-modern .product-category-mobile-toggle {
    display: none;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #f2f5fb;
    color: var(--ui-primary);
}

body.site-modern .shop-listing-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    padding: 22px 24px;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
}

body.site-modern .shop-listing-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--ui-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.site-modern .shop-listing-heading h1 {
    margin: 0;
    color: var(--ui-primary);
    font-size: clamp(21px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.25;
}

body.site-modern .shop-product-count {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(52,70,168,.08);
    color: var(--ui-primary);
    font-size: 12px;
    font-weight: 700;
}

body.site-modern .shop-results-column .modern-sort-box {
    margin-bottom: 20px;
}

body.site-modern .shop-category-compact {
    display: none;
}

body.site-modern .product-grid-row {
    margin-right: -10px;
    margin-left: -10px;
}

body.site-modern .product-grid-row > .product__div {
    padding-right: 10px;
    padding-left: 10px;
}

body.site-modern .product-grid-row .box-product-item {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}

body.site-modern .shop-empty-state {
    padding: clamp(42px, 8vw, 80px) 24px;
    border: 1px dashed #ccd4e3;
    border-radius: 20px;
    background: rgba(255,255,255,.8);
    text-align: center;
}

body.site-modern .shop-empty-state > i {
    margin-bottom: 14px;
    color: var(--ui-primary-2);
    font-size: 42px;
}

body.site-modern .shop-empty-state h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

body.site-modern .shop-empty-state p {
    max-width: 520px;
    margin: 0 auto 18px;
    color: var(--ui-muted);
}

body.site-modern .shop-empty-state .btn {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ui-primary);
    color: #fff;
    font-weight: 700;
}

@media (max-width: 1199px) {
    body.site-modern .shop-sidebar-column {
        display: none;
    }

    body.site-modern .shop-results-column {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.site-modern .shop-brand-filter-column {
        order: 3;
        margin-top: 22px;
    }

    body.site-modern .shop-sidebar-row {
        margin-right: 0;
        margin-left: 0;
    }

    body.site-modern .shop-sidebar-column .menu-danhmuc {
        width: 100%;
    }

    body.site-modern .shop-featured-column {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    body.site-modern .product-category-mobile-toggle {
        display: inline-flex;
    }

    body.site-modern .product-category-mobile-toggle i {
        transition: transform .25s ease;
    }

    body.site-modern .product-category-panel:not(.is-open) .product-category-tree {
        display: none;
    }

    body.site-modern .product-category-panel.is-open .product-category-mobile-toggle i {
        transform: rotate(180deg);
    }

    body.site-modern .shop-results-column .modern-sort-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 76px;
        padding: 12px 18px;
    }

    body.site-modern .shop-category-compact {
        position: relative;
        display: block;
        flex: 1 1 52%;
        min-width: 0;
        margin: 0;
    }

    body.site-modern .shop-category-compact-toggle {
        display: flex;
        width: 100%;
        height: 50px;
        padding: 0 16px;
        border: 1px solid #dbe2ef;
        border-radius: 14px;
        background: #f7f9fd;
        color: var(--ui-primary);
        font-size: 13px;
        font-weight: 800;
    }

    body.site-modern .shop-category-compact-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    body.site-modern .shop-category-compact-chevron {
        margin-left: auto;
    }

    body.site-modern .shop-category-compact.is-open .shop-category-compact-label i {
        transform: none;
    }

    body.site-modern .shop-category-compact-dropdown {
        position: absolute;
        z-index: 30;
        top: calc(100% + 8px);
        left: 0;
        display: none;
        width: min(430px, calc(100vw - 60px));
        max-height: 62vh;
        overflow-y: auto;
        padding: 10px;
        border: 1px solid var(--ui-line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 18px 44px rgba(22,35,79,.18);
    }

    body.site-modern .shop-category-compact.is-open .shop-category-compact-dropdown {
        display: block;
    }

    body.site-modern .shop-category-compact .product-category-tree {
        display: block;
        margin: 0;
    }

    body.site-modern .shop-category-compact:not(.show-all-categories) .product-category-item {
        display: none;
    }

    body.site-modern .shop-category-compact:not(.show-all-categories) .product-category-item.is-current-branch,
    body.site-modern .shop-category-compact:not(.show-all-categories) .product-category-item.is-active {
        display: block;
    }

    body.site-modern .shop-results-column .modern-sort-control {
        flex: 0 1 360px;
    }

    body.site-modern .shop-featured-column {
        order: 4;
        margin-top: 20px;
    }

    body.site-modern .shop-featured-column .block-feature-list {
        display: block;
        overflow: hidden;
        margin: 0 -6px;
    }

    body.site-modern .shop-featured-column .block-feature-list:not(.slick-initialized) .block-feature-item:not(:first-child) {
        display: none;
    }

    body.site-modern .shop-featured-column .block-feature-item {
        min-height: 150px;
        margin: 0 6px;
        padding: 14px;
        border: 1px solid var(--ui-line);
        border-radius: 15px;
        background: #fff;
    }

    body.site-modern .shop-featured-column .block-feature--title h3,
    body.site-modern .shop-featured-column .block-feature--title a {
        display: block;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    body.site-modern .shop-featured-column .slick-prev,
    body.site-modern .shop-featured-column .slick-next {
        z-index: 2;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--ui-primary);
        box-shadow: 0 8px 18px rgba(34,36,99,.22);
    }

    body.site-modern .shop-featured-column .slick-prev {
        left: -4px;
    }

    body.site-modern .shop-featured-column .slick-next {
        right: -4px;
    }

    body.site-modern .shop-featured-column .slick-dots {
        position: static;
        margin-top: 12px;
    }
}

@media (max-width: 767px) {
    body.site-modern .shop-listing-heading {
        align-items: flex-start;
        padding: 18px;
    }

    body.site-modern .shop-results-column .modern-sort-box {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    body.site-modern .shop-category-compact,
    body.site-modern .shop-results-column .modern-sort-control {
        flex: 0 0 auto;
        width: 100%;
    }

    body.site-modern .shop-category-compact-dropdown {
        position: static;
        width: 100%;
        max-height: 55vh;
        margin-top: 8px;
        box-shadow: none;
    }

}

@media (max-width: 575px) {
    body.site-modern .shop-listing-heading {
        flex-direction: row;
        align-items: flex-end;
        gap: 12px;
        margin-bottom: 12px;
        padding: 16px;
        border-radius: 15px;
    }

    body.site-modern .shop-listing-heading > div {
        min-width: 0;
    }

    body.site-modern .shop-listing-heading h1 {
        font-size: 20px;
    }

    body.site-modern .shop-product-count {
        padding: 6px 10px;
        font-size: 11px;
    }

    body.site-modern .product-grid-row {
        margin-right: -6px;
        margin-left: -6px;
    }

    body.site-modern .product-grid-row > .product__div {
        padding-right: 6px;
        padding-left: 6px;
    }

    body.site-modern .product-grid-row .block-product--content {
        padding: 12px 10px;
    }

    body.site-modern .product-grid-row .block-product--title h3 {
        font-size: 12px;
    }

    body.site-modern .shop-empty-state {
        padding: 42px 18px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body.site-modern *,
    body.site-modern *::before,
    body.site-modern *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    body.site-modern.modern-ui-ready .ui-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Member / user management pages ---------- */
body.site-modern .bg-brea {
    padding: 30px 0 38px;
    background: transparent !important;
}

body.site-modern .profile-main,
body.site-modern .users_commission,
body.site-modern .user-manager-page .box-wapper {
    min-width: 0;
}

body.site-modern .block-left-admin {
    padding: 0 12px !important;
}

body.site-modern .block-left-admin > .nav {
    position: sticky;
    top: 18px;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
}

body.site-modern .block-left-admin .nav-item {
    width: 100%;
}

body.site-modern .block-left-admin .nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #4a5365;
    font-size: 12px;
    font-weight: 700;
}

body.site-modern .block-left-admin .nav-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: #f0f3fa;
    color: var(--ui-primary-2);
}

body.site-modern .block-left-admin .nav-link:hover,
body.site-modern .block-left-admin .nav-link.active {
    background: linear-gradient(90deg, rgba(52,70,168,.10), rgba(21,152,212,.055));
    color: var(--ui-primary);
    transform: translateX(2px);
}

body.site-modern .account-structure-page_main-content,
body.site-modern .account-change-email,
body.site-modern .box-profile,
body.site-modern .box-slidebar-profile .card {
    min-width: 0;
    border: 1px solid var(--ui-line);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
}

body.site-modern .account-change-email,
body.site-modern .box-profile {
    padding: 22px;
}

body.site-modern .account-structure-page_title,
body.site-modern .box-profile .block-wapper--title h2 {
    position: relative;
    margin: 0 0 22px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-primary);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
}

body.site-modern .account-structure-page_title::after,
body.site-modern .box-profile .block-wapper--title h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 58px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-red), var(--ui-cyan));
}

body.site-modern .account-change-email_header {
    margin: 10px 0 5px;
    color: #556074 !important;
    font-size: 13px;
    font-weight: 700 !important;
}

body.site-modern .box-slidebar-profile {
    padding-left: 8px;
}

body.site-modern .box-slidebar-profile .card-image {
    text-align: center;
}

body.site-modern .box-slidebar-profile .card-image img {
    width: 132px;
    height: 132px;
    padding: 5px;
    border: 1px solid var(--ui-line);
    background: #fff;
    object-fit: cover;
    box-shadow: var(--ui-shadow-sm);
}

body.site-modern .box-slidebar-profile .card-body {
    padding: 20px;
}

body.site-modern .box-slidebar-profile .card-body h3 {
    color: var(--ui-primary);
    font-size: 16px;
    font-weight: 800;
}

body.site-modern .user-manager-page .info-box,
body.site-modern .card-stats {
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-transition), box-shadow var(--ui-transition);
}

body.site-modern .user-manager-page .info-box:hover,
body.site-modern .card-stats:hover {
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow);
}

body.site-modern .info-box-icon,
body.site-modern .card-stats .card-header-icon .card-icon {
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-cyan)) !important;
    color: #fff !important;
}

body.site-modern .progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f6;
    box-shadow: none;
}

body.site-modern .progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-cyan), var(--ui-primary-2));
}

@media (max-width: 991px) {
    body.site-modern .block-left-admin {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 18px;
    }

    body.site-modern .block-left-admin > .nav {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.site-modern .profile-main > .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.site-modern .box-slidebar-profile {
        margin-top: 20px;
        padding-left: 0;
    }
}

@media (max-width: 575px) {
    body.site-modern .block-left-admin > .nav {
        grid-template-columns: 1fr;
    }

    body.site-modern .account-change-email,
    body.site-modern .box-profile {
        padding: 16px;
    }

    body.site-modern .account-structure-page_title,
    body.site-modern .box-profile .block-wapper--title h2 {
        font-size: 18px;
    }

    body.site-modern .account-structure-page_title .float-right {
        float: none !important;
        display: flex;
        width: 100%;
        margin: 8px 0 0 !important;
        justify-content: center;
    }
}


/* ---------- Rich content / article detail safety ---------- */
body.site-modern .block-wapper-introduce--content,
body.site-modern .block-single-post--content,
body.site-modern #about__p,
body.site-modern .single-post--title,
body.site-modern .single-post-title--right,
body.site-modern .block-single-post--content p,
body.site-modern .block-wapper-introduce--content p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.site-modern .block-wapper-introduce--content img,
body.site-modern .block-single-post--content img,
body.site-modern .block-wapper-introduce--content iframe,
body.site-modern .block-single-post--content iframe,
body.site-modern .block-wapper-introduce--content video,
body.site-modern .block-single-post--content video,
body.site-modern .block-wapper-introduce--content table,
body.site-modern .block-single-post--content table {
    max-width: 100% !important;
}

body.site-modern .block-wapper-introduce--content img,
body.site-modern .block-single-post--content img {
    display: block;
    height: auto !important;
    margin: 18px auto;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(15, 24, 52, .12);
}

body.site-modern .block-wapper-introduce--content iframe,
body.site-modern .block-single-post--content iframe {
    width: 100% !important;
    min-height: 320px;
    border: 0;
    border-radius: 18px;
}

body.site-modern .block-wapper-introduce--content table,
body.site-modern .block-single-post--content table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}

/* ---------- Homepage gallery / news redesign ---------- */
body.site-modern .home-section-heading {
    max-width: 760px;
    margin: 0 auto 28px;
}

body.site-modern .home-section-heading p,
body.site-modern .home-news-heading p {
    margin: 12px 0 0;
    color: var(--ui-muted);
    font-size: 15px;
    line-height: 1.75;
}

body.site-modern .home-gallery-section {
    padding: 24px 0 10px;
}

body.site-modern .home-gallery-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 22px;
}

body.site-modern .home-gallery-card {
    position: relative;
    display: block;
    min-height: 240px;
    overflow: hidden;
    border-radius: 24px;
    background: #dfe7f3;
    box-shadow: var(--ui-shadow-sm);
    isolation: isolate;
}

body.site-modern .home-gallery-card.is-featured {
    grid-row: span 2;
    min-height: 510px;
}

body.site-modern .home-gallery-thumb,
body.site-modern .home-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
}

body.site-modern .home-gallery-thumb img {
    object-fit: cover;
    transition: transform .75s ease, filter .75s ease;
}

body.site-modern .home-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,20,38,.08), rgba(10,15,32,.64));
    z-index: 1;
}

body.site-modern .home-gallery-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 20px;
    color: #fff;
}

body.site-modern .home-gallery-content strong {
    display: block;
    font-size: 18px;
    line-height: 1.4;
}

body.site-modern .home-gallery-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.site-modern .home-gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ui-shadow-hover);
}

body.site-modern .home-gallery-card:hover .home-gallery-thumb img {
    transform: scale(1.08);
    filter: saturate(1.08) contrast(1.02);
}

body.site-modern .home-news-section {
    padding: 52px 0 10px;
}

body.site-modern .home-news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 24px;
}

body.site-modern .home-news-heading {
    max-width: 860px;
}

body.site-modern .home-news-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary));
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 14px 28px rgba(34,36,99,.18);
}

body.site-modern .home-news-more:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    color: #fff !important;
}

body.site-modern .home-news-shell {
    position: relative;
    padding: 10px 54px 6px;
    border: 1px solid var(--ui-line);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,248,253,.96));
    box-shadow: var(--ui-shadow);
}

body.site-modern .home-news-slider {
    margin: 0 -12px;
}

body.site-modern .home-news-slide {
    padding: 12px;
}

body.site-modern .home-news-card {
    height: 100%;
    margin-bottom: 0;
    border-radius: 22px;
}

body.site-modern .home-news-card__media {
    position: relative;
}

body.site-modern .home-news-card__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

body.site-modern .home-news-card__content {
    display: flex;
    flex-direction: column;
    min-height: 255px;
}

body.site-modern .home-news-meta {
    margin-bottom: 10px;
}

body.site-modern .home-news-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(21, 152, 212, .08);
    color: var(--ui-cyan);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

body.site-modern .home-news-date-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    padding: 10px 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    background: rgba(13, 19, 42, .76);
    backdrop-filter: blur(8px);
    color: #fff;
    box-shadow: 0 12px 28px rgba(11, 15, 32, .22);
}

body.site-modern .home-news-date-badge .day {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

body.site-modern .home-news-date-badge .month {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}

body.site-modern .home-news-card .block-news--title h3 {
    min-height: 72px;
    margin-bottom: 10px;
    font-size: 18px;
}

body.site-modern .home-news-card .block-news--hometext {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ui-muted);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

body.site-modern .home-news-card__action {
    margin-top: auto;
    padding-top: 16px;
}

body.site-modern .home-news-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ui-primary);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

body.site-modern .home-news-readmore i {
    transition: transform var(--ui-transition);
}

body.site-modern .home-news-readmore:hover i {
    transform: translateX(4px);
}

body.site-modern .home-news-footnote {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: var(--ui-muted);
    font-size: 13px;
    box-shadow: 0 8px 22px rgba(24,32,51,.07);
}

body.site-modern .home-news-footnote__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ui-gold), #ffd978);
    color: #fff;
}

body.site-modern .home-news-shell .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ui-primary);
    box-shadow: 0 12px 28px rgba(15,24,52,.14);
    transform: translateY(-50%);
}

body.site-modern .home-news-shell .slick-prev { left: 4px; }
body.site-modern .home-news-shell .slick-next { right: 4px; }

body.site-modern .home-news-shell .slick-prev::before,
body.site-modern .home-news-shell .slick-next::before {
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 900;
    color: var(--ui-primary);
    opacity: 1;
}

body.site-modern .home-news-shell .slick-prev::before { content: "\f053"; }
body.site-modern .home-news-shell .slick-next::before { content: "\f054"; }

body.site-modern .home-news-shell .slick-arrow:hover {
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary));
    color: #fff;
}

body.site-modern .home-news-shell .slick-arrow:hover::before {
    color: #fff;
}

body.site-modern .home-news-shell .slick-dots {
    bottom: -38px;
}

body.site-modern .home-news-shell .slick-dots li button:before {
    font-size: 11px;
    color: var(--ui-primary);
    opacity: .24;
}

body.site-modern .home-news-shell .slick-dots li.slick-active button:before {
    color: var(--ui-red);
    opacity: 1;
}

@media (max-width: 1199px) {
    body.site-modern .home-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.site-modern .home-gallery-card.is-featured {
        grid-row: span 1;
        min-height: 340px;
    }
}

@media (max-width: 991px) {
    body.site-modern .home-news-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.site-modern .home-news-shell {
        padding-right: 18px;
        padding-left: 18px;
    }

    body.site-modern .home-news-shell .slick-arrow {
        display: none !important;
    }
}

@media (max-width: 767px) {
    body.site-modern .home-gallery-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    body.site-modern .home-gallery-card,
    body.site-modern .home-gallery-card.is-featured {
        min-height: 230px;
    }

    body.site-modern .home-news-section {
        padding-top: 34px;
    }

    body.site-modern .home-news-shell {
        padding: 10px 8px 2px;
        border-radius: 18px;
    }

    body.site-modern .home-news-slide {
        padding: 8px;
    }

    body.site-modern .home-news-card .block-news--title h3 {
        min-height: auto;
        font-size: 16px;
    }

    body.site-modern .home-news-card__content {
        min-height: 0;
        padding: 16px;
    }

    body.site-modern .home-news-footnote {
        display: flex;
        width: 100%;
        border-radius: 18px;
        line-height: 1.55;
    }
}

/* ==========================================================
   HOMEPAGE V2 — ABOUT / GALLERY / NEWS HUB
   Fixes oversized media + mixed legacy layout rules.
   ========================================================== */
body.site-modern .home-page-v2 {
    width: 100%;
    overflow: hidden;
}

body.site-modern .home-page-v2 .home-section-heading {
    position: relative;
    z-index: 2;
    margin: 0 0 28px;
}

body.site-modern .home-page-v2 .home-section-heading-left {
    margin-bottom: 22px;
}

body.site-modern .home-page-v2 .home-section-heading-between {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
}

body.site-modern .home-page-v2 .home-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--ui-cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

body.site-modern .home-page-v2 .home-section-kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-red), var(--ui-gold));
}

body.site-modern .home-page-v2 .home-section-heading h2 {
    margin: 0;
    color: var(--ui-primary);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}

body.site-modern .home-page-v2 .home-section-line {
    display: block;
    width: 78px;
    height: 4px;
    margin-top: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-red), var(--ui-gold), var(--ui-cyan));
    box-shadow: 0 4px 14px rgba(218, 0, 24, .14);
}

body.site-modern .home-page-v2 .home-section-note,
body.site-modern .home-page-v2 .home-news-heading-copy {
    width: min(100%, 470px);
    margin: 0;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.75;
}

/* --- About: lock image proportions to prevent oversized media --- */
body.site-modern .home-about-section {
    padding: 56px 0 20px;
}

body.site-modern .home-about-card {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 42px;
    align-items: center;
    margin: 0 !important;
    padding: 38px !important;
    overflow: hidden;
    border: 1px solid rgba(218, 226, 239, .95);
    border-radius: 28px;
    background:
        radial-gradient(circle at 93% 8%, rgba(21, 152, 212, .14), transparent 21rem),
        radial-gradient(circle at 3% 96%, rgba(218, 0, 24, .07), transparent 17rem),
        linear-gradient(135deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 22px 58px rgba(23, 31, 56, .10);
}

body.site-modern .home-about-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: 25%;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(52, 70, 168, .09);
    border-radius: 44px;
    transform: rotate(28deg);
    pointer-events: none;
}

body.site-modern .home-about-copy,
body.site-modern .home-about-media {
    position: relative;
    z-index: 1;
    min-width: 0;
}

body.site-modern .home-about-content,
body.site-modern #about__p {
    width: 100% !important;
    max-width: none !important;
    color: #465269;
    font-size: 15px;
    line-height: 1.85;
}

body.site-modern .home-about-text {
    position: relative;
    max-height: 285px;
    overflow: hidden;
    transition: max-height .55s ease;
}

body.site-modern .home-about-text::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 62px;
    background: linear-gradient(to bottom, rgba(248, 251, 255, 0), rgba(248, 251, 255, .98));
    pointer-events: none;
    transition: opacity .25s ease;
}

body.site-modern #about__p.showContent .home-about-text {
    max-height: 1800px;
}

body.site-modern #about__p.showContent .home-about-text::after {
    opacity: 0;
}

body.site-modern #about__p .home-about-text p {
    height: auto !important;
    margin: 0 0 20px;
    overflow: visible !important;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

body.site-modern #about__p .home-about-text p:last-child {
    margin-bottom: 0;
}

body.site-modern #about__p .readmore-btn {
    gap: 9px;
    margin-top: 20px;
}

body.site-modern #about__p .readmore-btn i {
    transition: transform var(--ui-transition);
}

body.site-modern #about__p.showContent .readmore-btn i {
    transform: rotate(90deg);
}

body.site-modern .home-about-media,
body.site-modern #image__about1 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

body.site-modern .home-about-image-wrap {
    position: relative;
    width: 100%;
    height: clamp(280px, 31vw, 390px);
    min-height: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 23px;
    background: #eaf0f7;
    box-shadow: 0 18px 44px rgba(23,31,56,.16);
}

body.site-modern .home-about-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    width: 60px;
    height: 60px;
    border-top: 3px solid rgba(255,255,255,.82);
    border-right: 3px solid rgba(255,255,255,.82);
    border-radius: 0 14px 0 0;
    pointer-events: none;
}

body.site-modern .home-about-image-wrap img,
body.site-modern #about .home-about-image-wrap img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    transition: transform .8s cubic-bezier(.2,.75,.25,1), filter .8s ease;
}

body.site-modern .home-about-image-wrap:hover img {
    transform: scale(1.055);
    filter: saturate(1.08) contrast(1.03);
}

body.site-modern .home-about-image-shine {
    position: absolute;
    z-index: 3;
    top: -130%;
    left: -45%;
    width: 45%;
    height: 330%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
    transform: rotate(18deg);
    transition: left .85s ease;
    pointer-events: none;
}

body.site-modern .home-about-image-wrap:hover .home-about-image-shine {
    left: 120%;
}

/* --- Gallery: bento layout, fixed dimensions on all screens --- */
body.site-modern .home-gallery-section {
    padding: 62px 0 54px;
}

body.site-modern .home-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 205px;
    gap: 18px;
}

body.site-modern .home-gallery-card {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(218,226,239,.92);
    border-radius: 21px;
    background: #edf2f8;
    box-shadow: 0 12px 32px rgba(23,31,56,.08);
    isolation: isolate;
}

body.site-modern .home-gallery-card-featured {
    grid-column: span 2;
    grid-row: span 2;
}

body.site-modern .home-gallery-card img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    transition: transform .75s cubic-bezier(.2,.75,.25,1), filter .75s ease;
}

body.site-modern .home-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(23,31,56,.15);
}

body.site-modern .home-gallery-card:hover img {
    transform: scale(1.07);
    filter: saturate(1.08) contrast(1.02);
}

body.site-modern .home-gallery-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(17,23,55,.76), rgba(17,23,55,0) 58%);
    opacity: .82;
    transition: opacity var(--ui-transition);
}

body.site-modern .home-gallery-card:hover .home-gallery-overlay {
    opacity: 1;
}

body.site-modern .home-gallery-caption {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 17px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

body.site-modern .home-gallery-caption i {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding-top: 10px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    text-align: center;
    transform: rotate(45deg);
    backdrop-filter: blur(8px);
    transition: transform var(--ui-transition), background var(--ui-transition);
}

body.site-modern .home-gallery-card:hover .home-gallery-caption i {
    background: var(--ui-red);
    transform: rotate(90deg);
}

/* --- News hub: final homepage section, fixed-height discovery experience --- */
body.site-modern .home-news-section {
    position: relative;
    margin-top: 18px;
    padding: 68px 0 76px;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 0, rgba(21,152,212,.12), transparent 24rem),
        radial-gradient(circle at 5% 100%, rgba(218,0,24,.08), transparent 20rem),
        linear-gradient(180deg, #f8faff 0%, #eef3fa 100%);
    border-top: 1px solid rgba(218,226,239,.78);
}

body.site-modern .home-news-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(218,0,24,.45), rgba(21,152,212,.48), transparent);
    transform: translateX(-50%);
}

body.site-modern .home-news-hub {
    position: relative;
}

body.site-modern .home-news-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(340px, .84fr);
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(215,224,238,.96);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 56px rgba(23,31,56,.11);
}

body.site-modern .home-news-featured-media {
    position: relative;
    display: block;
    min-height: 390px;
    overflow: hidden;
    background: #e8edf5;
}

body.site-modern .home-news-featured-media img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.75,.25,1), filter .8s ease;
}

body.site-modern .home-news-featured:hover .home-news-featured-media img {
    transform: scale(1.045);
    filter: saturate(1.07);
}

body.site-modern .home-news-featured-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(13,20,54,.16), transparent 52%);
}

body.site-modern .home-news-date-badge {
    position: absolute;
    top: 22px;
    left: 22px;
    display: flex;
    flex-direction: column;
    min-width: 68px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 15px;
    background: rgba(20,23,56,.80);
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 24px rgba(13,20,54,.20);
    backdrop-filter: blur(10px);
}

body.site-modern .home-news-date-badge strong {
    font-size: 23px;
    line-height: 1;
}

body.site-modern .home-news-date-badge span {
    margin-top: 5px;
    color: rgba(255,255,255,.78);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
}

body.site-modern .home-news-featured-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px;
}

body.site-modern .home-news-featured-content::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -65px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(21,152,212,.09), rgba(242,178,54,.10));
    pointer-events: none;
}

body.site-modern .home-news-category {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(21,152,212,.09);
    color: #087ea9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

body.site-modern .home-news-featured-content h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-size: clamp(23px, 2.4vw, 34px);
    font-weight: 800;
    line-height: 1.35;
}

body.site-modern .home-news-featured-content h3 a {
    color: var(--ui-primary);
}

body.site-modern .home-news-featured-content h3 a:hover {
    color: var(--ui-red);
}

body.site-modern .home-news-featured-content p {
    position: relative;
    z-index: 1;
    margin: 0 0 22px;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.8;
}

body.site-modern .home-news-readmore {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 10px 17px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2));
    color: #fff !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .25px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(34,36,99,.18);
}

body.site-modern .home-news-readmore:hover {
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral));
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(218,0,24,.20);
}

body.site-modern .home-news-rail-shell {
    margin-top: 26px;
    padding: 20px 20px 16px;
    border: 1px solid rgba(215,224,238,.92);
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 12px 34px rgba(23,31,56,.065);
    backdrop-filter: blur(10px);
}

body.site-modern .home-news-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

body.site-modern .home-news-rail-head > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

body.site-modern .home-news-rail-label {
    color: var(--ui-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.site-modern .home-news-rail-head strong {
    color: #3b465b;
    font-size: 12px;
}

body.site-modern .home-news-rail-controls {
    display: flex;
    gap: 8px;
}

body.site-modern .home-news-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(34,36,99,.13);
    border-radius: 50%;
    background: #fff;
    color: var(--ui-primary);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(23,31,56,.06);
    transition: transform var(--ui-transition), color var(--ui-transition), background var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition);
}

body.site-modern .home-news-arrow:hover {
    border-color: transparent;
    background: var(--ui-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(34,36,99,.17);
}

body.site-modern .home-news-track {
    display: flex;
    gap: 18px;
    width: 100%;
    padding: 2px 2px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

body.site-modern .home-news-track::-webkit-scrollbar {
    display: none;
}

body.site-modern .home-news-card {
    position: relative;
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 0;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid rgba(221,228,239,.95);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(23,31,56,.055);
    transition: transform var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition);
}

body.site-modern .home-news-card:hover {
    border-color: rgba(52,70,168,.18);
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(23,31,56,.13);
}

body.site-modern .home-news-card-media {
    position: relative;
    display: block;
    height: 178px;
    overflow: hidden;
    background: #e9eef5;
}

body.site-modern .home-news-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s ease, filter .65s ease;
}

body.site-modern .home-news-card:hover .home-news-card-media img {
    transform: scale(1.06);
    filter: saturate(1.07);
}

body.site-modern .home-news-card-date {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(20,23,56,.80);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

body.site-modern .home-news-card-body {
    padding: 18px;
}

body.site-modern .home-news-card-body .home-news-category {
    margin-bottom: 9px;
    padding: 4px 8px;
    font-size: 9px;
}

body.site-modern .home-news-card-body h4 {
    display: -webkit-box;
    min-height: 48px;
    margin: 0 0 9px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--ui-primary);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.55;
}

body.site-modern .home-news-card-body h4 a {
    color: inherit;
}

body.site-modern .home-news-card-body h4 a:hover {
    color: var(--ui-red);
}

body.site-modern .home-news-card-body p {
    display: -webkit-box;
    min-height: 58px;
    margin: 0 0 14px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.75;
}

body.site-modern .home-news-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}

body.site-modern .home-news-card-link i {
    transition: transform var(--ui-transition);
}

body.site-modern .home-news-card-link:hover i {
    transform: translateX(4px);
}

body.site-modern .home-news-progress {
    position: relative;
    height: 4px;
    margin: 10px 2px 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e7ebf2;
}

body.site-modern .home-news-progress-bar {
    display: block;
    width: 20%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ui-red), var(--ui-gold), var(--ui-cyan), var(--ui-primary-2));
    transition: width .18s ease;
}

body.site-modern .home-news-empty {
    padding: 45px 20px;
    border: 1px dashed #d4dcea;
    border-radius: 20px;
    background: rgba(255,255,255,.74);
    color: var(--ui-muted);
    text-align: center;
}

body.site-modern .home-news-empty i {
    display: block;
    margin-bottom: 10px;
    color: var(--ui-cyan);
    font-size: 30px;
}

/* Tablet */
@media (max-width: 1199px) {
    body.site-modern .home-about-card {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .88fr);
        gap: 28px;
        padding: 30px !important;
    }

    body.site-modern .home-about-image-wrap {
        height: 330px;
    }

    body.site-modern .home-gallery-grid {
        grid-auto-rows: 180px;
    }

    body.site-modern .home-news-featured {
        grid-template-columns: minmax(0, 1.03fr) minmax(320px, .97fr);
        min-height: 350px;
    }

    body.site-modern .home-news-featured-media,
    body.site-modern .home-news-featured-media img {
        min-height: 350px;
    }

    body.site-modern .home-news-featured-content {
        padding: 32px;
    }

    body.site-modern .home-news-card {
        flex-basis: calc((100% - 18px) / 2);
    }
}

/* Tablet portrait + large mobile */
@media (max-width: 991px) {
    body.site-modern .home-page-v2 .home-section-heading-between {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    body.site-modern .home-page-v2 .home-section-note,
    body.site-modern .home-page-v2 .home-news-heading-copy {
        width: 100%;
        max-width: 650px;
    }

    body.site-modern .home-about-section {
        padding-top: 38px;
    }

    body.site-modern .home-about-card {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    body.site-modern .home-about-image-wrap {
        height: clamp(260px, 52vw, 380px);
    }

    body.site-modern .home-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 210px;
    }

    body.site-modern .home-gallery-card-featured {
        grid-column: span 2;
        grid-row: span 1;
    }

    body.site-modern .home-news-section {
        padding: 52px 0 58px;
    }

    body.site-modern .home-news-featured {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body.site-modern .home-news-featured-media,
    body.site-modern .home-news-featured-media img {
        height: clamp(260px, 48vw, 390px);
        min-height: 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
    body.site-modern .home-page-v2 .home-section-heading {
        margin-bottom: 20px;
    }

    body.site-modern .home-page-v2 .home-section-heading h2 {
        font-size: 25px;
    }

    body.site-modern .home-about-section {
        padding: 28px 0 10px;
    }

    body.site-modern .home-about-card {
        gap: 22px;
        padding: 18px !important;
        border-radius: 20px;
    }

    body.site-modern .home-about-text {
        max-height: 235px;
    }

    body.site-modern .home-about-content,
    body.site-modern #about__p {
        font-size: 14px;
        line-height: 1.75;
    }

    body.site-modern .home-about-image-wrap {
        height: 245px;
        border-radius: 17px;
    }

    body.site-modern .home-gallery-section {
        padding: 42px 0 34px;
    }

    body.site-modern .home-gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 235px;
        gap: 13px;
    }

    body.site-modern .home-gallery-card,
    body.site-modern .home-gallery-card-featured {
        grid-column: auto;
        grid-row: auto;
        border-radius: 17px;
    }

    body.site-modern .home-news-section {
        margin-top: 8px;
        padding: 42px 0 50px;
    }

    body.site-modern .home-news-featured {
        border-radius: 19px;
    }

    body.site-modern .home-news-featured-media,
    body.site-modern .home-news-featured-media img {
        height: 235px;
    }

    body.site-modern .home-news-date-badge {
        top: 14px;
        left: 14px;
        min-width: 58px;
        padding: 8px 9px;
        border-radius: 12px;
    }

    body.site-modern .home-news-date-badge strong {
        font-size: 20px;
    }

    body.site-modern .home-news-featured-content {
        padding: 23px 20px 25px;
    }

    body.site-modern .home-news-featured-content h3 {
        font-size: 21px;
    }

    body.site-modern .home-news-rail-shell {
        margin-top: 18px;
        padding: 15px 13px 13px;
        border-radius: 18px;
    }

    body.site-modern .home-news-rail-head {
        margin-bottom: 12px;
    }

    body.site-modern .home-news-rail-head > div:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    body.site-modern .home-news-arrow {
        width: 36px;
        height: 36px;
    }

    body.site-modern .home-news-track {
        gap: 13px;
    }

    body.site-modern .home-news-card {
        flex-basis: min(82vw, 310px);
        border-radius: 16px;
    }

    body.site-modern .home-news-card-media {
        height: 165px;
    }

    body.site-modern .home-news-card-body {
        padding: 15px;
    }
}

@media (max-width: 420px) {
    body.site-modern .home-about-image-wrap {
        height: 215px;
    }

    body.site-modern .home-gallery-grid {
        grid-auto-rows: 205px;
    }

    body.site-modern .home-news-featured-media,
    body.site-modern .home-news-featured-media img {
        height: 205px;
    }

    body.site-modern .home-news-featured-content {
        padding: 20px 17px 22px;
    }

    body.site-modern .home-news-featured-content h3 {
        font-size: 19px;
    }

    body.site-modern .home-news-card {
        flex-basis: 86vw;
    }
}

/* ==========================================================
   VIETNAMESE TYPOGRAPHY SAFETY
   Dùng system font có glyph tiếng Việt đầy đủ.
   ========================================================== */

body.site-modern {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Arial, "Helvetica Neue", sans-serif !important;
}

body.site-modern .home-section-kicker,
body.site-modern .home-section-heading h1,
body.site-modern .home-section-heading h2,
body.site-modern .home-section-heading h3,
body.site-modern .home-section-note,
body.site-modern .home-about-copy,
body.site-modern .home-about-copy p,
body.site-modern .home-about-copy li,
body.site-modern .home-about-copy a,
body.site-modern .home-about-copy span,
body.site-modern .home-about-copy strong,
body.site-modern .home-about-copy b,
body.site-modern .home-news-section,
body.site-modern .home-news-section h1,
body.site-modern .home-news-section h2,
body.site-modern .home-news-section h3,
body.site-modern .home-news-section h4,
body.site-modern .home-news-section p,
body.site-modern .home-news-section a,
body.site-modern .home-news-section span,
body.site-modern .home-news-section strong,
body.site-modern .home-gallery-section,
body.site-modern .home-gallery-caption,
body.site-modern .home-about-text,
body.site-modern .home-about-text h1,
body.site-modern .home-about-text h2,
body.site-modern .home-about-text h3,
body.site-modern .home-about-text h4,
body.site-modern .home-about-text h5,
body.site-modern .home-about-text h6,
body.site-modern .home-about-text p,
body.site-modern .home-about-text div,
body.site-modern .home-about-text span,
body.site-modern .home-about-text li,
body.site-modern .home-about-text strong,
body.site-modern .home-about-text b,
body.site-modern .home-about-text em,
body.site-modern .home-about-text a {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Arial, "Helvetica Neue", sans-serif !important;
}

/* Giữ font icon đúng để icon không bị vỡ */
body.site-modern .fa,
body.site-modern .fas,
body.site-modern .far {
    font-family: "Font Awesome 5 Free" !important;
}

body.site-modern .fab {
    font-family: "Font Awesome 5 Brands" !important;
}
/* ==========================================================
   V4 FINAL RESPONSIVE STABILITY PATCH
   Fix:
   1) Header bị mất ở mobile/tablet/small laptop.
   2) Gallery tablet chia ô không đều.
   3) Khoảng trắng lớn trước "SẢN PHẨM BÁN CHẠY".
   ========================================================== */

/* ---------- 1. Header: neutralize legacy responsive rules ---------- */
body.site-modern .site-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

body.site-modern .box-header {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
}

body.site-modern .box-header .block-header-center,
body.site-modern .box-header .block-header-bottom,
body.site-modern .box-header .box-menu {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Legacy style.css hides .block-header-center at <=1024px.
   The modern layout intentionally keeps the search area visible. */
@media (max-width: 1024px) {
    body.site-modern .box-header .block-header-center {
        display: block !important;
        margin: 0 !important;
    }
}

/* Small laptop / tablet landscape: keep the full desktop header. */
@media (min-width: 992px) and (max-width: 1199px) {
    body.site-modern .site-header {
        position: relative !important;
        top: auto !important;
    }

    body.site-modern .box-header {
        margin-top: 0 !important;
    }

    body.site-modern .box-header .block-header-center {
        display: block !important;
        padding: 13px 0 !important;
    }

    body.site-modern .header-main-row {
        display: flex !important;
        min-height: 68px;
        align-items: center;
    }

    body.site-modern .header-brand-col,
    body.site-modern .header-search-col,
    body.site-modern .header-actions-col {
        display: block !important;
    }

    body.site-modern .header-brand a {
        max-width: 180px;
    }

    body.site-modern .header-brand img {
        max-height: 66px;
    }

    body.site-modern .box-search {
        max-width: 620px;
    }

    body.site-modern .wsmobileheader {
        display: none !important;
    }

    body.site-modern .block-header-bottom {
        display: block !important;
        min-height: 52px !important;
    }

    body.site-modern .wsmenu {
        visibility: visible !important;
        position: static !important;
        overflow: visible !important;
    }

    body.site-modern .wsmenu > .wsmenu-list {
        display: flex !important;
        width: 100% !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
}

/* Mobile + tablet portrait: show search row + mobile navigation bar. */
@media (max-width: 991px) {
    body.site-modern .site-header {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        z-index: 1040 !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    body.site-modern .box-header {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    body.site-modern .box-header .block-header-center {
        display: block !important;
        padding: 10px 0 11px !important;
        background: #fff !important;
    }

    body.site-modern .header-main-row {
        display: flex !important;
        min-height: 0 !important;
        margin-right: -7px;
        margin-left: -7px;
    }

    /* Desktop logo/cart are replaced by the compact mobile bar. */
    body.site-modern .header-brand-col,
    body.site-modern .header-actions-col {
        display: none !important;
    }

    body.site-modern .header-search-col {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 7px !important;
        padding-left: 7px !important;
    }

    body.site-modern .box-search {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body.site-modern .block-header-bottom,
    body.site-modern .box-header .block-header-bottom {
        display: block !important;
        position: relative !important;
        min-height: 58px !important;
        margin: 0 !important;
    }

    body.site-modern .block-header-bottom .container {
        width: 100% !important;
        max-width: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.site-modern .box-menu {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-height: 58px !important;
    }

    body.site-modern .wsmobileheader {
        display: block !important;
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        z-index: 1050 !important;
        width: 100% !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        transform: none !important;
        background: linear-gradient(112deg, var(--ui-primary-dark), var(--ui-primary)) !important;
    }

    body.site-modern.wsactive .wsmobileheader {
        margin-left: 0 !important;
        transform: none !important;
    }

    body.site-modern .wsmobileheader .smllogo {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 5px 96px !important;
    }

    body.site-modern .wsmobileheader .smllogo img {
        display: block !important;
        width: auto !important;
        max-width: 118px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        object-fit: contain;
    }

    body.site-modern .wsanimated-arrow {
        display: block !important;
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 1060 !important;
    }

    body.site-modern .wsmobileheader .callusbtn {
        display: flex !important;
        position: absolute !important;
        top: 0 !important;
        right: 8px !important;
        z-index: 1060 !important;
        align-items: center;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Menu drawer remains hidden until hamburger is clicked. */
    body.site-modern .wsmenu {
        display: block !important;
        visibility: hidden;
    }

    body.site-modern.wsactive .wsmenu {
        visibility: visible !important;
    }
}

@media (max-width: 575px) {
    body.site-modern .box-header .block-header-center {
        padding: 8px 0 9px !important;
    }

    body.site-modern .box-search .input-group {
        min-height: 44px !important;
    }

    body.site-modern .box-search .form-control {
        height: 44px !important;
        padding-left: 15px !important;
        font-size: 12px !important;
    }

    body.site-modern .box-search .btn--search {
        width: 38px !important;
        height: 34px !important;
    }

    body.site-modern .wsmobileheader .smllogo {
        padding-right: 84px !important;
        padding-left: 68px !important;
    }

    body.site-modern .wsmobileheader .smllogo img {
        max-width: 102px !important;
        height: 43px !important;
    }
}

/* ---------- 2. Gallery: balanced responsive composition ---------- */

/* Desktop keeps the creative bento composition. */
@media (min-width: 1200px) {
    body.site-modern .home-gallery-grid {
        align-items: stretch;
    }
}

/* Tablet + small laptop:
   4 gallery items = clean 2 x 2 matrix, no orphan / empty cell. */
@media (min-width: 768px) and (max-width: 1199px) {
    body.site-modern .home-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: clamp(210px, 27vw, 290px) !important;
        gap: 18px !important;
    }

    body.site-modern .home-gallery-card,
    body.site-modern .home-gallery-card-featured {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 20px !important;
    }

    body.site-modern .home-gallery-card img,
    body.site-modern .home-gallery-card-featured img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* Phone product pagination: two large cards per local result page. */
body.site-modern .mobile-product-pagination {
    display: none;
}

@media (max-width: 575px) {
    body.site-modern .product-grid-row > .product__div[hidden] {
        display: none !important;
    }

    body.site-modern .mobile-product-pagination {
        display: flex;
        margin: 22px 0 8px;
    }

    body.site-modern .mobile-product-pagination[hidden] {
        display: none !important;
    }

    body.site-modern .product-grid-row > .product__div.is-mobile-page-entering {
        animation: mobileProductPageIn .38s cubic-bezier(.2,.75,.25,1) both;
    }
}

@keyframes mobileProductPageIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contact page: prevent narrow auto-sized Bootstrap columns on phones. */
body.site-modern .box-contact .block-contact-information {
    width: 100%;
    box-sizing: border-box;
}

body.site-modern .box-contact .block-contact-information ul li {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 767px) {
    body.site-modern .box-contact {
        padding-top: 16px;
    }

    body.site-modern .box-contact .container {
        padding-right: 14px;
        padding-left: 14px;
    }

    body.site-modern .box-contact .row.mt-5 {
        margin-top: 20px !important;
    }

    body.site-modern .box-contact .block-contact-form {
        width: 100%;
        margin-bottom: 16px;
        padding: 20px 18px;
        box-sizing: border-box;
    }

    body.site-modern .box-contact .block-contact-form h3 {
        margin-bottom: 18px;
        font-size: 21px;
        line-height: 1.3;
    }

    body.site-modern .box-contact .block-contact-information {
        margin: 0;
        padding: 15px;
        border-radius: 15px;
    }

    body.site-modern .box-contact .block-contact-information ul li {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 12px 0;
        align-items: flex-start;
        gap: 12px;
        color: var(--ui-ink);
        font-size: 14px;
        line-height: 1.65;
    }

    body.site-modern .box-contact .block-contact-information ul li + li {
        border-top: 1px solid #edf0f5;
    }

    body.site-modern .box-contact .block-contact-information ul li > span {
        flex: 0 0 38px;
        width: 38px;
    }

    body.site-modern .box-contact .block-contact-information ul li > span i {
        width: 38px;
        height: 38px;
        margin: 0;
        line-height: 36px;
    }

    body.site-modern .box-contact .block-contact-form .btn--submit {
        width: 100%;
        margin-bottom: 4px;
        border-radius: 12px;
    }
}

/* Phone: one image per row, consistent proportions. */
@media (max-width: 767px) {
    body.site-modern .home-gallery-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 13px !important;
    }

    body.site-modern .home-gallery-card,
    body.site-modern .home-gallery-card-featured {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        height: clamp(210px, 62vw, 285px) !important;
        min-height: 0 !important;
    }

    body.site-modern .home-gallery-card img,
    body.site-modern .home-gallery-card-featured img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ---------- 3. Bestseller: remove legacy 700px responsive gap ---------- */
body.site-modern .home-page-v2 .box-product {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 50px !important;
    padding-bottom: 44px !important;
}

body.site-modern .home-page-v2 .box-product .block--title {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
}

body.site-modern .home-page-v2 .box-product .title-text,
body.site-modern .home-page-v2 .box-product .title-text.space-20 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (min-width: 600px) and (max-width: 1024px) {
    body.site-modern .home-page-v2 .box-product {
        margin-top: 0 !important; /* overrides legacy style.css: margin-top:700px */
    }
}

@media (max-width: 767px) {
    body.site-modern .home-page-v2 .box-product {
        padding-top: 38px !important;
        padding-bottom: 34px !important;
    }

    body.site-modern .home-page-v2 .box-product .block--title {
        margin-bottom: 20px !important;
    }
}

/* ==========================================================
   V5 HEADER / ACCOUNT / MOBILE SEARCH ORDER
   - Mobile + tablet: header bar first, search BELOW.
   - Account uses a clear person icon.
   - Account and cart are separate; no overlap.
   - Laptop/desktop keeps logo + search + account + cart.
   ========================================================== */

/* ---------- Shared account component ---------- */
body.site-modern .block-header--account {
    position: relative;
    list-style: none;
}

body.site-modern .account-trigger {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0 !important;
    border: 1px solid #e1e5ee;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f4f6fb);
    color: var(--ui-primary) !important;
    font-size: 21px;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: var(--ui-shadow-sm);
    transition: transform var(--ui-transition),
                border-color var(--ui-transition),
                color var(--ui-transition),
                box-shadow var(--ui-transition),
                background var(--ui-transition);
}

body.site-modern .account-trigger:hover,
body.site-modern .account-trigger:focus {
    border-color: rgba(52, 70, 168, .25);
    background: #fff;
    color: var(--ui-red) !important;
    outline: none;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(34, 36, 99, .13);
}

body.site-modern .header-actions > ul {
    gap: 10px !important;
}

body.site-modern .header-actions > ul > li {
    margin: 0 !important;
}

/* Account dropdown used on both desktop and mobile */
body.site-modern .block-header--account .sub-account {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1300 !important;
    visibility: hidden;
    width: 220px;
    min-width: 220px !important;
    margin: 0 !important;
    padding: 10px !important;
    list-style: none;
    opacity: 0;
    border: 1px solid var(--ui-line);
    border-radius: 16px !important;
    background: rgba(255,255,255,.99);
    box-shadow: 0 18px 42px rgba(18, 28, 56, .16) !important;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

body.site-modern .block-header--account:hover .sub-account,
body.site-modern .block-header--account:focus-within .sub-account {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0);
}

body.site-modern .block-header--account .sub-account::before {
    content: "";
    position: absolute;
    right: 17px;
    bottom: 100%;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #fff;
}

body.site-modern .block-header--account .sub-account li {
    width: 100%;
    margin: 0 !important;
}

body.site-modern .block-header--account .sub-account li a:not(.btn) {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px !important;
    border-radius: 9px;
    color: var(--ui-ink) !important;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

body.site-modern .block-header--account .sub-account li a:not(.btn):hover {
    background: #f3f5fb !important;
    color: var(--ui-primary) !important;
}

body.site-modern .block-header--account .sub-account li a:not(.btn) i {
    width: 17px;
    color: var(--ui-primary);
    text-align: center;
}

body.site-modern .block-header--account .sub-account .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 38px;
    margin: 6px 0 0 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

body.site-modern .block-header--account .sub-account .btn--login {
    border-color: var(--ui-red) !important;
    background: linear-gradient(135deg, var(--ui-red), var(--ui-coral)) !important;
    color: #fff !important;
}

body.site-modern .block-header--account .sub-account .btn--register {
    border-color: var(--ui-primary) !important;
    background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary)) !important;
    color: #fff !important;
}

/* ---------- Desktop / laptop ---------- */
@media (min-width: 992px) {
    body.site-modern .desktop-account,
    body.site-modern .desktop-cart {
        display: inline-flex !important;
        align-items: center;
    }

    body.site-modern .mobile-header-actions {
        display: none !important;
    }

    body.site-modern .header-actions-col {
        display: block !important;
    }

    body.site-modern .header-actions > ul {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    body.site-modern .header-actions .box-cart .block-minicart > a,
    body.site-modern .desktop-account .account-trigger {
        width: 50px;
        height: 50px;
    }
}

/* ---------- Mobile + tablet (<= 991px) ---------- */
@media (max-width: 991px) {
    /*
     * Reorder the two shared header sections without duplicating markup:
     * 1) compact navy header with menu/logo/account/cart
     * 2) search field underneath
     */
    body.site-modern .box-header {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    body.site-modern .box-header > .block-header-bottom {
        order: 1 !important;
    }

    body.site-modern .box-header > .block-header-center {
        order: 2 !important;
    }

    body.site-modern .box-header .block-header-center {
        display: block !important;
        padding: 10px 0 12px !important;
        border-bottom: 1px solid #e7eaf2;
        background: #fff !important;
        box-shadow: 0 8px 24px rgba(18, 28, 56, .055);
    }

    body.site-modern .box-header .block-header-center .container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    body.site-modern .header-main-row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body.site-modern .header-search-col {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.site-modern .box-search {
        width: 100% !important;
        max-width: none !important;
    }

    body.site-modern .box-search .input-group {
        min-height: 46px !important;
        border-color: #dfe4ef !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 18px rgba(31, 39, 86, .06) !important;
    }

    body.site-modern .box-search .form-control {
        height: 46px !important;
        padding-left: 15px !important;
        font-size: 13px !important;
    }

    body.site-modern .box-search .input-group-append {
        padding: 4px !important;
    }

    body.site-modern .box-search .btn--search {
        width: 38px !important;
        height: 36px !important;
    }

    /* Compact header */
    body.site-modern .wsmobileheader {
        overflow: visible !important;
    }

    body.site-modern .wsmobileheader .smllogo {
        padding-right: 120px !important;
        padding-left: 68px !important;
    }

    body.site-modern .mobile-header-actions,
    body.site-modern .wsmobileheader .mobile-header-actions.callusbtn {
        position: absolute !important;
        top: 0 !important;
        right: 8px !important;
        left: auto !important;
        z-index: 1065 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        width: auto !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        transform: none !important;
    }

    /* Remove legacy positioning inherited from .box-cart.callusbtn / ul rules */
    body.site-modern .mobile-header-actions > .block-header--account,
    body.site-modern .mobile-header-actions > .box-cart {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.site-modern .mobile-header-actions .account-trigger,
    body.site-modern .mobile-header-actions .box-cart .block-minicart > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.09) !important;
        color: #fff !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.site-modern .mobile-header-actions .account-trigger {
        font-size: 19px !important;
    }

    body.site-modern .mobile-header-actions .box-cart .block-minicart > a img {
        width: 22px !important;
        height: 22px !important;
        filter: brightness(0) invert(1);
    }

    body.site-modern .mobile-header-actions .box-cart .block-minicart .count-item {
        top: -6px !important;
        right: -7px !important;
    }

    /* Dropdown opens to the left of the two action buttons, safely inside screen */
    body.site-modern .mobile-account .sub-account {
        top: calc(100% + 9px) !important;
        right: -46px !important;
        left: auto !important;
        width: min(230px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
    }

    body.site-modern .mobile-account .sub-account::before {
        right: 58px !important;
    }

    /* Hide the desktop action copy on mobile/tablet */
    body.site-modern .desktop-account,
    body.site-modern .desktop-cart {
        display: none !important;
    }
}

@media (max-width: 575px) {
    body.site-modern .wsmobileheader .smllogo {
        padding-right: 110px !important;
        padding-left: 62px !important;
    }

    body.site-modern .wsmobileheader .smllogo img {
        max-width: 100px !important;
        height: 42px !important;
    }

    body.site-modern .mobile-header-actions,
    body.site-modern .wsmobileheader .mobile-header-actions.callusbtn {
        right: 6px !important;
        gap: 5px !important;
    }

    body.site-modern .mobile-header-actions > .block-header--account,
    body.site-modern .mobile-header-actions > .box-cart,
    body.site-modern .mobile-header-actions .account-trigger,
    body.site-modern .mobile-header-actions .box-cart .block-minicart > a {
        width: 38px !important;
        height: 38px !important;
    }

    body.site-modern .mobile-account .sub-account {
        right: -43px !important;
    }
}

/* ==========================================================
   V5.1 ACCOUNT BUTTON SPACING FIX
   Cho phép text tự xuống dòng nếu cần, nhưng tạo khoảng cách
   rõ ràng giữa nút Đăng nhập và Đăng ký tài khoản.
   ========================================================== */

body.site-modern .block-header--account .sub-account li {
    margin-bottom: 10px !important;
}

body.site-modern .block-header--account .sub-account li:last-child {
    margin-bottom: 0 !important;
}

body.site-modern .block-header--account .sub-account .btn--login,
body.site-modern .block-header--account .sub-account .btn--register {
    margin: 0 !important;
    min-height: 42px;
    line-height: 1.35 !important;
}

@media (max-width: 575px) {
    body.site-modern .block-header--account .sub-account li {
        margin-bottom: 12px !important;
    }

    body.site-modern .block-header--account .sub-account li:last-child {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================
   V5.2 ACCOUNT DROPDOWN GAP FIX
   Dùng flex + gap để khoảng cách giữa các nút luôn ổn định,
   kể cả khi text nút Đăng ký xuống 2 dòng.
   ========================================================== */

body.site-modern .block-header--account .sub-account {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}

body.site-modern .block-header--account .sub-account > li {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.site-modern .block-header--account .sub-account > li .btn,
body.site-modern .block-header--account .sub-account > li .btn--login,
body.site-modern .block-header--account .sub-account > li .btn--register {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Mobile: cho khoảng cách thoáng hơn một chút */
@media (max-width: 575px) {
    body.site-modern .block-header--account .sub-account {
        gap: 14px !important;
    }
}

/* ==========================================================
   V5.3 LOGIN PAGE BUTTON SPACING FIX
   Đây mới là cụm nút ở trang Đăng nhập:
   .block-user--button chứa nút "Đăng nhập" + "Đăng ký tài khoản".
   Khi thiếu chiều ngang, cho xuống hàng nhưng luôn có khoảng cách.
   ========================================================== */

body.site-modern .block-user--button {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px 14px !important;
    margin-top: 18px !important;
}

body.site-modern .block-user--button .btn,
body.site-modern .block-user--button .btn--button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

/* Gỡ margin-right Bootstrap cũ để gap của flex điều khiển khoảng cách */
body.site-modern .block-user--button .mr-2 {
    margin-right: 0 !important;
}

/* Tablet/mobile: nếu không đủ chỗ thì xuống hàng gọn, cách nhau rõ ràng */
@media (max-width: 767px) {
    body.site-modern .block-user--button {
        gap: 14px !important;
    }

    body.site-modern .block-user--button .btn,
    body.site-modern .block-user--button .btn--button {
        flex: 0 1 auto !important;
        min-height: 46px !important;
    }
}

/* Điện thoại nhỏ: mỗi nút có thể chiếm trọn hàng cho cân đối */
@media (max-width: 420px) {
    body.site-modern .block-user--button {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    body.site-modern .block-user--button .btn,
    body.site-modern .block-user--button .btn--button {
        width: 100% !important;
    }
}



/* ==========================================================
   V8 STABLE SHOP / NAV / CART
   Clean patch based on the last stable animated UI (V5.3).
   ========================================================== */

/* ---------- Keep hover / motion visible ---------- */
body.site-modern .box-product-item,
body.site-modern .block-feature-item,
body.site-modern .product-category-panel,
body.site-modern .modern-cart-item {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.site-modern .box-product-item:hover { transform: translateY(-7px) !important; }
body.site-modern .block-feature-item:hover { transform: translateX(4px); background: #fbfcff; }

/* ---------- Mobile nav drawer: vertical + submenu works with patched webslidemenu.js ---------- */
@media (max-width: 991px) {
    body.site-modern .wsmenu { z-index: 1200 !important; }
    body.site-modern .wsmenu > .wsmenu-list {
        display: block !important;
        width: min(82vw, 310px) !important;
        max-width: 310px !important;
        height: calc(100dvh - 58px) !important;
        max-height: calc(100dvh - 58px) !important;
        margin-left: -310px !important;
        padding: 16px 12px 30px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #fff !important;
        border-radius: 0 18px 18px 0;
        box-shadow: 18px 0 45px rgba(15,23,50,.20) !important;
        -webkit-overflow-scrolling: touch;
    }
    body.site-modern.wsactive .wsmenu > .wsmenu-list { margin-left: 0 !important; }
    body.site-modern .wsmenu > .wsmenu-list > li {
        display: block !important; float: none !important; width: 100% !important; margin: 0 0 5px !important;
    }
    body.site-modern .wsmenu > .wsmenu-list > li > a {
        display: flex !important; align-items: center !important; width: 100% !important; min-height: 50px !important;
        padding: 12px 46px 12px 14px !important; border: 0 !important; border-radius: 12px !important;
        color: #283253 !important; background: transparent !important; font-size: 14px !important; font-weight: 750 !important;
        line-height: 1.35 !important; text-align: left !important; white-space: normal !important;
    }
    body.site-modern .wsmenu > .wsmenu-list > li > a:hover,
    body.site-modern .wsmenu > .wsmenu-list > li > a.active {
        background: linear-gradient(90deg, rgba(52,70,168,.10), rgba(21,152,212,.05)) !important;
        color: var(--ui-primary) !important;
    }
    body.site-modern .wsmenu-click {
        display: flex !important; position: absolute !important; top: 0 !important; right: 0 !important;
        align-items: center !important; justify-content: center !important; width: 46px !important; height: 50px !important;
        cursor: pointer !important; z-index: 3 !important;
    }
    body.site-modern .wsmenu-click .wsmenu-arrow { margin: 0 !important; color: var(--ui-primary) !important; transition: transform .2s ease; }
    body.site-modern .wsmenu-click.ws-activearrow .wsmenu-arrow { transform: rotate(180deg); color: var(--ui-red) !important; }
    body.site-modern .wsmenu > .wsmenu-list > li > .sub-menu,
    body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu {
        position: static !important; width: 100% !important; max-width: 100% !important; margin: 4px 0 8px !important;
        padding: 7px !important; overflow: visible !important; border: 0 !important; border-radius: 12px !important;
        background: #f7f9fc !important; box-shadow: none !important;
    }
    body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu .container { width: 100% !important; max-width: none !important; padding: 4px !important; }
    body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu .row,
    body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu [class*="col-"] { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
    body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu img { display: none !important; }
    body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list { margin: 0 0 8px !important; }
    body.site-modern .wsmenu > .wsmenu-list > li > .wsmegamenu a,
    body.site-modern .wsmenu > .wsmenu-list > li > .sub-menu a { white-space: normal !important; line-height: 1.4 !important; }

    /* The menu plugin supplies its own mobile accordion arrow. Keep the
       category label clickable and remove the duplicate desktop arrow. */
    body.site-modern .wsmenu .menu-child-arrow {
        display: none !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li {
        position: relative !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 48px !important;
        padding: 11px 48px 11px 14px !important;
        color: #283253 !important;
        font-size: 13px !important;
        font-weight: 750 !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li:hover > a,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li:focus-within > a {
        padding-left: 14px !important;
        color: #283253 !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02 {
        position: absolute !important;
        z-index: 4 !important;
        top: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 48px !important;
        cursor: pointer !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02 > i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        border: 1px solid #e5e9f2;
        border-radius: 9px;
        background: #f1f4fa;
        color: #7f899d !important;
        font-size: 15px !important;
        transition: transform .2s ease, color .2s ease, background .2s ease;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li .wsmenu-click02 > i.wsmenu-rotate {
        background: rgba(52,70,168,.08);
        color: var(--ui-primary) !important;
        transform: rotate(180deg);
    }

    body.site-modern #wsnavtoggle.wsanimated-arrow { display:flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:42px !important; padding:0 !important; }
    body.site-modern #wsnavtoggle.wsanimated-arrow > span { position:relative !important; display:block !important; width:22px !important; height:2px !important; margin:0 !important; background:#fff !important; border-radius:99px; transition:background .18s ease; }
    body.site-modern #wsnavtoggle.wsanimated-arrow > span::before,
    body.site-modern #wsnavtoggle.wsanimated-arrow > span::after { content:"" !important; position:absolute !important; left:0 !important; width:22px !important; height:2px !important; background:#fff !important; border-radius:99px; transition:top .18s ease, transform .18s ease; }
    body.site-modern #wsnavtoggle.wsanimated-arrow > span::before { top:-7px !important; }
    body.site-modern #wsnavtoggle.wsanimated-arrow > span::after { top:7px !important; }
    body.site-modern.wsactive #wsnavtoggle.wsanimated-arrow > span { background:transparent !important; }
    body.site-modern.wsactive #wsnavtoggle.wsanimated-arrow > span::before { top:0 !important; transform:rotate(45deg) !important; }
    body.site-modern.wsactive #wsnavtoggle.wsanimated-arrow > span::after { top:0 !important; transform:rotate(-45deg) !important; }
}

/* ---------- Native category accordion: no JavaScript dependency ---------- */
body.site-modern .product-category-panel:not(.shop-category-compact) { overflow:hidden !important; border:1px solid var(--ui-line); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(29,38,83,.055); }
body.site-modern .product-category-title { padding:16px 17px 10px !important; }
body.site-modern .product-category-title h3 { display:flex; align-items:center; gap:9px; margin:0 !important; color:var(--ui-primary) !important; font-size:17px !important; }
body.site-modern .product-category-tree { margin:0 !important; padding:0 12px 12px !important; list-style:none !important; }
body.site-modern .product-category-item { margin:0 !important; padding:0 !important; list-style:none !important; border-top:1px solid #edf0f5; }
body.site-modern .product-category-details summary,
body.site-modern .product-category-direct { display:flex !important; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:11px 10px !important; color:#273152 !important; font-size:13px !important; font-weight:750 !important; line-height:1.4 !important; cursor:pointer; list-style:none; text-decoration:none !important; border-radius:11px; transition:background .2s ease,color .2s ease; }
body.site-modern .product-category-details summary::-webkit-details-marker { display:none; }
body.site-modern .product-category-details summary:hover,
body.site-modern .product-category-direct:hover { background:#f5f7fc !important; color:var(--ui-primary) !important; }
body.site-modern .product-category-summary-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; border-radius:10px; background:#f3f5fb; color:var(--ui-primary); }
body.site-modern .product-category-summary-icon i { transition:transform .2s ease; }
body.site-modern details[open] > summary .product-category-summary-icon i { transform:rotate(180deg); }
body.site-modern .product-category-submenu { padding:2px 7px 10px; }
body.site-modern .product-category-submenu ul { margin:5px 0 0 !important; padding:5px !important; list-style:none !important; border-radius:11px; background:#f8fafd; }
body.site-modern .product-category-submenu li { margin:0 !important; list-style:none !important; }
body.site-modern .product-category-submenu a { display:flex !important; align-items:center; gap:8px; padding:9px 10px !important; border-radius:9px; color:#59627a !important; font-size:12px !important; font-weight:650 !important; line-height:1.4 !important; text-decoration:none !important; transition:background .18s ease,color .18s ease,transform .18s ease; }
body.site-modern .product-category-submenu a:hover,
body.site-modern .product-category-submenu li.is-active a { background:#fff !important; color:var(--ui-primary) !important; transform:translateX(3px); box-shadow:0 5px 14px rgba(29,38,83,.06); }
body.site-modern .product-category-all { color:var(--ui-red) !important; }

/* ---------- Sort: stable native select ---------- */
body.site-modern .modern-sort-box { margin:0 0 20px !important; padding:14px 16px !important; overflow:visible !important; border:1px solid var(--ui-line); border-radius:17px; background:#fff; box-shadow:0 9px 26px rgba(29,38,83,.05); }
body.site-modern .modern-sort-control { display:flex; align-items:center; justify-content:flex-end; gap:12px; width:100%; }
body.site-modern .modern-sort-control > label { margin:0 !important; color:#657087; font-size:13px !important; font-weight:750 !important; white-space:nowrap; }
body.site-modern .modern-sort-select-wrap { position:relative; width:190px; max-width:100%; }
body.site-modern .modern-sort-select-wrap .select--field { display:block !important; float:none !important; width:100% !important; min-width:0 !important; height:46px !important; margin:0 !important; padding:0 14px !important; border:1px solid #e2e6ef !important; border-radius:13px !important; background:#fff !important; color:#273152 !important; -webkit-text-fill-color:#273152 !important; font-size:14px !important; font-weight:600; line-height:normal !important; opacity:1 !important; }
body.site-modern .modern-sort-select-wrap .select--field:focus { border-color:var(--ui-primary) !important; box-shadow:0 0 0 3px rgba(52,70,168,.10) !important; }
@media (max-width:575px) {
  body.site-modern .modern-sort-control { justify-content:stretch; }
  body.site-modern .modern-sort-select-wrap { flex:1 1 auto; width:auto; min-width:0; }
}

/* ---------- Product/featured images + hover ---------- */
body.site-modern .box-product-item .block-product--image img { display:block !important; width:100% !important; height:100% !important; object-fit:contain !important; transition:transform .35s ease !important; }
body.site-modern .box-product-item:hover .block-product--image img { transform:scale(1.055) !important; }
body.site-modern .block-feature-item { display:grid !important; grid-template-columns:84px minmax(0,1fr) !important; gap:12px !important; align-items:center !important; width:100%; padding:13px 15px !important; overflow:hidden !important; border-top:1px solid #edf0f5; }
body.site-modern .block-feature-item .block-feature--image { float:none !important; width:84px !important; max-width:84px !important; margin:0 !important; }
body.site-modern .block-feature-item .block-feature--image a { display:flex; align-items:center; justify-content:center; width:84px; height:84px; overflow:hidden; border-radius:12px; background:#f5f7fb; }
body.site-modern .block-feature-item .block-feature--image img { width:100% !important; height:100% !important; padding:5px; object-fit:contain !important; }
body.site-modern .block-feature-item .block-feature--content { min-width:0; }

/* ---------- Quick cart ---------- */
body.site-modern .mini-cart-trigger { display:inline-flex; align-items:center; justify-content:center; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
body.site-modern .mini-cart-trigger:focus { outline:none; }
body.site-modern .box-cart .block-minicart:hover .box-cart-hidden { visibility:visible; opacity:1; }
@media (max-width:991px) {
    body.site-modern .mobile-cart .block-minicart:hover .box-cart-hidden { visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
    body.site-modern .mobile-cart .block-minicart.mini-cart-open .box-cart-hidden,
    body.site-modern .mobile-cart .block-minicart.mini-cart-open:hover .box-cart-hidden { visibility:visible !important; opacity:1 !important; pointer-events:auto !important; transform:translateY(0) !important; }
    body.site-modern .mobile-cart .block-minicart .box-cart-hidden {
        position:fixed !important; top:68px !important; right:10px !important; left:10px !important; z-index:1500 !important;
        width:auto !important; min-width:0 !important; max-width:none !important; max-height:calc(100dvh - 82px) !important;
        margin:0 !important; padding:14px !important; overflow-x:hidden !important; overflow-y:auto !important;
        visibility:hidden; opacity:0; pointer-events:none; transform:translateY(-7px); border:1px solid #e2e7ef !important;
        border-radius:18px !important; background:#fff !important; box-shadow:0 22px 60px rgba(13,22,52,.24) !important;
        transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important;
    }
    body.site-modern .mobile-cart .block-minicart .box-cart-hidden::before { display:none !important; }
    body.site-modern .mobile-cart .block-cart-hidden-list { max-height:45dvh !important; margin:0 0 12px !important; padding:0 !important; overflow-y:auto !important; }
    body.site-modern .mobile-cart .cart-item { display:grid !important; grid-template-columns:68px minmax(0,1fr) 34px !important; gap:10px !important; align-items:start !important; padding:0 0 12px !important; margin:0 0 12px !important; overflow:visible !important; }
    body.site-modern .mobile-cart .cart--image, body.site-modern .mobile-cart .cart--content, body.site-modern .mobile-cart .cart--button { float:none !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; }
    body.site-modern .mobile-cart .cart--image img { width:68px !important; height:76px !important; object-fit:cover !important; border-radius:10px; }
    body.site-modern .mobile-cart .product--title { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35 !important; }
    body.site-modern .mobile-cart .block-cart-hidden--total { display:flex !important; justify-content:space-between !important; align-items:center; gap:10px; padding:10px 0 !important; }
    body.site-modern .mobile-cart .block-cart-hidden--total .total--price { float:none !important; margin:0 !important; }
    body.site-modern .mobile-cart .block-cart-hidden--button { display:grid !important; grid-template-columns:1fr 1fr; gap:9px; }
    body.site-modern .mobile-cart .block-cart-hidden--button .btn { display:flex !important; align-items:center; justify-content:center; min-height:44px; margin:0 !important; padding:8px 10px !important; white-space:normal !important; line-height:1.25 !important; }
    body.site-modern .mini-cart-empty { display:flex; align-items:center; justify-content:center; gap:9px; min-height:80px; color:#647087; }
}
@media (max-width:460px) { body.site-modern .mobile-cart .block-cart-hidden--button { grid-template-columns:1fr; } }

/* Header quick-cart button supports <button>, not only <a>. */
@media (max-width:991px) {
    body.site-modern .mobile-header-actions .box-cart .block-minicart > .mini-cart-trigger { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:38px !important; height:38px !important; margin:0 !important; padding:0 !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:12px !important; background:rgba(255,255,255,.09) !important; }
    body.site-modern .mobile-header-actions .box-cart .block-minicart > .mini-cart-trigger img { width:22px !important; height:22px !important; filter:brightness(0) invert(1); }
}
@media (min-width:992px) {
    body.site-modern .header-actions .box-cart .block-minicart > .mini-cart-trigger { width:50px; height:50px; border:1px solid #e1e5ee; border-radius:16px; background:linear-gradient(145deg,#fff,#f4f6fb); box-shadow:var(--ui-shadow-sm); transition:transform .2s ease,box-shadow .2s ease; }
    body.site-modern .header-actions .box-cart .block-minicart > .mini-cart-trigger:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(34,36,99,.13); }
    body.site-modern .header-actions .box-cart .block-minicart > .mini-cart-trigger img { width:25px; height:25px; }
}

/* Final cart information hierarchy: products first, one action per purpose. */
body.site-modern .modern-cart-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.site-modern .modern-cart-toolbar .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

body.site-modern .modern-cart-update {
    background: linear-gradient(135deg, #3446a8, #222463) !important;
    color: #fff !important;
}

body.site-modern .modern-cart-summary .block--title,
body.site-modern .modern-cart-products-col > .block--title {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
}

body.site-modern .modern-cart-summary .block--title .main--title,
body.site-modern .modern-cart-products-col > .block--title .main--title {
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 0 12px !important;
    overflow: visible !important;
    text-align: left !important;
    white-space: normal !important;
}

@media (max-width: 991px) {
    body.site-modern .modern-cart-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    body.site-modern .modern-cart-products-col {
        order: 1 !important;
    }

    body.site-modern .modern-cart-summary-col {
        order: 2 !important;
        margin-top: 22px;
    }

    body.site-modern .modern-cart-summary {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 575px) {
    body.site-modern .modern-cart-page {
        padding-top: 24px !important;
    }

    body.site-modern .modern-cart-page > .container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    body.site-modern .modern-cart-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    body.site-modern .modern-cart-toolbar .btn {
        width: 100% !important;
        min-height: 46px;
    }

    body.site-modern .modern-cart-summary .block--title .main--title,
    body.site-modern .modern-cart-products-col > .block--title .main--title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    body.site-modern .modern-cart-summary .block-wapper-cart-bill--button .btn {
        min-height: 50px !important;
    }
}

/* ---------- Cart page: one layout, no horizontal scrolling ---------- */
body.site-modern .modern-cart-page { overflow:hidden; }
body.site-modern .modern-cart-products-col, body.site-modern .modern-cart-summary-col { min-width:0; }
body.site-modern .modern-cart-head { display:grid; grid-template-columns:minmax(0,1.8fr) .65fr .78fr .75fr; gap:16px; padding:0 16px 10px; color:#747d91; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
body.site-modern .modern-cart-list { display:flex; flex-direction:column; gap:13px; }
body.site-modern .modern-cart-item { display:grid; grid-template-columns:minmax(0,1.8fr) .65fr .78fr .75fr; gap:16px; align-items:center; padding:16px; border:1px solid #e6eaf2; border-radius:18px; background:#fff; box-shadow:0 10px 26px rgba(29,38,83,.055); }
body.site-modern .modern-cart-item:hover { transform:translateY(-3px); box-shadow:0 17px 34px rgba(29,38,83,.09); }
body.site-modern .modern-cart-product { display:grid; grid-template-columns:88px minmax(0,1fr); gap:13px; align-items:center; min-width:0; }
body.site-modern .modern-cart-image { display:block; width:88px; height:92px; overflow:hidden; border:1px solid #e7ebf2; border-radius:13px; background:#f7f8fb; }
body.site-modern .modern-cart-image img { width:100%; height:100%; object-fit:cover; }
body.site-modern .modern-cart-product-copy { min-width:0; }
body.site-modern .modern-cart-product-copy h3 { margin:0 0 8px !important; line-height:1.35 !important; }
body.site-modern .modern-cart-product-copy h3 a { color:var(--ui-primary); font-size:14px; font-weight:800; }
body.site-modern .modern-cart-remove { color:var(--ui-red) !important; font-size:12px; }
body.site-modern .modern-cart-field { min-width:0; }
body.site-modern .modern-cart-label { display:none; }
body.site-modern .modern-cart-field strong { color:var(--ui-red); font-size:15px; font-weight:850; }
body.site-modern .modern-qty-control { display:flex !important; flex-wrap:nowrap !important; width:126px !important; height:42px !important; overflow:hidden; border:1px solid #dfe4ed; border-radius:999px; background:#fff; }
body.site-modern .modern-qty-control .input-group-btn { display:flex; flex:0 0 38px; }
body.site-modern .modern-qty-control .btn { width:38px; height:40px; padding:0; border:0; background:#f7f8fb; color:var(--ui-primary); font-size:18px; font-weight:800; }
body.site-modern .modern-qty-control .qty { flex:1 1 auto; width:50px !important; min-width:0; height:40px; padding:0 3px; border:0; text-align:center; color:#273152; font-weight:750; }
body.site-modern .modern-cart-summary { position:sticky; top:20px; border:1px solid #e5e9f2; border-radius:20px; background:linear-gradient(145deg,#fff,#f7f8fc) !important; box-shadow:0 14px 34px rgba(29,38,83,.08); }
body.site-modern .modern-cart-summary .block-wapper-cart-bill--total { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; }
body.site-modern .modern-cart-summary .block-wapper-cart-bill--total .title,
body.site-modern .modern-cart-summary .block-wapper-cart-bill--total .price { float:none !important; line-height:1.4 !important; }
body.site-modern .modern-cart-summary .block-wapper-cart-bill--button { display:grid; gap:9px; }
body.site-modern .modern-cart-summary .block-wapper-cart-bill--button .btn { width:100% !important; margin:0 !important; white-space:normal; }
body.site-modern .modern-cart-continue { margin-top:16px; }

@media (max-width:991px) {
  body.site-modern .modern-cart-summary { position:static; margin-bottom:22px; }
}
@media (max-width:767px) {
  body.site-modern .modern-cart-head { display:none; }
  body.site-modern .modern-cart-list { gap:14px; }
  body.site-modern .modern-cart-item { display:grid; grid-template-columns:86px minmax(0,1fr); gap:0 13px; padding:14px; overflow:hidden; }
  body.site-modern .modern-cart-product { display:contents; }
  body.site-modern .modern-cart-image { grid-column:1; grid-row:1; width:86px; height:96px; align-self:start; }
  body.site-modern .modern-cart-product-copy { grid-column:2; grid-row:1; min-width:0; padding-top:2px; }
  body.site-modern .modern-cart-field { grid-column:1 / -1; display:grid; grid-template-columns:minmax(84px,.7fr) minmax(0,1fr); align-items:center; gap:12px; min-height:54px; padding:11px 0; border-top:1px dashed #e7ebf2; }
  body.site-modern .modern-cart-price { margin-top:13px; }
  body.site-modern .modern-cart-label { display:block; color:#687188; font-size:11px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
  body.site-modern .modern-cart-field strong { justify-self:end; text-align:right; }
  body.site-modern .modern-qty-control { justify-self:end; }
  body.site-modern .modern-cart-continue .btn { display:flex; align-items:center; justify-content:center; width:100% !important; min-height:46px; white-space:normal; text-align:center; }
}
@media (max-width:390px) {
  body.site-modern .modern-cart-item { grid-template-columns:74px minmax(0,1fr); gap:0 10px; padding:12px; }
  body.site-modern .modern-cart-image { width:74px; height:84px; }
  body.site-modern .modern-qty-control { width:118px !important; }
}

/* ==========================================================
   V8.1 CART ALIGNMENT + CONTACT-PRICE BEHAVIOR
   ========================================================== */

/* Mobile/tablet: icon tài khoản và giỏ hàng cùng kích thước, cùng baseline. */
@media (max-width: 991px) {
    body.site-modern .mobile-header-actions,
    body.site-modern .wsmobileheader .mobile-header-actions.callusbtn {
        right: 10px !important;
        gap: 7px !important;
        height: 58px !important;
    }

    body.site-modern .mobile-header-actions > .block-header--account,
    body.site-modern .mobile-header-actions > .box-cart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }

    body.site-modern .mobile-header-actions .account-trigger,
    body.site-modern .mobile-header-actions .box-cart .block-minicart > .mini-cart-trigger {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.09) !important;
        color: #fff !important;
        box-shadow: none !important;

        line-height: 1 !important;
        transform: none !important;
    }

    body.site-modern .mobile-header-actions .account-trigger i,
    body.site-modern .mobile-header-actions .box-cart .mini-cart-trigger i {
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 21px !important;
        line-height: 1 !important;
    }

    body.site-modern .mobile-header-actions .box-cart .block-minicart {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }

    body.site-modern .mobile-header-actions .box-cart .block-minicart .count-item {
        top: -7px !important;
        right: -6px !important;
        z-index: 4 !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 5px !important;
        border: 2px solid #fff !important;
        font-size: 11px !important;
        line-height: 18px !important;
        text-align: center !important;
    }

    body.site-modern .wsmobileheader .smllogo {
        padding-right: 118px !important;
    }
}

/* Desktop/laptop: đồng bộ icon người và giỏ hàng. */
@media (min-width: 992px) {
    body.site-modern .header-actions .account-trigger,
    body.site-modern .header-actions .box-cart .block-minicart > .mini-cart-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        height: 50px !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    body.site-modern .header-actions .account-trigger i,
    body.site-modern .header-actions .box-cart .mini-cart-trigger i {
        margin: 0 !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }
}

/* CTA "Liên hệ" cho sản phẩm không có giá. */
body.site-modern .btn--contact-product {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-decoration: none !important;
    white-space: normal;

    background: linear-gradient(135deg, #173f83, #2f3b97) !important;
    border-color: transparent !important;
    color: #fff !important;

    box-shadow: 0 10px 24px rgba(32, 54, 137, .18);
}

body.site-modern .btn--contact-product:hover,
body.site-modern .btn--contact-product:focus {
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(32, 54, 137, .26);
}

body.site-modern .price-contact,
body.site-modern .product--price-contact,
body.site-modern .cart-contact-value {
    color: #e60023 !important;
    font-weight: 800 !important;
}

/* Trang chi tiết: sản phẩm giá Liên hệ không hiện số lượng. */
body.site-modern .single-product-contact-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 18px 0;
    padding: 14px 16px;

    border: 1px solid rgba(47,59,151,.12);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(47,59,151,.06), rgba(18,158,195,.06));

    color: #37405d;
    font-size: 14px;
    line-height: 1.55;
}

body.site-modern .single-product-contact-note > i {
    margin-top: 3px;
    color: #2f3b97;
    font-size: 19px;
}

body.site-modern .single-product-contact-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
}

body.site-modern .single-product-contact-actions .btn {
    min-width: 0;
    margin: 0 !important;
}

@media (min-width:992px) and (max-width:1199px) {
    body.site-modern .single-product-contact-actions { flex-wrap:nowrap; }
    body.site-modern .single-product-contact-actions .btn {
        flex:1 1 0 !important;
        width:0 !important;
        min-width:0 !important;
        padding:10px 6px !important;
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        gap:5px;
        overflow:hidden;
        font-size:12px !important;
        line-height:1.2 !important;
        white-space:nowrap !important;
    }
    body.site-modern .single-product-contact-actions .btn i { flex:0 0 auto; margin:0; }
}

body.site-modern .btn--contact-buy {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

/* Giỏ hàng cũ còn sản phẩm 0đ: hiển thị rõ "Liên hệ". */
body.site-modern .modern-cart-item-contact {
    border-color: rgba(230,0,35,.13) !important;
}

@media (max-width: 575px) {
    body.site-modern .box-single-product .block-single-product--content .single-product--hometext {
        padding: 14px 12px;
    }

    body.site-modern .block-single-product--tabs .nav-tabs {
        overflow-x: hidden;
        padding-right: 6px;
        padding-left: 6px;
    }

    body.site-modern .block-single-product--tabs .nav-tabs .nav-item {
        flex: 1 1 50%;
        min-width: 0;
        text-align: center;
    }

    body.site-modern .block-single-product--tabs .nav-tabs .nav-link {
        width: 100%;
        padding: 11px 1px;
        font-size: 11px !important;
        line-height: 1.3;
        letter-spacing: -0.2px;
        white-space: nowrap;
    }

    body.site-modern .single-product-contact-actions {
        flex-direction: column;
    }

    body.site-modern .single-product-contact-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Featured carousel: 3 cards on tablet, one wide card on phone. */
@media (min-width: 576px) and (max-width: 991px) {
    body.site-modern .shop-featured-column .block-feature-item {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        min-height: 360px;
        margin: 0 8px !important;
        padding: 0 0 18px !important;
        border: 1px solid var(--ui-line) !important;
        border-radius: 18px;
        background: #fff;
    }

    body.site-modern .shop-featured-column .block-feature--image {
        width: 100% !important;
        max-width: none !important;
    }

    body.site-modern .shop-featured-column .block-feature--image a {
        width: 100% !important;
        height: 220px !important;
        border-radius: 17px 17px 0 0;
    }

    body.site-modern .shop-featured-column .block-feature--content {
        width: 100%;
        padding: 16px 18px 0;
    }
}

@media (max-width: 575px) {
    body.site-modern .product-grid-row > .product__div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    body.site-modern .product-grid-row .box-product-item .block-product--image img {
        height: 240px;
        object-fit: contain;
    }

    body.site-modern .shop-featured-column {
        padding-right: 14px;
        padding-left: 14px;
    }

    body.site-modern .shop-featured-carousel-section {
        padding: 18px 16px 22px;
        overflow: visible;
        background: #fff;
    }

    body.site-modern .shop-featured-carousel-section .block-wapper--title h3 {
        margin-bottom: 16px;
        font-size: 23px;
        line-height: 1.25;
    }

    body.site-modern .shop-featured-column .block-feature-list {
        margin: 0 !important;
        border-radius: 20px;
    }

    body.site-modern .shop-featured-column .block-feature-item {
        display: flex !important;
        flex-direction: column;
        min-height: 390px;
        margin: 0 !important;
        padding: 0 0 20px !important;
        border: 1px solid var(--ui-line) !important;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 10px 26px rgba(23,31,56,.09);
    }

    body.site-modern .shop-featured-column .block-feature--image {
        width: 100% !important;
        max-width: none !important;
    }

    body.site-modern .shop-featured-column .block-feature--image a {
        width: 100% !important;
        height: 245px !important;
        border-radius: 17px 17px 0 0;
        background: #f5f7fb;
    }

    body.site-modern .shop-featured-column .block-feature--image img {
        padding: 12px;
        object-fit: contain !important;
    }

    body.site-modern .shop-featured-column .block-feature--content {
        width: 100%;
        padding: 18px 20px 0;
    }

    body.site-modern .shop-featured-column .block-feature--title h3,
    body.site-modern .shop-featured-column .block-feature--title a {
        font-size: 16px !important;
        font-weight: 700;
        line-height: 1.4 !important;
    }

    body.site-modern .shop-featured-column .block-feature--price {
        margin-top: 12px;
        font-size: 17px;
    }

    body.site-modern .shop-featured-column .slick-prev,
    body.site-modern .shop-featured-column .slick-next {
        width: 38px;
        height: 38px;
        border: 2px solid #fff;
        background: linear-gradient(135deg, #3446a8, #222463);
        box-shadow: 0 9px 22px rgba(34,36,99,.28);
    }

    body.site-modern .shop-featured-column .slick-prev {
        left: -8px;
    }

    body.site-modern .shop-featured-column .slick-next {
        right: -8px;
    }

    body.site-modern .shop-featured-column .slick-prev::before,
    body.site-modern .shop-featured-column .slick-next::before {
        display: none;
    }

    body.site-modern .shop-featured-column .slick-prev i,
    body.site-modern .shop-featured-column .slick-next i {
        color: #fff;
        font-size: 16px;
    }
}

/* Carousel nổi bật: ảnh phủ đúng bề ngang card trên tablet/laptop. */
@media (min-width: 576px) {
    body.site-modern .shop-featured-carousel-section .block-feature-item .block-feature--image {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body.site-modern .shop-featured-carousel-section .block-feature-item .block-feature--image a {
        display: flex;
        width: 100% !important;
        height: 230px !important;
        padding: 12px;
        border-radius: 17px 17px 0 0;
        background: #f5f7fb;
    }

    body.site-modern .shop-featured-carousel-section .block-feature-item .block-feature--image img {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        object-fit: contain !important;
    }
}

/* Dùng thanh điều hướng thay cho nút mũi tên. */
body.site-modern .shop-featured-carousel-section .slick-arrow {
    display: none !important;
}

body.site-modern .shop-featured-carousel-section .slick-dots {
    position: static;
    display: flex !important;
    width: min(420px, 82%);
    height: 7px;
    margin: 18px auto 0;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e3e7f0;
}

body.site-modern .shop-featured-carousel-section .slick-dots li {
    flex: 1 1 0;
    width: auto;
    height: 7px;
    margin: 0;
}

body.site-modern .shop-featured-carousel-section .slick-dots li button {
    width: 100%;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
}

body.site-modern .shop-featured-carousel-section .slick-dots li button::before {
    display: none;
}

body.site-modern .shop-featured-carousel-section .slick-dots li.slick-active button {
    background: linear-gradient(90deg, var(--ui-primary-2), var(--ui-primary));
    box-shadow: 0 2px 8px rgba(34,36,99,.25);
}

/* Đặt nút chuyển ở rãnh riêng hai bên, không phủ lên card/ảnh. */
body.site-modern .shop-featured-carousel-section .block-feature-list.slick-slider {
    position: relative;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    overflow: visible;
}

body.site-modern .shop-featured-carousel-section {
    overflow: visible;
}

body.site-modern .shop-featured-carousel-section .slick-arrow {
    position: absolute;
    top: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, #3446a8, #222463);
    color: #fff;
    box-shadow: 0 9px 22px rgba(34,36,99,.28);
    transform: translateY(-50%);
}

body.site-modern .shop-featured-carousel-section .slick-prev {
    left: -48px;
}

body.site-modern .shop-featured-carousel-section .slick-next {
    right: -48px;
}

body.site-modern .shop-featured-carousel-section .slick-arrow::before {
    display: none;
}

body.site-modern .shop-featured-carousel-section .slick-arrow i {
    color: #fff;
    font-size: 15px;
}

body.site-modern .shop-featured-carousel-section .slick-arrow.slick-disabled {
    opacity: .35;
    cursor: default;
}

@media (max-width: 575px) {
    body.site-modern .shop-featured-carousel-section {
        padding-right: 46px;
        padding-left: 46px;
    }

    body.site-modern .shop-featured-carousel-section .block-feature-list.slick-slider {
        padding-right: 0;
        padding-left: 0;
    }

    body.site-modern .shop-featured-carousel-section .slick-arrow {
        width: 36px;
        height: 36px;
    }

    body.site-modern .shop-featured-carousel-section .slick-prev {
        left: -40px;
    }

    body.site-modern .shop-featured-carousel-section .slick-next {
        right: -40px;
    }
}

/* Final featured-card overrides kept last so legacy product rules cannot resize them. */
body.site-modern .shop-featured-carousel-section .featured-products-related-style {
    margin: 0;
    padding: 0;
    background: transparent;
}

body.site-modern .shop-featured-carousel-section .featured-products-related-style .box-product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 480px;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e1e6ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(26, 42, 84, .08);
}

body.site-modern .shop-featured-carousel-section .featured-products-related-style .block-product--image {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 8px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f4f6fa;
}

body.site-modern .shop-featured-carousel-section .featured-products-related-style .block-product--image > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

body.site-modern .shop-featured-carousel-section .featured-products-related-style .block-product--image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    object-fit: contain !important;
}

body.site-modern .shop-featured-carousel-section .featured-products-related-style .block-product--content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 22px 22px;
}

body.site-modern .shop-featured-carousel-section .featured-products-related-style .block-product--title h3 {
    min-height: 52px;
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.45;
}

body.site-modern .shop-featured-carousel-section .featured-products-related-style .block-product--rating {
    margin-top: auto;
    margin-bottom: 14px;
    color: #ff9d13;
    font-size: 17px;
}

body.site-modern .shop-featured-carousel-section .featured-products-related-style .block-product--price .price--sale {
    color: #ee132d;
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 575px) {
    body.site-modern .shop-featured-carousel-section .featured-products-related-style .box-product-item {
        min-height: 0;
    }

    body.site-modern .shop-featured-carousel-section .featured-products-related-style .block-product--content {
        padding: 18px 16px 20px;
    }
}

/* Keep this final override after all legacy banner breakpoints. */
@media (max-width: 767px) {
    body.site-modern .home-hero-section .block-banner--slider .imgslideshow,
    body.site-modern .home-hero-section .block-banner--slider .slick-active .imgslideshow {
        width: 100%;
        height: auto !important;
        object-fit: contain;
        transform: none !important;
    }
}

/* News pages: featured stories placed after the primary news content. */
body.site-modern .news-featured-bottom {
    clear: both;
    width: 100%;
    padding: 34px 0 12px;
}

body.site-modern .news-featured-section {
    width: 100%;
    padding: 28px;
    border: 1px solid #e1e6ef;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(26, 42, 84, .08);
}

body.site-modern .news-featured-heading {
    position: relative;
    margin-bottom: 26px;
    text-align: center;
}

body.site-modern .news-featured-heading::before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: #ef233c;
    content: "";
}

body.site-modern .news-featured-heading h2 {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 0;
    padding: 0 18px 10px;
    background: #fff;
    color: #202365;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.2;
}

body.site-modern .news-featured-heading h2::after {
    position: absolute;
    bottom: 0;
    left: 18px;
    width: 78px;
    height: 5px;
    border-radius: 10px;
    background: linear-gradient(90deg, #ed1c35 0 58%, #f7b733 58% 100%);
    content: "";
}

body.site-modern .news-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

body.site-modern .news-featured-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #e2e7f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(29, 42, 83, .08);
    height: 100%;
}

body.site-modern .news-featured-card[hidden] {
    display: none !important;
}

body.site-modern .news-featured-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f2f5fa;
}

body.site-modern .news-featured-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .35s ease;
}

body.site-modern .news-featured-card:hover .news-featured-image img {
    transform: scale(1.035);
}

body.site-modern .news-featured-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 20px 20px;
}

body.site-modern .news-featured-date {
    margin-bottom: 9px;
    color: #7b8495;
    font-size: 13px;
}

body.site-modern .news-featured-content h3 {
    min-height: 52px;
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.42;
}

body.site-modern .news-featured-content h3 a {
    display: -webkit-box;
    overflow: hidden;
    color: #172052;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.site-modern .news-featured-content p {
    display: -webkit-box;
    margin: 0 0 16px;
    overflow: hidden;
    color: #697386;
    font-size: 14px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 45px;
}

body.site-modern .news-featured-more {
    margin-top: auto;
    color: #27338f;
    font-size: 14px;
    font-weight: 700;
}

body.site-modern .news-featured-card.is-page-entering {
    animation: newsFeaturedPageIn .42s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes newsFeaturedPageIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.site-modern .news-featured-pagination {
    display: flex;
    margin-top: 26px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.site-modern .news-featured-pagination[hidden] {
    display: none !important;
}

body.site-modern .news-page-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce2ed;
    border-radius: 50%;
    background: #fff;
    color: #202365;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(31, 40, 101, .08);
    cursor: pointer;
}

body.site-modern .news-page-button:hover,
body.site-modern .news-page-button.is-active {
    border-color: #293696;
    background: linear-gradient(135deg, #3446a8, #222463);
    color: #fff;
}

body.site-modern .news-page-button:disabled {
    opacity: .38;
    cursor: default;
}

@media (max-width: 991px) {
    body.site-modern .news-featured-bottom {
        padding-top: 26px;
    }

    body.site-modern .news-featured-section {
        max-width: 720px;
        margin: 0 auto;
        padding: 22px;
        border-radius: 20px;
    }

    body.site-modern .news-featured-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.site-modern .news-featured-content h3 {
        font-size: 19px;
    }
}

@media (max-width: 575px) {
    body.site-modern .news-featured-bottom {
        padding-top: 20px;
    }

    body.site-modern .news-featured-section {
        padding: 16px;
        border-radius: 18px;
    }

    body.site-modern .news-featured-heading {
        margin-bottom: 18px;
    }

    body.site-modern .news-featured-heading h2 {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 24px;
    }

    body.site-modern .news-featured-heading h2::after {
        left: 10px;
    }

    body.site-modern .news-featured-content {
        padding: 16px;
    }

    body.site-modern .news-featured-content h3 {
        min-height: 48px;
        font-size: 17px;
    }

    body.site-modern .news-featured-content p {
        min-height: 44px;
    }

    body.site-modern .news-page-button {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.site-modern .news-featured-card.is-page-entering {
        animation: none;
    }
}

/* Article text on tablet/mobile: compact typography and safe right edge. */
@media (max-width: 991px) {
    body.site-modern .box-single-post .block-single-post--content {
        width: 100%;
        max-width: 100%;
        margin: 14px 0;
        padding: 18px 16px 0;
        overflow-x: hidden;
        box-sizing: border-box;
        font-size: 15px !important;
        line-height: 1.65;
    }

    body.site-modern .box-single-post .block-single-post--content *,
    body.site-modern .box-single-post .block-single-post--content p,
    body.site-modern .box-single-post .block-single-post--content li,
    body.site-modern .box-single-post .block-single-post--content span,
    body.site-modern .box-single-post .block-single-post--content strong {
        max-width: 100% !important;
        box-sizing: border-box;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    body.site-modern .box-single-post .block-single-post--content ul,
    body.site-modern .box-single-post .block-single-post--content ol {
        width: 100% !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        padding-left: 22px !important;
    }

    body.site-modern .box-single-post .block-single-post--content li {
        width: 100%;
        margin-right: 0;
        padding-right: 2px;
    }

    body.site-modern .box-single-post .block-single-post--content h2,
    body.site-modern .box-single-post .block-single-post--content h3,
    body.site-modern .box-single-post .block-single-post--content h4 {
        font-size: 17px !important;
        line-height: 1.5 !important;
    }

    body.site-modern .box-single-post .block-single-post--content pre,
    body.site-modern .box-single-post .block-single-post--content table {
        max-width: 100% !important;
        overflow-x: auto;
        white-space: pre-wrap !important;
    }
}

@media (max-width: 575px) {
    body.site-modern .box-single-post .block-single-post--content {
        padding-right: 13px;
        padding-left: 13px;
        font-size: 14px !important;
    }

    body.site-modern .box-single-post .block-single-post--content *,
    body.site-modern .box-single-post .block-single-post--content p,
    body.site-modern .box-single-post .block-single-post--content li,
    body.site-modern .box-single-post .block-single-post--content span,
    body.site-modern .box-single-post .block-single-post--content strong {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    body.site-modern .box-single-post .block-single-post--content h2,
    body.site-modern .box-single-post .block-single-post--content h3,
    body.site-modern .box-single-post .block-single-post--content h4 {
        font-size: 16px !important;
    }
}

/* Final product-featured shell override after every legacy carousel rule. */
body.site-modern .shop-featured-column.shop-featured-carousel-section {
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.site-modern .shop-featured-column.shop-featured-carousel-section .product-featured-section {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

/* Desktop cascading navigation: hover a label to reveal its child menu. */
@media (min-width: 992px) {
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu {
        top: 100%;
        min-width: 290px;
        padding: 8px 0;
        overflow: visible;
        border: 1px solid #e2e7ef;
        border-radius: 0 0 14px 14px;
        background: #fff;
        box-shadow: 0 18px 42px rgba(17, 28, 67, .18);
    }

    body.site-modern .wsmenu ul.sub-menu li {
        position: relative;
    }

    body.site-modern .wsmenu ul.sub-menu li + li {
        border-top: 1px solid #edf0f5;
    }

    body.site-modern .wsmenu ul.sub-menu li > a {
        display: flex;
        min-height: 46px;
        padding: 11px 15px !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        background: #fff;
        color: #313952 !important;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.45;
        white-space: normal;
        transition: padding-left .2s ease, color .2s ease, background .2s ease;
    }

    body.site-modern .wsmenu ul.sub-menu li:hover > a,
    body.site-modern .wsmenu ul.sub-menu li:focus-within > a {
        padding-left: 20px !important;
        background: linear-gradient(90deg, #f3f6ff, #fff);
        color: #da0018 !important;
    }

    body.site-modern .wsmenu .menu-child-arrow {
        flex: 0 0 auto;
        margin: 0;
        color: #929bad;
        font-size: 11px;
        transition: color .2s ease, transform .2s ease;
    }

    body.site-modern .wsmenu li:hover > a .menu-child-arrow,
    body.site-modern .wsmenu li:focus-within > a .menu-child-arrow {
        color: #da0018;
        transform: translateX(3px);
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu li > ul.sub-menu {
        top: -9px;
        left: calc(100% + 7px);
        min-width: 280px;
        max-height: min(70vh, 560px);
        margin: 0;
        padding: 8px 0;
        overflow-x: visible;
        overflow-y: auto;
        border: 1px solid #e2e7ef;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 18px 42px rgba(17, 28, 67, .18);
        opacity: 0;
        visibility: hidden;
        transform: translateX(10px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu li > ul.sub-menu::before {
        position: absolute;
        top: 0;
        right: 100%;
        width: 8px;
        height: 100%;
        content: "";
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu li:hover > ul.sub-menu,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu li:focus-within > ul.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

/* Tablet product toolbar: aligned controls and animated category popover.
   Kept last so legacy responsive rules cannot override its geometry. */
@media (min-width: 768px) and (max-width: 1199px) {
    body.site-modern .shop-results-column .modern-sort-box {
        display: grid !important;
        grid-template-columns: minmax(300px, 1fr) minmax(290px, 360px);
        align-items: center !important;
        gap: 24px !important;
        min-height: 82px;
        padding: 14px 18px !important;
    }

    body.site-modern .shop-category-compact {
        width: 100%;
    }

    body.site-modern .shop-category-compact-toggle {
        height: 52px;
        padding: 0 18px;
        border-color: #d8dfed;
        background: linear-gradient(135deg, #f8faff, #f2f5fb);
        box-shadow: 0 5px 14px rgba(34,36,99,.04);
    }

    body.site-modern .shop-category-compact-toggle:hover {
        border-color: rgba(52,70,168,.35);
        background: #fff;
        box-shadow: 0 8px 20px rgba(34,36,99,.09);
    }

    body.site-modern .shop-category-compact.is-open .shop-category-compact-toggle {
        border-color: rgba(52,70,168,.38);
        background: #fff;
        box-shadow: 0 8px 20px rgba(34,36,99,.10);
    }

    body.site-modern .shop-category-compact-dropdown {
        display: block;
        width: 100%;
        max-height: min(62vh, 520px);
        box-sizing: border-box;
        padding: 10px;
        overflow-x: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px) scale(.985);
        transform-origin: top left;
        transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    }

    body.site-modern .shop-category-compact.is-open .shop-category-compact-dropdown {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    body.site-modern .shop-category-compact .product-category-tree {
        width: 100%;
        box-sizing: border-box;
        padding: 0 !important;
    }

    body.site-modern .shop-category-compact .product-category-details summary,
    body.site-modern .shop-category-compact .product-category-direct {
        min-height: 50px;
        padding: 9px 12px !important;
    }

    body.site-modern .shop-category-compact .product-category-submenu {
        padding: 4px 7px 8px;
    }

    body.site-modern .shop-results-column .modern-sort-control {
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
    }
}

/* Mobile gallery: four equal tiles in a compact 2 × 2 grid.
   This final override stays after every legacy gallery breakpoint. */
@media (max-width: 575px) {
    body.site-modern .home-gallery-section {
        padding: 34px 0 28px;
    }

    body.site-modern .home-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(135px, 39vw, 190px);
        gap: 10px;
    }

    body.site-modern .home-gallery-card,
    body.site-modern .home-gallery-card-featured,
    body.site-modern .home-gallery-card.is-featured {
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        min-height: 0;
        height: 100%;
        border-radius: 15px;
    }

    body.site-modern .home-gallery-caption {
        right: 10px;
        bottom: 10px;
        left: 11px;
        gap: 7px;
        font-size: 11px;
        line-height: 1.35;
    }

    body.site-modern .home-gallery-caption > span {
        display: -webkit-box;
        min-width: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.site-modern .home-gallery-caption i {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        padding-top: 8px;
        font-size: 11px;
    }

    body.site-modern .home-gallery-overlay {
        background: linear-gradient(to top, rgba(17,23,55,.78), rgba(17,23,55,0) 68%);
    }
}

/* Final desktop navigation state: overrides the legacy effect stylesheet. */
@media (min-width: 992px) {
    body.site-modern .site-header,
    body.site-modern .box-header,
    body.site-modern .box-header .block-header-bottom,
    body.site-modern .box-header .box-menu,
    body.site-modern .box-header .wsmainwp,
    body.site-modern .box-header .wsmenu {
        overflow: visible !important;
    }

    body.site-modern .site-header,
    body.site-modern .box-header .block-header-bottom {
        z-index: 2100 !important;
    }

    /* Keep search suggestions and the account panel above the blue nav bar. */
    body.site-modern .box-header .block-header-center {
        position: relative !important;
        z-index: 2300 !important;
        overflow: visible !important;
    }

    body.site-modern .box-header .block-header-center .container,
    body.site-modern .box-header .header-main-row,
    body.site-modern .header-search-col,
    body.site-modern .header-actions-col,
    body.site-modern .header-actions,
    body.site-modern .header-actions > ul {
        overflow: visible !important;
    }

    body.site-modern .box-header .block-header-bottom {
        position: relative !important;
        z-index: 2200 !important;
        display: block !important;
        height: auto !important;
    }

    body.site-modern .desktop-account {
        z-index: 2400 !important;
    }

    body.site-modern .desktop-account .sub-account,
    body.site-modern .box-search-result {
        z-index: 2500 !important;
    }

    body.site-modern .header-search-col,
    body.site-modern .header-search-col form,
    body.site-modern .box-search {
        position: relative;
        z-index: 1;
    }

    body.site-modern .box-search .form-control {
        min-width: 0 !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu {
        display: block !important;
        width: 380px !important;
        min-width: 380px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(12px) !important;
        transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li:hover > ul.sub-menu,
    body.site-modern .wsmenu > .wsmenu-list > li:focus-within > ul.sub-menu,
    body.site-modern .wsmenu > .wsmenu-list > li.is-desktop-menu-open > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children > ul.sub-menu {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(12px) scale(.985) !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:hover > ul.sub-menu,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:focus-within > ul.sub-menu,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children.is-desktop-menu-open > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) scale(1) !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 30px;
        min-height: 56px;
        padding: 10px 12px 10px 18px !important;
        align-items: center;
        gap: 12px;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a > span {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap !important;
        text-overflow: ellipsis;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a > .menu-child-arrow {
        display: inline-flex;
        width: 30px;
        height: 30px;
        margin: 0 !important;
        align-items: center;
        justify-content: center;
        border: 1px solid #e3e8f2;
        border-radius: 9px;
        color: #7e899f;
        background: #f3f6fb;
        font-size: 11px;
        transform: none;
        transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:hover > a > .menu-child-arrow,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children:focus-within > a > .menu-child-arrow,
    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children.is-desktop-menu-open > a > .menu-child-arrow {
        border-color: rgba(218,0,24,.18);
        color: #fff;
        background: var(--ui-red);
        transform: translateX(2px);
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li:not(.menu-has-children) > a {
        grid-template-columns: minmax(0, 1fr);
        padding-right: 18px !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children > ul.sub-menu {
        left: calc(100% + 8px) !important;
        width: 340px !important;
        min-width: 340px !important;
    }

    body.site-modern .wsmenu > .wsmenu-list > li > ul.sub-menu > li.menu-has-children > ul.sub-menu > li > a {
        display: block !important;
        min-height: 46px;
        padding: 12px 16px !important;
        overflow: hidden;
        white-space: nowrap !important;
        text-overflow: ellipsis;
    }
}

/* Final laptop/desktop gallery layout. */
@media (min-width: 992px) {
    body.site-modern .home-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, clamp(220px, 17vw, 300px)) !important;
        grid-auto-rows: clamp(220px, 17vw, 300px) !important;
        gap: 20px !important;
    }

    body.site-modern .home-gallery-card,
    body.site-modern .home-gallery-card-featured,
    body.site-modern .home-gallery-card.is-featured {
        grid-row: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    body.site-modern .home-gallery-card:nth-child(1) { grid-column: 1 / span 7 !important; }
    body.site-modern .home-gallery-card:nth-child(2) { grid-column: 8 / span 5 !important; }
    body.site-modern .home-gallery-card:nth-child(3) { grid-column: 1 / span 5 !important; }
    body.site-modern .home-gallery-card:nth-child(4) { grid-column: 6 / span 7 !important; }
}

/* Search outline follows the pill shape on every screen size. */
body.site-modern .box-search form {
    overflow: hidden !important;
    border: 1px solid var(--ui-red) !important;
    border-radius: 999px !important;
}

/* Final compact-header alignment. */
@media (max-width: 991px) {
    body.site-modern #wsnavtoggle.wsanimated-arrow {
        top: 7px !important;
        margin: 0 !important;
    }
}

/* Product cards expose both actions without stacking or overlap. */
@media (min-width: 768px) {
    body.site-modern .box-product-item .block-product--image .block-product--button {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
    }

    body.site-modern .box-product-item .block-product--image .block-product--button .btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-width: 0;
        min-height: 40px;
        margin: 0 !important;
        padding: 8px 10px !important;
        border: 0;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 750;
        line-height: 1.25;
        white-space: normal;
    }

    body.site-modern .box-product-item .block-product--image .block-product--button .btn--buy {
        background: linear-gradient(135deg, var(--ui-primary-2), var(--ui-primary));
        color: #fff;
        box-shadow: 0 8px 18px rgba(34, 36, 99, .24);
    }
}

@media (min-width:768px) {
    body.site-modern .box-product-item .block-product--image .block-product--button .btn {
        min-height:42px !important;
        padding:5px 4px !important;
        gap:3px;
        overflow:hidden;
        font-size:9px !important;
        line-height:1.15 !important;
        white-space:normal !important;
        overflow-wrap:break-word;
        text-align:center;
    }

    body.site-modern .box-product-item .block-product--image .block-product--button .btn i {
        flex:0 0 auto;
        margin:0 2px 0 0;
    }
}

/* Account UI is intentionally disabled without removing its markup or logic. */
body.site-modern .block-header--account,
body.site-modern .desktop-account,
body.site-modern .mobile-account {
    display: none !important;
}

/* Mobile/tablet quick cart: stronger product preview and compact quantity. */
@media (max-width: 991px) {
    body.site-modern .mobile-cart .cart-item {
        grid-template-columns: 92px minmax(0, 1fr) 32px !important;
        gap: 13px !important;
    }

    body.site-modern .mobile-cart .cart--image a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 92px;
        height: 92px;
        overflow: hidden;
        border-radius: 12px;
        background: #f7f9fc;
    }

    body.site-modern .mobile-cart .cart--image img {
        width: 92px !important;
        height: 92px !important;
        padding: 5px;
        border-radius: 12px !important;
        object-fit: contain !important;
    }

    body.site-modern .mobile-cart .cart--content h3 {
        margin: 0 0 7px !important;
        line-height: 1.35 !important;
    }

    body.site-modern .mobile-cart .product--title {
        font-size: 16px !important;
        font-weight: 650 !important;
        line-height: 1.4 !important;
    }

    body.site-modern .mobile-cart .product--qualities .input-group {
        width: 64px !important;
        max-width: 64px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 999px !important;
    }

    body.site-modern .mobile-cart .mini-cart-qty {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 5px !important;
        font-size: 13px !important;
        line-height: 32px !important;
    }
}

@media (max-width: 575px) {
    body.site-modern .mobile-cart .cart-item {
        grid-template-columns: 82px minmax(0, 1fr) 30px !important;
        gap: 10px !important;
    }

    body.site-modern .mobile-cart .cart--image a,
    body.site-modern .mobile-cart .cart--image img {
        width: 82px !important;
        height: 82px !important;
    }

    body.site-modern .mobile-cart .product--title {
        font-size: 15px !important;
    }
}

/* Final unified cart overrides; kept last to beat legacy breakpoints. */
body.site-modern .modern-cart-image img { padding:6px; object-fit:contain !important; }
body.site-modern .modern-cart-summary { padding:20px !important; border:1px solid #e3e8f1 !important; background:#fff !important; box-shadow:0 16px 38px rgba(27,36,82,.10) !important; }
body.site-modern .modern-cart-summary .block-wapper-cart-bill--total { margin-bottom:10px; padding:12px 0 16px !important; border-bottom:1px solid #e8ecf3; }
body.site-modern .mobile-cart .block-cart-hidden--button .btn,
body.site-modern .modern-cart-summary .block-wapper-cart-bill--button .btn { min-height:46px !important; margin:0 !important; border:0 !important; border-radius:999px !important; font-size:13px !important; font-weight:800 !important; }
body.site-modern .mobile-cart .block-cart-hidden--button .btn--cart,
body.site-modern .modern-cart-summary button[type="submit"] { background:linear-gradient(135deg,#3446a8,#222463) !important; color:#fff !important; }
body.site-modern .mobile-cart .block-cart-hidden--button .btn--payment,
body.site-modern .modern-cart-summary .btn--hover-color { background:linear-gradient(135deg,#e60023,#ff4355) !important; color:#fff !important; }

@media (min-width:576px) and (max-width:991px) {
    body.site-modern .mobile-cart .block-minicart .box-cart-hidden { top:70px !important; right:14px !important; left:auto !important; width:min(620px,calc(100vw - 28px)) !important; max-width:620px !important; padding:16px !important; border-radius:20px !important; }
    body.site-modern .mobile-cart .block-cart-hidden-list { max-height:310px !important; }
    body.site-modern .mobile-cart .cart-item { grid-template-columns:84px minmax(0,1fr) 30px !important; gap:12px !important; padding-bottom:12px !important; margin-bottom:12px !important; }
    body.site-modern .mobile-cart .cart--image a,
    body.site-modern .mobile-cart .cart--image img { width:84px !important; height:84px !important; object-fit:contain !important; }
    body.site-modern .mobile-cart .product--title { font-size:15px !important; line-height:1.35 !important; }
    body.site-modern .mobile-cart .product--qualities .input-group { width:58px !important; max-width:58px !important; height:31px !important; min-height:31px !important; }
    body.site-modern .mobile-cart .mini-cart-qty { height:29px !important; min-height:29px !important; line-height:29px !important; }
    body.site-modern .modern-cart-summary { width:min(520px,100%); margin-right:0; margin-left:auto; border-radius:20px !important; }
}

@media (max-width:575px) {
    body.site-modern .mobile-cart .block-minicart .box-cart-hidden { right:8px !important; left:8px !important; padding:13px !important; border-radius:18px !important; }
    body.site-modern .mobile-cart .block-cart-hidden--total { margin-top:4px; padding:13px 2px !important; border-top:1px solid #e8ecf3; }
    body.site-modern .modern-cart-summary { padding:17px !important; border-radius:18px !important; }
    body.site-modern .modern-cart-item { border-radius:17px !important; }
    body.site-modern .modern-cart-field { min-height:48px !important; padding:9px 0 !important; }
    body.site-modern .modern-qty-control { width:108px !important; height:38px !important; }
    body.site-modern .modern-qty-control .input-group-btn,
    body.site-modern .modern-qty-control .btn { flex-basis:34px; width:34px !important; height:36px !important; }
    body.site-modern .modern-qty-control .qty { height:36px !important; }
}

@media (min-width:992px) {
    body.site-modern .modern-cart-item { min-height:126px; padding:16px 18px !important; border-color:#e3e8f1 !important; background:#fff !important; }
    body.site-modern .modern-cart-summary { border-radius:20px !important; }
}

/* Cart gutters: prevent Bootstrap's negative row margins from clipping content. */
body.site-modern .modern-cart-page .modern-cart-layout {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body.site-modern .modern-cart-page .modern-cart-products-col,
body.site-modern .modern-cart-page .modern-cart-summary-col {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

@media (min-width: 576px) and (max-width: 991px) {
    body.site-modern .modern-cart-page > .container {
        padding-right: 24px !important;
        padding-left: 24px !important;
    }

    body.site-modern .modern-cart-summary {
        width: min(620px, 100%) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body.site-modern .modern-cart-summary-col {
        padding-top: 4px !important;
    }
}

@media (max-width: 575px) {
    body.site-modern .modern-cart-page > .container {
        width: 100% !important;
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    body.site-modern .modern-cart-products-col > .block--title,
    body.site-modern .modern-cart-summary .block--title {
        padding-left: 2px !important;
    }

    body.site-modern .modern-cart-item,
    body.site-modern .modern-cart-toolbar,
    body.site-modern .modern-cart-summary {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Cart v2 - shared desktop, tablet and mobile design */
body.site-modern .cart-v2-page .modern-cart-page { margin:0; padding:32px 0 58px; background:linear-gradient(135deg,#f7faff 0%,#fff9fa 100%); }
body.site-modern .cart-v2-page * { box-sizing:border-box; }
.cart-v2-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.cart-v2-heading { display:flex; align-items:flex-start; gap:15px; }
.cart-v2-heading-icon { color:#ed1233; font-size:29px; line-height:1; transform:translateY(3px); }
.cart-v2-heading h1 { margin:0; color:#11194d; font-size:29px; font-weight:800; line-height:1.15; text-transform:none; }
.cart-v2-heading p { margin:5px 0 0; color:#7d879c; font-size:12px; }
.cart-v2-header nav { display:flex; gap:8px; color:#8a93a6; font-size:12px; }
.cart-v2-header nav a { color:#8a93a6; }
.cart-v2-header nav strong { color:#192052; }
.cart-v2-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; grid-template-areas:"products summary" "recommended summary"; gap:18px 20px; align-items:start; }
.cart-v2-products,.cart-v2-summary,.cart-v2-card,.cart-v2-empty { background:#fff; border:1px solid #edf0f6; box-shadow:0 12px 32px rgba(22,35,84,.06); }
.cart-v2-products { grid-area:products; overflow:hidden; border-radius:17px; }
.cart-v2-selectbar { min-height:54px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #edf0f5; color:#232b58; font-size:13px; }
.cart-v2-selectbar label { display:flex; align-items:center; gap:7px; margin:0; cursor:pointer; }
.cart-v2-selectbar small { color:#7d879c; }
.cart-v2-page input[type="checkbox"] { width:16px; height:16px; accent-color:#182160; }
.cart-v2-delete-selected { border:0; background:none; color:#ed1233; font-size:12px; cursor:pointer; }
.cart-v2-columns { display:grid; grid-template-columns:minmax(0,1.65fr) .62fr .72fr .68fr; gap:16px; padding:14px 22px 10px 60px; color:#8992a7; font-size:10px; font-weight:800; text-transform:uppercase; }
.cart-v2-item { display:grid; grid-template-columns:22px minmax(0,1.65fr) .62fr .72fr .68fr; align-items:center; gap:16px; margin:0 16px 16px; padding:18px 14px; border:1px solid #f4cfd5; border-radius:15px; }
.cart-v2-checkbox { margin:0; }
.cart-v2-product { min-width:0; display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px; align-items:center; }
.cart-v2-image { height:92px; padding:8px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:#f8fafc; }
.cart-v2-image img { width:100%; height:100%; object-fit:contain; }
.cart-v2-copy { min-width:0; }
.cart-v2-copy h2 { margin:0 0 5px; font-size:14px; font-weight:800; line-height:1.45; }
.cart-v2-copy h2 a { color:#111956; }
.cart-v2-model { display:block; color:#778196; font-size:10px; }
.cart-v2-remove { display:inline-block; margin:9px 0 0; color:#eb1534; font-size:11px; }
.cart-v2-field > span { display:none; }
.cart-v2-field strong { color:#ed0026; font-size:14px; white-space:nowrap; }
.cart-v2-qty { width:108px; height:38px; display:grid; grid-template-columns:36px 36px 36px; align-items:stretch; overflow:hidden; border:1px solid #e4e8f1; border-radius:20px; background:#fff; }
.cart-v2-qty button { position:relative; width:36px !important; height:36px !important; min-width:36px; margin:0 !important; padding:0 !important; display:block !important; border:0 !important; border-radius:0 !important; background:#f6f8fc; color:transparent !important; font-size:0 !important; line-height:0 !important; cursor:pointer; }
.cart-v2-qty button::before { content:""; position:absolute; top:50%; left:50%; width:11px; height:2px; border-radius:2px; background:#13205b; transform:translate(-50%,-50%); }
.cart-v2-qty .cart-v2-plus::after { content:""; position:absolute; top:50%; left:50%; width:2px; height:11px; border-radius:2px; background:#13205b; transform:translate(-50%,-50%); }
.cart-v2-qty input { width:100% !important; min-width:0; height:36px !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0; background:#fff; color:#11184c; font-weight:700; line-height:36px !important; text-align:center !important; text-indent:0 !important; -moz-appearance:textfield; appearance:textfield; }
.cart-v2-qty input::-webkit-inner-spin-button,.cart-v2-qty input::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; appearance:none; }
.cart-v2-updatebar { display:flex; justify-content:flex-end; padding:0 16px 16px; }
.cart-v2-update-cart { min-height:42px; padding:0 22px; border:0; border-radius:22px; background:linear-gradient(100deg,#344bb5,#22256d); color:#fff; font-size:12px; font-weight:800; text-transform:uppercase; cursor:pointer; box-shadow:0 8px 18px rgba(34,37,109,.18); }
.cart-v2-update-cart i { margin-right:7px; }
.cart-v2-update-cart:disabled { cursor:wait; opacity:.65; }
.cart-v2-summary { grid-area:summary; position:sticky; top:20px; padding:22px 20px 18px; border-radius:17px; }
.cart-v2-summary h2,.cart-v2-recommended-head h2 { margin:0; color:#11194d; font-size:20px; font-weight:800; text-transform:none; }
.cart-v2-title-line { display:block; width:52px; height:4px; margin-top:9px; border-radius:4px; background:linear-gradient(90deg,#ed002e,#ffbf35); }
.cart-v2-summary dl { margin:16px 0 0; }
.cart-v2-summary dl div { display:flex; justify-content:space-between; padding:8px 0; color:#748096; font-size:12px; }
.cart-v2-summary dt { font-weight:500; }
.cart-v2-summary dd { margin:0; color:#162052; }
.cart-v2-summary dl div:nth-child(2) dd { color:#ed002b; font-weight:800; }
.cart-v2-summary dl .cart-v2-contact-count dd { color:#ed002b; font-weight:800; }
.cart-v2-total { display:grid; grid-template-columns:1fr auto; align-items:center; margin:7px 0 17px; padding-top:14px; border-top:1px solid #e7eaf1; color:#11173f; font-size:14px; font-weight:800; }
.cart-v2-total strong { color:#ed002b; font-size:20px; }
.cart-v2-total strong em { font-size:13px; font-style:normal; white-space:nowrap; }
.cart-v2-primary,.cart-v2-secondary { min-height:43px; margin-top:9px; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid #ed1233; border-radius:22px; font-size:13px; font-weight:700; }
.cart-v2-primary,.cart-v2-primary:hover { background:linear-gradient(100deg,#eb0027,#ff3852); color:#fff; }
.cart-v2-secondary,.cart-v2-secondary:hover { background:#fff; color:#ed1233; }
.cart-v2-recommended { grid-area:recommended; min-width:0; padding-top:4px; }
.cart-v2-recommended-head { position:relative; z-index:3; min-height:34px; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; background:transparent; }
.cart-v2-recommended-head a { color:#17215c; font-size:11px; }
.cart-v2-recommended-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:12px; }
.cart-v2-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; padding:12px; border-radius:13px; }
.cart-v2-card-image { position:relative !important; width:100%; height:170px !important; min-height:170px !important; max-height:170px !important; flex:0 0 170px !important; display:block !important; overflow:hidden; }
.cart-v2-card-image img { position:absolute !important; inset:0; width:100% !important; height:100% !important; max-height:170px !important; display:block; object-fit:contain !important; }
.cart-v2-card h3 { position:relative !important; z-index:2; width:100%; height:auto; min-height:38px; margin:9px 0 2px; overflow:hidden; background:#fff; font-size:12px; font-weight:800; line-height:1.4; }
.cart-v2-card h3 a { color:#121b53; }
.cart-v2-card-model { display:block; overflow:hidden; color:#7e879a; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.cart-v2-card > strong { display:block; margin:6px 0; margin-top:auto; color:#ed002b; font-size:13px; }
.cart-v2-card button { width:100%; min-width:0; min-height:35px; margin:0; padding:0 6px !important; display:flex; align-items:center; justify-content:center; gap:5px; overflow:hidden; border:1px solid #e1e6f0; border-radius:18px; background:#f9fbff; color:#15205b; font-size:9px; font-weight:700; line-height:1.2; white-space:nowrap; letter-spacing:-.1px; cursor:pointer; }
.cart-v2-card button i { flex:0 0 auto; margin:0; }
.cart-v2-empty { padding:70px 20px; border-radius:18px; text-align:center; }
.cart-v2-empty > i { color:#ed1233; font-size:50px; }.cart-v2-empty h2 { margin:18px 0 8px; color:#11194d; }.cart-v2-empty p { color:#7d879c; }.cart-v2-empty a { display:inline-flex; margin-top:12px; padding:12px 22px; border-radius:24px; background:#202b79; color:#fff; font-weight:700; }

@media (max-width:991px) {
    body.site-modern .cart-v2-page .modern-cart-page { padding:24px 0 44px; }
    .cart-v2-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"products" "summary" "recommended"; gap:16px; }
    .cart-v2-summary { position:static; width:100%; }
}

@media (min-width:768px) and (max-width:991px) {
    .cart-v2-recommended-grid { align-items:stretch; }
    .cart-v2-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; }
    .cart-v2-card-image { position:relative; width:100%; height:165px; min-height:165px; flex:0 0 165px; display:flex; overflow:hidden; }
    .cart-v2-card-image img { position:static; width:100%; height:100%; display:block; object-fit:contain; }
    .cart-v2-card h3 { position:static; width:100%; height:auto; min-height:42px; margin:10px 0 3px; overflow:hidden; font-size:12px; line-height:1.4; }
    .cart-v2-card-model { width:100%; }
    .cart-v2-card > strong { margin-top:auto; }
}

@media (max-width:767px) {
    body.site-modern .cart-v2-page .modern-cart-page { padding:18px 0 38px; background:#fff; }
    body.site-modern .cart-v2-page .container { width:100%; padding-right:15px !important; padding-left:15px !important; }
    .cart-v2-header { margin-bottom:16px; }.cart-v2-header nav { display:none; }.cart-v2-heading-icon { font-size:22px; }.cart-v2-heading h1 { font-size:22px; }.cart-v2-heading p { font-size:10px; }
    .cart-v2-products { overflow:visible; border:0; background:transparent; box-shadow:none; }
    .cart-v2-selectbar { min-height:48px; margin-bottom:10px; padding:0 12px; border:1px solid #edf0f6; border-radius:12px; background:#fff; box-shadow:0 8px 22px rgba(22,35,84,.05); font-size:11px; }
    .cart-v2-delete-selected { font-size:10px; }.cart-v2-delete-selected i { margin-right:2px; }.cart-v2-columns { display:none; }
    .cart-v2-item { grid-template-columns:20px minmax(0,1fr); gap:8px 10px; margin:0 0 10px; padding:13px; background:#fff; }
    .cart-v2-checkbox { align-self:start; padding-top:8px; }
    .cart-v2-product { grid-column:2; grid-template-columns:78px minmax(0,1fr); gap:10px; }
    .cart-v2-image { height:78px; padding:6px; }.cart-v2-copy h2 { font-size:11px; line-height:1.35; }.cart-v2-model { font-size:8px; }.cart-v2-remove { margin:6px 0 0; font-size:9px; }
    .cart-v2-field { grid-column:1 / -1; min-height:45px; display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px dashed #e6eaf1; }
    .cart-v2-field > span { display:block; color:#778197; font-size:10px; font-weight:800; text-transform:uppercase; }.cart-v2-field strong { font-size:13px; }
    .cart-v2-qty { width:102px; height:36px; grid-template-columns:34px 34px 34px; }
    .cart-v2-qty button { width:34px !important; height:34px !important; min-width:34px; }
    .cart-v2-qty input { height:34px !important; line-height:34px !important; }
    .cart-v2-updatebar { padding:2px 0 0; }
    .cart-v2-update-cart { width:100%; min-height:44px; }
    .cart-v2-summary { padding:18px 15px 15px; }.cart-v2-summary h2,.cart-v2-recommended-head h2 { font-size:17px; }.cart-v2-total strong { font-size:18px; }
    .cart-v2-primary,.cart-v2-secondary { min-height:42px; }
    .cart-v2-recommended { padding:4px 0 0; background:#fff; }
    .cart-v2-recommended-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 10px)/2); grid-template-columns:none; gap:10px; overflow-x:auto; padding:2px 0 10px; scroll-snap-type:x mandatory; }
    .cart-v2-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; padding:9px; scroll-snap-align:start; }
    .cart-v2-card-image { position:relative !important; width:100%; height:140px !important; min-height:140px !important; max-height:140px !important; flex:0 0 140px !important; display:block !important; overflow:hidden; }
    .cart-v2-card-image img { position:absolute !important; inset:0; width:100% !important; height:100% !important; max-height:140px !important; display:block; object-fit:contain !important; }
    .cart-v2-card h3 { position:relative !important; z-index:1; width:100%; height:auto; min-height:42px; margin:9px 0 3px; overflow:hidden; background:#fff; font-size:11px; line-height:1.35; }
    .cart-v2-card-model { width:100%; }
    .cart-v2-card > strong { margin-top:auto; }
    .cart-v2-card button { font-size:9px; }
}

/* Checkout v2 */
body.site-modern .checkout-v2 .box-warpper { margin:0; padding:34px 0 60px; background:linear-gradient(135deg,#f6f9ff 0%,#fff8fa 100%); }
body.site-modern .checkout-v2 * { box-sizing:border-box; }
.checkout-v2-page-heading { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.checkout-v2-page-heading > span { width:48px; height:48px; display:flex; flex:0 0 48px; align-items:center; justify-content:center; border-radius:15px; background:linear-gradient(135deg,#ed002c,#ff4058); color:#fff; font-size:20px; box-shadow:0 10px 24px rgba(237,0,44,.2); }
.checkout-v2-page-heading h2 { margin:0 !important; padding:0 !important; border:0 !important; color:#11194f !important; font-size:29px !important; font-weight:800; line-height:1.15; text-transform:none !important; }
.checkout-v2-page-heading p { margin:5px 0 0; color:#7c879d; font-size:12px; }
.checkout-v2-layout { margin-right:-10px; margin-left:-10px; align-items:flex-start; }
.checkout-v2-left,.checkout-v2-right { padding-right:10px; padding-left:10px; }
.checkout-v2 .checkout-warpper,.checkout-v2 .block-totalcart { padding:24px !important; border:1px solid #e7ebf3 !important; border-radius:20px; background:#fff !important; box-shadow:0 16px 38px rgba(25,35,82,.08); }
.checkout-v2 .checkout-warpper > h3.title,.checkout-v2 .block-totalcart > h3.title { position:relative; margin:0 0 20px !important; padding:0 0 13px 31px !important; border-bottom:1px solid #e9edf4 !important; color:#121b56 !important; font-size:18px !important; font-weight:800 !important; line-height:1.35; text-transform:none !important; }
.checkout-v2 .checkout-warpper > h3.title::before,.checkout-v2 .block-totalcart > h3.title::before { content:""; position:absolute; top:5px; left:2px; width:10px; height:10px; border:3px solid #ed1234; border-width:3px 3px 0 0; transform:rotate(45deg); }
.checkout-v2 .box-address-on-checkout { overflow:hidden; margin-bottom:22px; padding:18px; border:1px solid #e5eaf2; border-radius:15px; background:#fbfcff; }
.checkout-v2 .box-address-on-checkout h4 { margin:0 0 14px; color:#17205a; font-size:14px; font-weight:800; }
.checkout-v2 .address-list { margin:0 0 12px; padding:0; list-style:none; }
.checkout-v2 .address-container { margin-bottom:9px; }
.checkout-v2 .address-option { width:100%; margin:0; display:flex; gap:11px; align-items:flex-start; cursor:pointer; }
.checkout-v2 .address-option input { margin-top:6px; accent-color:#23358f; }
.checkout-v2 .box-address { flex:1; padding:12px 14px; border:1px solid #e4e9f2; border-radius:12px; background:#fff; }
.checkout-v2 .box-address p { margin:2px 0; color:#727d93; font-size:12px; }
.checkout-v2 .box-address .username { color:#141d56; font-size:13px; font-weight:800; }
.checkout-v2 .view-all-address { gap:8px; flex-wrap:wrap !important; }
.checkout-v2 .view-all-address .btn { min-height:40px; margin:0 !important; padding:8px 16px; border:0; border-radius:20px; font-size:11px; font-weight:800; text-transform:uppercase; }
.checkout-v2 #btn-address-add { background:linear-gradient(135deg,#14a9bf,#238ea9); color:#fff; }
.checkout-v2 .form-group { margin-bottom:17px; }
.checkout-v2 .form-group > label { margin-bottom:7px; color:#25305d; font-size:12px; font-weight:700; }
.checkout-v2 .form-control { min-height:48px; padding:10px 14px; border:1px solid #dde3ed; border-radius:12px; background:#fafbfe; color:#172052; font-size:13px; box-shadow:none; }
.checkout-v2 textarea.form-control { min-height:130px; resize:vertical; }
.checkout-v2 .form-control:focus { border-color:#384bb0; background:#fff; box-shadow:0 0 0 3px rgba(56,75,176,.1); }
.checkout-v2 .required { color:#e9002d; }
.checkout-v2 .checkout-warpper > hr { display:none; }
.checkout-v2-right .block-totalcart { position:sticky; top:20px; }
.checkout-v2 .block-totalcart table { width:100%; margin:0; border-collapse:collapse; }
.checkout-v2 .block-totalcart th,.checkout-v2 .block-totalcart td { padding:13px 8px !important; border-color:#e8ecf3 !important; color:#172052; font-size:12px; vertical-align:top; }
.checkout-v2 .block-totalcart thead th { color:#7b8599; font-size:10px; font-weight:800; text-transform:uppercase; }
.checkout-v2 .block-totalcart th:last-child,.checkout-v2 .block-totalcart td:last-child { width:38%; text-align:right; }
.checkout-v2 .cart-item-checkout .name-product-checkout { line-height:1.5; }
.checkout-v2 .cart-item-checkout .name-product-checkout strong { color:#ed002c; white-space:nowrap; }
.checkout-v2 .cart-item-checkout td:last-child,.checkout-v2 .cart-subtotal td,.checkout-v2 .order-total td { color:#ed002c; font-weight:800; }
.checkout-v2 .order-total th,.checkout-v2 .order-total td { padding-top:17px !important; border-top:2px solid #dfe4ed !important; font-size:15px !important; }
.checkout-v2 .box-payment { margin-top:18px; font-weight:400; }
.checkout-v2 .box-payment h4 { margin:0 0 10px; color:#121b56; font-size:14px; font-weight:800; }
.checkout-v2 .box-payment ul { margin:0; padding:0; }
.checkout-v2 .box-payment ul li { margin:0 0 9px !important; padding:0 !important; border:0 !important; }
.checkout-v2 .box-payment input[type="radio"] { position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.checkout-v2 .box-payment label { width:100%; min-height:48px; margin:0; padding:11px 13px !important; display:flex; align-items:center; gap:10px; border:1px solid #e1e6ef; border-radius:12px; background:#fafbfe; color:#182157 !important; cursor:pointer; }
.checkout-v2 .payment-radio-ui { position:relative; width:18px; height:18px; flex:0 0 18px; border:2px solid #aab3c6; border-radius:50%; background:#fff; }
.checkout-v2 .box-payment input:checked + label { border-color:#3448ad; background:#f4f6ff; }
.checkout-v2 .box-payment input:checked + label .payment-radio-ui { border-color:#3448ad; }
.checkout-v2 .box-payment input:checked + label .payment-radio-ui::after { content:""; position:absolute; inset:3px; border-radius:50%; background:#3448ad; }
.checkout-v2 .box-payment label strong { font-size:12px; font-weight:700; }
.checkout-v2 .box-payment .block-content { margin:-3px 8px 10px; padding:10px 12px; border-radius:0 0 10px 10px; background:#f8f9fc; color:#727d92; font-size:10px; line-height:1.5; }
.checkout-v2 .box-payment .block-content:empty { display:none; }
.checkout-v2 .place-order { margin-top:18px; }
.checkout-v2 .place-order .btn { width:100%; min-height:48px; border:0; border-radius:24px; background:linear-gradient(100deg,#344bb5,#22256d); color:#fff; font-size:13px; font-weight:800; box-shadow:0 10px 22px rgba(34,37,109,.2); }

@media (max-width:991px) {
    body.site-modern .checkout-v2 .box-warpper { padding:24px 0 46px; }
    .checkout-v2-left,.checkout-v2-right { flex:0 0 100% !important; width:100% !important; max-width:100% !important; }
    .checkout-v2-right { margin-top:17px; }
    .checkout-v2-right .block-totalcart { position:static; }
}

@media (max-width:575px) {
    body.site-modern .checkout-v2 .box-warpper { padding:18px 0 36px; }
    body.site-modern .checkout-v2 .container { width:100%; padding-right:14px !important; padding-left:14px !important; }
    .checkout-v2-page-heading > span { width:42px; height:42px; flex-basis:42px; border-radius:13px; font-size:17px; }
    .checkout-v2-page-heading h2 { font-size:23px !important; }.checkout-v2-page-heading p { font-size:10px; }
    .checkout-v2 .checkout-warpper,.checkout-v2 .block-totalcart { padding:16px !important; border-radius:17px; }
    .checkout-v2 .checkout-warpper > h3.title,.checkout-v2 .block-totalcart > h3.title { padding-left:27px !important; font-size:16px !important; }
    .checkout-v2 .box-address-on-checkout { padding:13px; }
    .checkout-v2 .checkout-warpper .row > [class*="col-"] { flex:0 0 100%; max-width:100%; }
    .checkout-v2 .block-totalcart th,.checkout-v2 .block-totalcart td { padding-right:4px !important; padding-left:4px !important; }
}

/* Checkout summary: compact card layout while retaining the original content. */
.checkout-v2 .block-totalcart { padding:20px !important; }
.checkout-v2 .block-totalcart > h3.title { margin-bottom:12px !important; padding-bottom:12px !important; }
.checkout-v2 .block-totalcart table { table-layout:fixed; }
.checkout-v2 .block-totalcart thead th { padding-top:8px !important; padding-bottom:10px !important; }
.checkout-v2 .block-totalcart tbody td { padding-top:12px !important; padding-bottom:12px !important; }
.checkout-v2 .block-totalcart tfoot th,.checkout-v2 .block-totalcart tfoot td { padding-top:11px !important; padding-bottom:11px !important; }
.checkout-v2 .block-totalcart .order-total th,.checkout-v2 .block-totalcart .order-total td { padding-top:15px !important; padding-bottom:15px !important; }
.checkout-v2 .box-payment { margin-top:16px; padding-top:0; }
.checkout-v2 .box-payment h4 { margin-bottom:10px; font-size:14px; }
.checkout-v2 .box-payment ul { display:grid; gap:9px; }
.checkout-v2 .box-payment ul li { overflow:hidden; margin:0 !important; border-radius:12px; background:transparent; }
.checkout-v2 .box-payment label { min-height:52px; padding:10px 13px !important; border-radius:12px; background:#fafbfe; box-shadow:none; }
.checkout-v2 .box-payment input:checked + label { border-color:#3b50c2; background:#f5f6ff; box-shadow:0 0 0 1px rgba(59,80,194,.03); }
.checkout-v2 .box-payment .block-content { margin:0; padding:10px 13px; border-radius:0 0 12px 12px; }
.checkout-v2 .place-order { margin-top:16px; }
.checkout-v2 .place-order .btn { min-height:50px; background:linear-gradient(100deg,#ed002c,#ff4058); box-shadow:0 10px 22px rgba(237,0,44,.18); }

@media (min-width:992px) {
    .checkout-v2-right .block-totalcart { max-width:440px; margin-left:auto; }
}

@media (max-width:575px) {
    .checkout-v2 .block-totalcart { padding:15px !important; }
    .checkout-v2 .block-totalcart > h3.title { margin-bottom:8px !important; }
    .checkout-v2 .block-totalcart th,.checkout-v2 .block-totalcart td { font-size:11px; }
    .checkout-v2 .box-payment label { min-height:48px; }
    .checkout-v2 .place-order .btn { min-height:48px; }
}

/* Checkout order products */
.checkout-v2-order-head { position:relative; min-height:42px; margin-bottom:12px; padding:0 0 12px 31px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-bottom:1px solid #e9edf4; }
.checkout-v2-order-head::before { content:""; position:absolute; top:5px; left:2px; width:10px; height:10px; border:3px solid #ed1234; border-width:3px 3px 0 0; transform:rotate(45deg); }
.checkout-v2-order-head h3.title { margin:0 !important; padding:0 !important; border:0 !important; color:#121b56 !important; font-size:18px !important; font-weight:800 !important; line-height:1.35; text-transform:none !important; }
.checkout-v2-order-head h3.title::before,.checkout-v2-order-head h3.title::after { content:none !important; display:none !important; }
.checkout-v2-order-head a { padding-top:4px; color:#263b9b; font-size:10px; font-weight:700; white-space:nowrap; }
.checkout-v2-order-head a i { margin-right:4px; }
.checkout-v2 .block-totalcart table th.product-name { width:62%; text-align:left; }
.checkout-v2 .block-totalcart table th.product-quantity { width:16%; text-align:center; }
.checkout-v2 .block-totalcart table th.product-total { width:22%; text-align:right; }
.checkout-v2 .block-totalcart table .quantity-product-checkout { width:16%; color:#121b56; text-align:center; vertical-align:middle; }
.checkout-v2 .checkout-v2-product { min-width:0; display:grid; grid-template-columns:62px minmax(0,1fr); gap:10px; align-items:center; }
.checkout-v2 .checkout-v2-product > a { width:62px; height:62px; padding:5px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #e8ecf3; border-radius:10px; background:#fafbfe; }
.checkout-v2 .checkout-v2-product img { width:100%; height:100%; display:block; object-fit:contain; }
.checkout-v2 .checkout-v2-product div { min-width:0; }
.checkout-v2 .checkout-v2-product div > strong { display:block; overflow:hidden; color:#111952; font-size:11px; line-height:1.4; }
.checkout-v2 .checkout-v2-product div > span { display:block; margin-top:3px; overflow:hidden; color:#7f899c; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.checkout-v2 .cart-item-checkout > td:last-child { width:22%; text-align:right; vertical-align:middle; white-space:nowrap; }
.checkout-v2 .block-totalcart tfoot th[colspan="2"] { text-align:left; }

@media (max-width:575px) {
    .checkout-v2-order-head { min-height:38px; padding-left:25px; }
    .checkout-v2-order-head h3.title { font-size:15px !important; }
    .checkout-v2-order-head a { font-size:8px; }
    .checkout-v2 .block-totalcart table th.product-name { width:60%; }
    .checkout-v2 .block-totalcart table th.product-quantity { width:17%; }
    .checkout-v2 .block-totalcart table th.product-total { width:23%; }
    .checkout-v2 .checkout-v2-product { grid-template-columns:52px minmax(0,1fr); gap:7px; }
    .checkout-v2 .checkout-v2-product > a { width:52px; height:52px; padding:4px; }
    .checkout-v2 .checkout-v2-product div > strong { font-size:9px; }
    .checkout-v2 .checkout-v2-product div > span { font-size:8px; }
}