:root {
    --primary-color: #16527f;
    --fs-color-primary: #16527f;
    --fs-color-secondary: #F8992B;
    --fs-color-success: #7a9c59;
    --fs-color-alert: #b20000;
    --heading-color: #16527f;
    --text-color: #777;
    --color-regular-price: #F8992B;
    --color-mbws-border: rgba(0, 0, 0, .105);
}

@font-face {
    font-display: block;
    font-family: "fl-icons";
    src: url("../../wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2?v=3.19.14") format("woff2"),
         url("../../wp-content/themes/flatsome/assets/css/icons/fl-icons.woff?v=3.19.14") format("woff");
}

html { background-color: #f4f8fb; }
body { color: #777; font-family: Roboto, sans-serif; font-size: 16px; }
h1, h2, h3, h4, h5, h6, .heading-font,
.pd-title,
.pd-section-title,
.pd-cooking-title,
.pd-inquiry-title,
.cooking-main-title,
.cooking-card-title,
.pcard-title,
.sp-hero-title,
.sp-title,
.sp-card-title,
.sp-post-title,
.sp-cta-title,
.ftr-title,
.granola-title,
.product-title,
.section-title { color: #16527f; font-family: 'Phudu', cursive, sans-serif; font-weight: 700; }
.container, .row, .container-width { max-width: 1250px; }
.header-main { height: 90px; }
#logo { width: 180px; }
#logo img { max-height: 90px; padding: 5px 0; width: auto; }
.header-bg-color { background-color: #fff; }
.header-main .nav > li > a { color: #333; line-height: 70px; }
.header:not(.transparent) { position: relative; }
.header:not(.transparent) .header-main { background: #fff; box-shadow: 0 1px 7px rgba(0, 0, 0, .08); }
.header:not(.transparent) .header-nav-main.nav > li > a:hover,
.header-nav-main.nav > li.active > a { color: #F8992B; }
.header.transparent .header-main { height: 90px; }
.header.transparent + #main > :first-child { margin-top: 0; }
/* Header Dropdown Menu Styling */
#header .nav-dropdown,
.header .nav-dropdown {
    min-width: 260px;
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-top: 8px !important;
}

.header .nav-dropdown li.menu-item { margin-bottom: 3px; }
.header .nav-dropdown li.menu-item:last-child { margin-bottom: 0; }

.header .nav-dropdown li a.dropdown-item-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.dropdown-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff8f0;
    color: #F8992B;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dropdown-item-icon svg {
    display: block !important;
    margin: 0 auto !important;
    flex-shrink: 0;
}

.dropdown-item-text {
    flex-grow: 1;
    color: #334155;
    transition: color 0.2s ease;
}

/* Hover state using brand accent orange #F8992B */
.header .nav-dropdown li a.dropdown-item-link:hover,
.header .nav-dropdown li.active a.dropdown-item-link {
    background: #fff8f0 !important;
}

.header .nav-dropdown li a.dropdown-item-link:hover .dropdown-item-text,
.header .nav-dropdown li.active a.dropdown-item-link .dropdown-item-text {
    color: #F8992B !important;
    font-weight: 600 !important;
}

.header .nav-dropdown li a.dropdown-item-link:hover .dropdown-item-icon,
.header .nav-dropdown li.active a.dropdown-item-link .dropdown-item-icon {
    background: #F8992B !important;
    color: #ffffff !important;
}

.header .nav-dropdown li a.dropdown-item-link:hover .dropdown-item-icon svg,
.header .nav-dropdown li.active a.dropdown-item-link .dropdown-item-icon svg {
    color: #ffffff !important;
    fill: currentColor;
}

/* Modern Minimalist Order Inquiry Form */
.storefront-modern-inquiry {
    margin-top: 25px;
    padding: 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}

.inquiry-header h3 {
    margin-top: 0;
    margin-bottom: 4px;
    color: #16527f;
    font-size: 19px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inquiry-subtext {
    color: #64748b;
    font-size: 13.5px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* 2-Column Grid Layout */
.inquiry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) {
    .inquiry-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Floating Label Group */
.floating-group {
    position: relative;
    margin-bottom: 18px;
}

.floating-input {
    width: 100% !important;
    height: 48px !important;
    padding: 14px 14px 12px 14px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

.floating-textarea {
    height: auto !important;
    min-height: 85px !important;
    padding-top: 14px !important;
    resize: vertical;
}

/* Input Focus & Active states */
.floating-input:focus {
    background: #ffffff !important;
    border-color: rgba(248, 153, 43, 0.6) !important;
    box-shadow: none !important;
}

.floating-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13.5px;
    font-weight: 400;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
    margin: 0;
    line-height: 1;
    background: transparent;
    padding: 0 4px;
    border-radius: 4px;
    z-index: 2;
}

.floating-textarea ~ .floating-label {
    top: 20px;
    transform: none;
}

/* Floating behavior when focused or has text: label floats up to sit on top border line */
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label,
.peer:focus ~ label,
.peer:not(:placeholder-shown) ~ label {
    top: -6px !important;
    transform: translateY(0) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #F8992B !important;
    background: #ffffff !important;
    padding: 0 4px !important;
    z-index: 5 !important;
}

.floating-input:not(:focus):not(:placeholder-shown) ~ .floating-label,
.peer:not(:focus):not(:placeholder-shown) ~ label {
    color: #64748b !important;
    background: #ffffff !important;
}

/* Inline Error Message Below Input */
.floating-group .error-msg {
    display: none;
    font-size: 11.5px;
    color: #ef4444;
    margin-top: 4px;
    margin-left: 2px;
}

.floating-group.has-error .floating-input {
    border-color: #ef4444 !important;
    background: #fff5f5 !important;
}

.floating-group.has-error .error-msg {
    display: block;
}

/* Solid Modern Button */
.btn-solid-modern {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 24px !important;
    background: #F8992B !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    cursor: pointer;
    box-shadow: none !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.btn-solid-modern:hover {
    background: #e0841b !important;
    transform: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

.btn-solid-modern:active {
    transform: translateY(0);
}

.btn-solid-modern.is-loading {
    opacity: 0.8;
    pointer-events: none;
}

/* Spinner for loading state */
.btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
    display: inline-block;
}

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* Custom Badge Ribbon Button Style matching user screenshot */
.btn-custom-badge-action {
    display: inline-flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: 0 !important;
    background: #F8992B !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(248, 153, 43, 0.25);
    cursor: pointer;
    transition: all 0.2s ease-in-out !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.btn-custom-badge-action:hover {
    background: #e0841b !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(248, 153, 43, 0.35);
    color: #ffffff !important;
}

.btn-badge-icon {
    position: relative;
    background: #ffffff;
    color: #F8992B;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    z-index: 1;
}

.btn-badge-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 8px solid #ffffff;
    z-index: 2;
}

.btn-badge-text {
    display: flex;
    align-items: center;
    padding: 12px 20px 12px 22px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-transform: uppercase;
}
.header .nav-dropdown li a { line-height: 1.35 !important; padding: 12px 18px; text-transform: none; }
button.storefront-menu-toggle { background: transparent; border: 0; box-shadow: none; color: #333; margin: 0; padding: 10px; }

#main { min-height: 320px; }
.storefront-notice { background: #fff; border-left: 4px solid currentColor; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin: 16px auto; max-width: 1210px; padding: 14px 18px; position: relative; z-index: 20; }
.storefront-notice ul { margin: 7px 0 0 20px; }
.slider .is-selected [data-animate] { filter: none !important; opacity: 1 !important; transform: none !important; }

.storefront-footer-section { background-color: #f4f8fb; padding: 80px 0 22px; position: relative; }
.storefront-footer-section .ux-shape-divider--top svg { height: 50px; width: 100%; }
.storefront-footer-section .ux-shape-fill { fill: #fff; }
.storefront-footer-row { align-items: flex-start; }
.storefront-footer-logo { display: block; margin-bottom: 14px; max-width: 220px; width: 44%; }
.storefront-footer-section p { margin-bottom: 12px; }
.storefront-footer-section p i { color: #d26e4b; margin-right: 8px; width: 16px; }
.storefront-footer-section .section-title-main { border-bottom: 2px solid rgba(0,0,0,.08); display: block; margin: 8px 0 14px; padding-bottom: 8px; text-transform: uppercase; }
.storefront-footer-section .ux-menu-link__link { border-bottom: 1px solid rgba(0,0,0,.06); display: block; padding: 8px 0; }
#footer .absolute-footer { background: #f4f8fb; border-top: 1px solid var(--color-mbws-border); }

.storefront-mobile-menu { background: #fff; bottom: 0; left: 0; max-width: 330px; overflow-y: auto; padding: 60px 24px 30px; position: fixed; top: 0; transform: translateX(-105%); transition: transform .25s ease; width: 88%; z-index: 1002; }
.storefront-mobile-menu .nav > li { display: block; width: 100%; }
.storefront-mobile-menu .nav > li > a { color: #16527f; display: block; padding: 13px 4px; }
.storefront-menu-close { background: transparent; border: 0; box-shadow: none; color: #555; font-size: 34px; height: 44px; margin: 0; padding: 0; position: absolute; right: 16px; top: 12px; width: 44px; }
.storefront-menu-overlay { background: rgba(0,0,0,.5); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .25s ease; z-index: 1001; }
body.storefront-menu-open { overflow: hidden; }
body.storefront-menu-open .storefront-mobile-menu { transform: translateX(0); }
body.storefront-menu-open .storefront-menu-overlay { opacity: 1; pointer-events: auto; }

.storefront-shop-title-bg { background-image: url('../../wp-content/uploads/2025/08/sweet-bakery-page-title.jpg'); background-position: center; background-size: cover; }
.shop-page-title.featured-title { min-height: 260px; position: relative; }
.shop-page-title.featured-title .title-overlay { background: rgba(12, 53, 84, .3); }
.shop-page-title.featured-title .page-title-inner { min-height: 260px; position: relative; z-index: 2; }
.shop-page-title.featured-title h1, .shop-page-title.featured-title .breadcrumbs, .shop-page-title.featured-title a { color: #fff; }
.storefront-shop-categories { align-items: center; bottom: 18px; display: flex; gap: 24px; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); z-index: 3; }
.storefront-shop-categories a { align-items: center; display: flex; gap: 9px; min-width: 120px; text-transform: uppercase; }
.storefront-shop-categories img { filter: brightness(0) invert(1); height: 36px; object-fit: contain; width: 36px; }
.storefront-shop-categories span { display: flex; flex-direction: column; }
.storefront-shop-categories strong { color: #fff; font-size: 12px; }
.storefront-shop-categories small { color: rgba(255,255,255,.75); font-size: 9px; }
.category-page-title { padding: 25px 0 10px; }
.category-page-row { padding-bottom: 55px; }
.widget_product_categories li.current-cat > a { color: #F8992B; font-weight: 700; }
.woocommerce-shop .product-small .box-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.storefront-card-cart { display: inline-flex; margin: 0; }
.storefront-card-cart button { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; }
.storefront-pagination { margin: 25px 0; }
.storefront-pagination .pagination { display: flex; gap: 5px; justify-content: center; list-style: none; }
.storefront-pagination .page-link { border: 1px solid #ddd; display: block; min-width: 38px; padding: 7px 10px; text-align: center; }
.storefront-pagination .active .page-link { background: #16527f; border-color: #16527f; color: #fff; }

.product-main { padding: 55px 0 25px; }
.storefront-product-gallery { background: #fafafa; overflow: hidden; }
.storefront-product-gallery img { display: block; max-height: 680px; object-fit: cover; width: 100%; }
.storefront-product-thumbnails { display: flex; gap: 10px; margin-top: 12px; }
.storefront-thumb { background: #fff; border: 2px solid transparent; box-shadow: none; height: 78px; margin: 0; overflow: hidden; padding: 0; width: 78px; }
.storefront-thumb.active { border-color: #F8992B; }
.storefront-thumb img { height: 100%; object-fit: cover; width: 100%; }
.product-info .variations { margin: 20px 0; }
.product-info .variations select { margin-bottom: 0; }
.product-info form.cart { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 12px; }
.product-info .quantity { display: inline-flex; margin: 0; }
.product-info .quantity .button { margin: 0; }
.product-info .quantity input.qty { margin: 0; }
.storefront-buy-now { margin-bottom: 20px; }
.storefront-buy-now .button { margin-bottom: 0; }
.product_meta > span { display: block; margin-bottom: 6px; }
.product-footer { padding-bottom: 55px; }
.woocommerce-tabs .panel { padding: 24px 0; }

.normal-title { background: #f4f8fb; padding: 34px 0; }
.normal-title .entry-title { margin-bottom: 8px; }
.blog-wrapper { padding: 55px 0; }
.storefront-blog-image { padding-top: 68%; position: relative; }
.storefront-blog-image img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.single-post .entry-image img { display: block; margin: 25px auto; max-height: 650px; object-fit: cover; width: 100%; }
.single-post .entry-content { font-size: 16px; line-height: 1.75; }

.cart-container, .checkout-container { padding-bottom: 60px; padding-top: 45px; }
.cart_item .product-name img { height: 80px; margin-right: 12px; object-fit: cover; width: 80px; }
.cart_item .product-name small { display: block; }
.product-remove form, .storefront-cart-update { margin: 0; }
.storefront-cart-update { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.storefront-cart-update .quantity { display: flex; margin: 0; }
.storefront-cart-update .button { margin: 0; }
.cart_totals { border: 2px solid #ececec; padding: 25px; }
.checkout-sidebar { border: 2px solid #16527f; padding: 28px; }
.wc_payment_methods { list-style: none; margin: 20px 0; }
.wc_payment_methods li { border-top: 1px solid #ddd; padding: 13px 0; }
.wc_payment_methods input { margin-right: 8px; }
.storefront-shipping-methods { border-top: 1px solid #ddd; padding-top: 18px; }
.storefront-shipping-methods label { display: block; margin-bottom: 8px; }
.storefront-order-success { padding: 70px 0; }
.storefront-order-success > i { color: #7a9c59; font-size: 64px; margin-bottom: 20px; }
.storefront-bank-details { background: #f4f8fb; border: 1px solid #dce7ef; margin: 25px auto; max-width: 560px; padding: 22px 25px; }
.storefront-bank-details p { margin-bottom: 8px; }
.woocommerce-order-overview { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 28px 0; }
.woocommerce-order-overview li { border-right: 1px dashed #ddd; padding: 8px 20px; }
.woocommerce-order-overview li:last-child { border-right: 0; }
.storefront-account { padding-bottom: 65px; padding-top: 45px; }
.storefront-account .row-divided > .col + .col { border-left: 1px solid #ececec; }
.storefront-account form.login, .storefront-account form.register { border: 1px solid #ececec; border-radius: 3px; padding: 25px; }
.storefront-account-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 30px; }
.storefront-account-heading form, .storefront-account-heading .button { margin: 0; }
.storefront-account .my_account_orders { margin-top: 18px; }

@media (max-width: 849px) {
    .header-main { height: 70px; }
    #logo { width: 150px; }
    #logo img { max-height: 70px; }
    #header.transparent .header-main { transform: translateY(12px); }
    #header.transparent .header-main .header-inner { margin-left: 15px; margin-right: 15px; padding-left: 15px; padding-right: 10px; width: auto; }
    .storefront-footer-section { padding-top: 65px; }
    .shop-page-title.featured-title, .shop-page-title.featured-title .page-title-inner { min-height: 200px; }
    .product-main { padding-top: 30px; }
    .storefront-account .row-divided > .col + .col { border-left: 0; border-top: 1px solid #ececec; padding-top: 30px; }
}

@media (max-width: 549px) {
    .header.transparent .header-main .header-inner { margin-left: 12px; margin-right: 12px; }
    .storefront-footer-logo { width: 180px; }
    .shop-page-title.featured-title, .shop-page-title.featured-title .page-title-inner { min-height: 165px; }
    .shop-page-title.featured-title h1 { font-size: 28px; }
    .product-info h1.product-title { font-size: 27px; }
    .woocommerce-order-overview { display: block; }
    .woocommerce-order-overview li { border-bottom: 1px dashed #ddd; border-right: 0; }
}

/* Streamline Flex Solid SVG Icons Styling for Storefront */
.sl-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

.sl-icon.footer-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    color: #d26e4b;
    vertical-align: -3px;
}

.sl-icon.inline-icon {
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: -1px;
}

.back-to-top .sl-icon {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
}

.storefront-menu-toggle .sl-icon {
    width: 24px;
    height: 24px;
}

.button .sl-icon, button .sl-icon, a .sl-icon {
    margin-right: 4px;
    vertical-align: -2px;
}

.storefront-product-inquiry .sl-icon {
    vertical-align: -3px;
    margin-right: 6px;
}

/* Granola-Style Product Card (Exact Match to Screenshot) */
.granola-card-container {
    background: #FAF7F2;
    border: 1px solid #EFE8DC;
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 4px 16px rgba(45, 30, 15, 0.03);
    transition: all 0.25s ease-in-out;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.granola-card-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(45, 30, 15, 0.08);
    border-color: #E2D7C3;
}

.granola-card-header {
    margin-bottom: 16px;
}

.granola-title {
    margin: 0 0 4px 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #3D2C1E !important;
    line-height: 1.3 !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.granola-title a {
    color: #3D2C1E !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.granola-title a:hover {
    color: #F8992B !important;
}

.granola-weight {
    font-size: 14px;
    font-weight: 400;
    color: #8C7A6B;
}

.granola-slogan {
    margin: 0;
    font-size: 16px !important;
    font-family: "Edu VIC WA NT Hand", cursive !important;
    font-optical-sizing: auto;
    font-weight: 600 !important;
    font-style: normal !important;
    color: #7A6655;
    line-height: 1.4;
}

/* Custom Font Families */
.product-short-desc,
.product-short-description,
.inquiry-subtext,
.granola-badge-label {
    font-family: "Dosis", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.granola-card-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: auto;
}

/* Left Grid of 4x2 Circular Badges */
.granola-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 10px;
    flex: 1;
}

.granola-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.granola-badge-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

.granola-feature-item:hover .granola-badge-circle {
    transform: scale(1.08);
}

.granola-badge-circle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.granola-badge-label {
    font-size: 11.5px;
    font-weight: 500;
    color: #4A3E33;
    line-height: 1.2;
    white-space: nowrap;
}

/* Right Side: Image + Action Button */
.granola-right-side {
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.granola-image-wrapper {
    display: block;
    width: 100%;
    height: 135px;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.granola-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.granola-image-wrapper:hover .granola-img {
    transform: scale(1.05);
}

.granola-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    background: #E58448 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 3px 8px rgba(229, 132, 72, 0.25) !important;
    text-align: center;
}

.granola-action-btn:hover {
    background: #d47235 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(229, 132, 72, 0.35) !important;
}

@media (max-width: 576px) {
    .granola-card-body {
        flex-direction: column-reverse;
        align-items: center;
    }
    .granola-right-side {
        width: 100%;
        max-width: 200px;
    }
    .granola-image-wrapper {
        height: 160px;
    }
    .granola-features-grid {
        width: 100%;
    }
}

/* ==========================================================================
   PRODUCT CARD (.pcard) — one uniform card for every product photo ratio:
   fixed square media box, image contained inside it, equal card heights.
   ========================================================================== */
.related-products-wrapper { width: 100% !important; }

.pcard {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Flat card by request: no lift, no shadow, no border tint on hover. */
.pcard:hover {
    transform: none !important;
    border-color: #E8EEF4 !important;
    box-shadow: none !important;
}

/* ---------- Media ---------- */
.pcard-media {
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: linear-gradient(160deg, #FBFCFC 0%, #EDF4F9 100%) !important;
    overflow: hidden !important;
}

/* .pcard-glow removed: the client asked for a flat media box, no tinted glow. */

/* The rule that makes mixed image sizes work: never crop, never stretch. */
.pcard-img {
    position: relative !important;
    z-index: 2 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.pcard-img.is-cutout { filter: none !important; }

.pcard-img.is-photo {
    border-radius: 16px !important;
    box-shadow: none !important;
}

.pcard:hover .pcard-img { transform: none !important; }

.pcard-weight {
    position: absolute !important;
    z-index: 3 !important;
    top: 14px !important;
    right: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #16527f !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(22, 82, 127, 0.12) !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    backdrop-filter: blur(4px) !important;
}

/* ---------- Body ---------- */
.pcard-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 18px 20px 20px 20px !important;
    text-align: left !important;
}

/* .pcard-cat removed with its markup. */

.pcard-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    line-height: 1.35 !important;
    margin: 0 0 7px 0 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.pcard:hover .pcard-title { color: #F8992B !important; }

.pcard-slogan {
    font-family: 'Dancing Script', cursive, serif !important;
    font-size: 18px !important;
    font-style: italic !important;
    color: #F8992B !important;
    line-height: 1.45 !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.pcard-ingredients {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 0 14px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.pcard-ingredients span { font-weight: 700 !important; color: #334155 !important; }

.pcard-cta {
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #16527f !important;
    padding-top: 12px !important;
    border-top: 1px dashed #E8EEF4 !important;
}

.pcard:hover .pcard-cta { color: #F8992B !important; }

@media (max-width: 549px) {
    .pcard-media { padding: 14px !important; }
    .pcard-body { padding: 15px 16px 18px 16px !important; }
    .pcard-title { font-size: 16px !important; }
    .pcard-slogan { font-size: 17px !important; }
}

/* Hero Flex Header Row */
.hero-flex-title-row {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 90%;
    max-width: 900px;
    z-index: 10;
}

.hero-title-text {
    font-family: "Josefin Sans", "Dosis", sans-serif !important;
    font-size: 4.3rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    width: fit-content !important;
    width: -moz-fit-content !important;
}

.hero-title-left {
    text-align: end !important;
    color: rgb(193, 103, 51) !important;
}

.hero-title-right {
    text-align: start !important;
    color: rgb(193, 103, 51) !important;
}

.hero-title-left-blue {
    text-align: end !important;
    color: rgb(96, 159, 209) !important;
}

.hero-title-right-blue {
    text-align: start !important;
    color: rgb(96, 159, 209) !important;
}

.hero-title-icon {
    width: 75px !important;
    height: 75px !important;
    object-fit: contain;
    flex-shrink: 0;
}

.hero-title-icon[src*="hero-title-hau-vi.png"] {
    transform: rotate(45deg);
}

@media (max-width: 849px) {
    .hero-flex-title-row {
        top: 18%;
        gap: 14px;
    }
    .hero-title-text {
        font-size: 1.6rem !important;
    }
    .hero-title-icon {
        width: 45px !important;
        height: 45px !important;
    }
}

@media (max-width: 549px) {
    .hero-flex-title-row {
        top: 14%;
        gap: 10px;
    }
    .hero-title-text {
        font-size: 1.25rem !important;
    }
    .hero-title-icon {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Section Backgrounds & Wave Dividers for Section 1 (Thiên Đường) & Section 2 (Năng lực & Chất lượng) */
#section_1334337416,
#section_64772886,
#section_1334337416 > .section-bg,
#section_64772886 > .section-bg {
    background-color: #F3F3F5 !important;
}

#section_64772886 #image_688493143 .img-inner {
    background-color: #F3F3F5 !important;
}

/* SVG Wave Divider 1 (Bottom of Hero / Top of Section 1) */
#section_912386860 .ux-shape-divider--bottom .ux-shape-fill,
#section_1334337416 .ux-shape-divider--top .ux-shape-fill {
    fill: #F3F3F5 !important;
}

/* SVG Wave Divider 2 (Top of Section 3 below Năng lực & Chất lượng) */
#section_1806494669 .ux-shape-divider--top .ux-shape-fill {
    fill: #F3F3F5 !important;
}

/* Description Font (Dosis) for Section Năng Lực & Chất Lượng */
#section_64772886 p {
    font-family: "Dosis", sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #475569 !important;
}

/* Home quality highlights: stacked brush banners. */
.stats-two-col-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: min(100%, 500px);
    margin-top: 24px;
    padding: 0;
    border: 0;
}

.stat-col-item {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 22px 56px 20px 34px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.stat-left {
    aspect-ratio: 1173 / 364;
    border: 0;
    padding-left: 34px !important;
    background-image: url('../img/nguyen-hau-brush-blue.png');
}

.stat-right {
    aspect-ratio: 1172 / 335;
    background-image: url('../img/nguyen-hau-brush-green.png');
}

.stat-main-text {
    font-family: "Dancing Script", cursive !important;
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin-bottom: 7px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.stat-left .stat-main-text {
    color: #F8992B !important;
}

.stat-right .stat-main-text {
    color: #FFFFFF !important;
    font-size: 2.7rem !important;
}

.stat-sub-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Dosis", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.stat-tabler-icon {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.stat-left .stat-tabler-icon {
    color: #F8992B;
}

.stat-right .stat-tabler-icon {
    color: #FFFFFF;
}

@media (max-width: 549px) {
    .stats-two-col-container {
        width: min(100%, 330px);
        gap: 0;
        margin: 20px auto 0;
    }
    .stat-col-item {
        padding: 16px 39px 15px 24px;
    }
    .stat-left {
        padding-left: 24px !important;
    }
    .stat-main-text {
        font-size: 2rem !important;
        margin-bottom: 5px !important;
    }
    .stat-right .stat-main-text {
        font-size: 2.15rem !important;
    }
    .stat-sub-text {
        gap: 6px;
        font-size: 11px !important;
    }
    .stat-tabler-icon {
        width: 15px;
        height: 15px;
    }
}

/* Hamburger Mobile Menu Toggle Icon Default Color (#000000) when not hovered */
.storefront-menu-toggle,
.mobile-nav .nav-icon,
.mobile-nav a,
.mobile-nav button,
.nav-icon.has-icon,
a[data-open="#main-menu"],
.mobile-sidebar-toggle,
.icon-menu,
.mobile-nav .sl-icon {
    color: #000000 !important;
}

.storefront-menu-toggle svg,
.mobile-nav .nav-icon svg,
.mobile-nav a svg,
.mobile-nav button svg,
.nav-icon.has-icon svg,
a[data-open="#main-menu"] svg,
.mobile-sidebar-toggle svg,
.icon-menu svg {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

.storefront-menu-toggle svg path,
.mobile-nav .nav-icon svg path,
.mobile-nav a svg path,
.mobile-nav button svg path,
.nav-icon.has-icon svg path,
a[data-open="#main-menu"] svg path,
.mobile-sidebar-toggle svg path,
.icon-menu svg path {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

.icon-menu span,
.icon-menu i {
    background-color: #000000 !important;
}

/* Description Font (Dosis) for Section Góc Ẩm Thực */
#section_1334337416 p {
    font-family: "Dosis", sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: #475569 !important;
}

/* Brand Orange (#F8992B) Connecting Dashed Line for Section 1334337416 */
#image_1144901526 {
    display: block !important;
    pointer-events: none;
    z-index: 0 !important;
}

#image_1144901526 img {
    filter: sepia(1) saturate(6) hue-rotate(-22deg) brightness(0.95) !important;
    -webkit-filter: sepia(1) saturate(6) hue-rotate(-22deg) brightness(0.95) !important;
}

#row-1802170217 .icon-box,
#row-1802170217 .icon-box-img,
#row-1802170217 .icon-inner {
    position: relative;
    z-index: 2 !important;
}

/* ==========================================
   FLOATING PILL GLASSMORPHISM NAVBAR (OUTFIT FONT)
   ========================================== */
.floating-header-wrapper {
    position: fixed !important;
    top: 16px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 16px !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
}

/* Unscrolled homepage top (scrollY <= 80): Floating Header visible, Traditional Header hidden */
body.home:not(.is-scrolled-header) .floating-header-wrapper {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

body.home:not(.is-scrolled-header) #header {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Scrolled homepage (scrollY > 80): Floating Header hidden, Traditional Header visible */
body.home.is-scrolled-header .floating-header-wrapper {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-20px) !important;
}

body.home.is-scrolled-header #header {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.floating-navbar {
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
    border-radius: 9999px !important;
    padding: 6px 32px !important;
    width: 100% !important;
    max-width: 1200px !important;
    min-height: 76px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.floating-navbar-logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.floating-logo-img {
    height: 70px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Navigation Links */
.floating-nav-list {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.floating-nav-item {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
}

.floating-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
    background: transparent !important;
}

.floating-nav-link:hover,
.floating-nav-link.active,
.floating-nav-item:hover > .floating-nav-link {
    color: #0f172a !important;
    background: rgba(241, 245, 249, 0.85) !important;
}

.floating-nav-link .dropdown-caret {
    color: #94a3b8 !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

.floating-nav-item:hover > .floating-nav-link .dropdown-caret {
    transform: rotate(180deg) !important;
    color: #334155 !important;
}

/* Floating Dropdown Menu */
.floating-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1) !important;
    border-radius: 18px !important;
    padding: 8px !important;
    min-width: 220px !important;
    list-style: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    z-index: 10000 !important;
}

/* Invisible Hover Bridge to prevent dropdown from closing when moving mouse */
.floating-dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -16px !important;
    left: 0 !important;
    right: 0 !important;
    height: 16px !important;
    background: transparent !important;
}

.floating-nav-item:hover .floating-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

.floating-dropdown-item {
    list-style: none !important;
    margin: 0 !important;
}

.floating-dropdown-link {
    display: block !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
}

.floating-dropdown-link:hover {
    background: #f1f5f9 !important;
    color: #16527f !important;
}

/* Action Area */
.floating-navbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Search Icon Button */
.floating-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.floating-icon-btn:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

/* Divider Line */
.floating-nav-divider {
    width: 1px !important;
    height: 20px !important;
    background: #e2e8f0 !important;
    margin: 0 4px !important;
}

/* Language Switcher */
.floating-lang-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.floating-lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    opacity: 0.65;
    text-decoration: none !important;
}

.floating-lang-btn:hover {
    opacity: 1 !important;
    transform: scale(1.08) !important;
}

.floating-lang-btn.active {
    opacity: 1 !important;
    outline: 2px solid #F8992B !important;
    outline-offset: 1px !important;
    box-shadow: 0 2px 8px rgba(248, 153, 43, 0.35) !important;
}

.floating-flag-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Sync Traditional Header Font & Dropdown Hover Effects with Floating Header */
#header,
#header .nav-top-link,
#header .menu-item,
#header .dropdown-item-link,
#header .dropdown-item-text {
    font-family: 'Outfit', sans-serif !important;
}

#header .sub-menu.nav-dropdown {
    top: 100% !important;
    margin-top: 0 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* The About-page dropdown uses in-page anchors; keep their target below the sticky header. */
.page-about #tong-quan,
.page-about #chinh-sach-chat-luong,
.page-about #tam-nhin-su-menh {
    scroll-margin-top: 106px !important;
}

@media (max-width: 849px) {
    .page-about #tong-quan,
    .page-about #chinh-sach-chat-luong,
    .page-about #tam-nhin-su-menh {
        scroll-margin-top: 64px !important;
    }
}

#header .dropdown-item-link {
    border-radius: 12px !important;
    padding: 10px 16px !important;
    transition: all 0.18s ease !important;
}

#header .dropdown-item-link:hover {
    background: #f1f5f9 !important;
    color: #16527f !important;
}

#header .nav > li > a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#header .header-main {
    height: 76px !important;
}

#header #logo img {
    max-height: 60px !important;
}

/* ==========================================
   HORIZONTAL PRODUCT CARD DESIGN MATCHING MOCKUP
   ========================================== */
.granola-card-container {
    background: #FFFDF9 !important;
    border: 1px solid rgba(248, 153, 43, 0.22) !important;
    border-radius: 24px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: visible !important;
}

.granola-card-container:hover {
    box-shadow: 0 18px 45px rgba(248, 153, 43, 0.16) !important;
    border-color: rgba(248, 153, 43, 0.45) !important;
}

/* Left Column */
.granola-left-col {
    flex: 1 1 52% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    z-index: 5 !important;
}

.granola-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 4px !important;
    flex-wrap: wrap !important;
}

.granola-title {
    margin: 0 !important;
    font-family: 'Josefin Sans', 'Roboto', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #2D1E18 !important;
    line-height: 1.2 !important;
}

.granola-title a {
    color: #2D1E18 !important;
    text-decoration: none !important;
}

.granola-title a:hover {
    color: #F8992B !important;
}

.granola-sku-pill {
    background: #F5ECE5 !important;
    color: #8C6A58 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 12px !important;
    border-radius: 9999px !important;
}

.granola-slogan {
    font-family: 'Dancing Script', 'Edu VIC WA NT Hand', cursive, serif !important;
    font-style: italic !important;
    font-size: 16.5px !important;
    color: #D66D20 !important;
    margin: 4px 0 4px 0 !important;
}

.granola-slogan-flourish {
    margin-bottom: 14px !important;
}

.granola-desktop-cta-wrapper {
    margin-top: 16px !important;
}

/* CTA Button */
.granola-cta-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #FF9E2C 0%, #E87E10 100%) !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    border-radius: 9999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(248, 153, 43, 0.38) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.granola-cta-btn:hover {
    background: linear-gradient(135deg, #FFA73C 0%, #D47008 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 26px rgba(248, 153, 43, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Right Column / Stage Area */
.granola-right-col {
    flex: 1 1 48% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.granola-stage-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Product Image Box & 45deg Rotation */
.granola-product-image-box {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.granola-rotated-img {
    max-height: 175px !important;
    width: auto !important;
    object-fit: contain !important;
    transform: rotate(25deg) scale(1) !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15)) !important;
}

/* Hover effect: Product image rotates straight (0deg) and zooms in */
.granola-card-container:hover .granola-rotated-img {
    transform: rotate(0deg) scale(1.12) !important;
}

.granola-podium-base {
    position: absolute !important;
    bottom: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 190px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.granola-podium-img {
    width: 100% !important;
    height: auto !important;
    opacity: 0.9 !important;
}

/* 2 Sliding Overlapping Tags */
.granola-sliding-tags {
    position: absolute !important;
    bottom: 5px !important;
    left: -20px !important;
    right: -20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 10 !important;
}

.granola-major-card {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease !important;
}

.granola-major-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
}

.granola-major-text {
    display: flex !important;
    flex-direction: column !important;
}

.granola-major-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2D1E18 !important;
    line-height: 1.2 !important;
}

.granola-major-sub {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    color: #8C7A70 !important;
    margin-top: 1px !important;
}

/* Desktop Hover: Tag Left slides left (-45px), Tag Right slides right (+45px) */
.granola-card-container:hover .tag-left {
    transform: translateX(-45px) translateY(-5px) !important;
}

.granola-card-container:hover .tag-right {
    transform: translateX(45px) translateY(-5px) !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .granola-card-container {
        flex-direction: column !important;
        padding: 18px 14px !important;
        gap: 12px !important;
        overflow: hidden !important;
    }

    .granola-left-col {
        width: 100% !important;
    }
    
    .granola-desktop-cta-wrapper {
        display: none !important;
    }

    .granola-right-col {
        width: 100% !important;
    }

    .granola-stage-wrapper {
        height: auto !important;
        flex-direction: column !important;
    }

    .granola-rotated-img {
        transform: rotate(0deg) !important;
        max-height: 140px !important;
    }

    .granola-podium-base {
        width: 160px !important;
        bottom: 50px !important;
    }

    .granola-sliding-tags {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 14px !important;
        transform: none !important;
        flex-direction: row !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .granola-major-card {
        flex: 1 1 48% !important;
    }

    .granola-card-container:hover .tag-left,
    .granola-card-container:hover .tag-right {
        transform: none !important;
    }
}

/* ==========================================
   4-STEP COOKING METHODS SECTION (SECTION 1334337416)
   ========================================== */
#section_1334337416 {
    background-color: #F8FAF9 !important;
    padding: 60px 0 80px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.cooking-kicker-title {
    font-family: 'Dancing Script', cursive, serif !important;
    font-style: italic !important;
    font-size: 20px !important;
    color: #F8992B !important;
    margin-bottom: 6px !important;
}

.cooking-section-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin-bottom: 12px !important;
}

.cooking-section-subtitle {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    color: #64748b !important;
    max-width: 680px !important;
    margin: 0 auto 40px auto !important;
    line-height: 1.6 !important;
}

/* 3-Column Stage Layout */
.cooking-methods-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.cooking-side-col {
    flex: 1 1 30% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

.cooking-center-col {
    flex: 1 1 40% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Center Stage 3D Floating Element */
.cooking-center-stage {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.cooking-center-bg-shape {
    position: absolute !important;
    width: 320px !important;
    height: 380px !important;
    background: linear-gradient(135deg, rgba(248, 153, 43, 0.14) 0%, rgba(22, 82, 127, 0.08) 100%) !important;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% !important;
    z-index: 1 !important;
    animation: shapeBlob 10s infinite alternate ease-in-out !important;
}

@keyframes shapeBlob {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); }
    100% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%; transform: rotate(10deg); }
}

.cooking-center-3d-img {
    position: relative !important;
    z-index: 2 !important;
    max-width: 360px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.15)) !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cooking-center-stage:hover .cooking-center-3d-img {
    transform: scale(1.06) translateY(-8px) !important;
}

/* Step Cards */
.cooking-step-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.cooking-step-card:hover {
    border-color: rgba(248, 153, 43, 0.4) !important;
    box-shadow: 0 16px 36px rgba(248, 153, 43, 0.12) !important;
    transform: translateY(-5px) !important;
}

.cooking-card-icon-wrapper {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    background: #FFF9F2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.cooking-card-icon-img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
}

.cooking-card-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin-bottom: 8px !important;
}

.cooking-card-desc {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

.cooking-card-link {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    text-decoration: none !important;
    letter-spacing: 0.04em !important;
    transition: color 0.2s ease !important;
}

.cooking-card-link:hover {
    color: #F8992B !important;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .cooking-methods-stage {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .cooking-side-col {
        width: 100% !important;
    }

    .cooking-center-col {
        order: -1 !important;
        width: 100% !important;
    }
}

/* ==========================================
   SUBPAGE HERO BANNER BACKGROUND IMAGE (FACTORY PHOTO)
   ========================================== */
.about-hero,
.page-title,
.shop-page-title.featured-title,
.storefront-shop-title-bg,
.page-title-bg,
.header-hero-bg,
#section_about_hero .section-bg,
#section_contact_hero .section-bg,
#section_blog_hero .section-bg {
    background-image: linear-gradient(rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.62)), url('https://nguyenhaucomvn342.mbws.vn/wp-content/uploads/2025/08/subpage-hero-bg.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    position: relative !important;
}

.about-hero h1,
.about-hero p,
.page-title h1,
.page-title h2,
.page-title a,
.page-title .breadcrumbs,
.shop-page-title h1,
.shop-page-title a,
.shop-page-title .breadcrumbs {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.page-title {
    padding: 60px 0 !important;
}

/* Orange Kicker Title for Section 1334337416 */
#text-777919792,
#text-777919792 h3,
#text-777919792 > * {
    color: #F8992B !important;
}

/* ==========================================
   PRODUCT DETAIL COOKING METHODS SECTION
   ========================================== */
.product-cooking-methods-section {
    margin: 48px 0 !important;
    padding: 40px 24px !important;
    background: #F8FAF9 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.cooking-methods-header {
    margin-bottom: 32px !important;
}

.cooking-subtitle {
    color: #F8992B !important;
    font-family: 'Dancing Script', cursive, serif !important;
    font-style: italic !important;
    font-size: 22px !important;
    margin-bottom: 4px !important;
}

.cooking-main-title {
    color: #16527f !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}

.cooking-method-card {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 24px 18px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.cooking-method-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 14px 32px rgba(248, 153, 43, 0.12) !important;
    border-color: rgba(248, 153, 43, 0.4) !important;
}

.cooking-card-icon-wrapper {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(248, 153, 43, 0.12) 0%, rgba(22, 82, 127, 0.08) 100%) !important;
    color: #F8992B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
}

.cooking-method-card:hover .cooking-card-icon-wrapper {
    background: linear-gradient(135deg, #F8992B 0%, #16527f 100%) !important;
    color: #FFFFFF !important;
    transform: scale(1.1) rotate(-4deg) !important;
    box-shadow: 0 8px 20px rgba(248, 153, 43, 0.3) !important;
}

.cooking-card-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

.cooking-card-desc {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE v2 (.pd-*) — same design language as the homepage:
   Dancing Script kicker, Outfit headings, brand blue #16527f + orange #F8992B,
   soft cards, animated blob, wave divider.
   ========================================================================== */
.pd-page #main { background: #FFFFFF !important; }

.pd-page .container { max-width: 1250px !important; }

/* ---------- Shared section furniture ---------- */
.pd-section-kicker {
    font-family: 'Dancing Script', cursive, serif !important;
    font-style: italic !important;
    font-size: 21px !important;
    color: #F8992B !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.pd-section-kicker-light { color: #FFC680 !important; }

.pd-section-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
}

.pd-section-sub {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.65 !important;
    max-width: 680px !important;
    margin: 0 auto !important;
}

.pd-section-head {
    text-align: center !important;
    margin-bottom: 36px !important;
}

/* ---------- Hero ---------- */
.pd-hero {
    position: relative !important;
    padding: 26px 0 90px 0 !important;
    background: linear-gradient(180deg, #F8FAF9 0%, #EEF5FA 100%) !important;
    overflow: hidden !important;
}

.pd-breadcrumb {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin-bottom: 22px !important;
}

.pd-breadcrumb a { color: #64748b !important; text-decoration: none !important; }
.pd-breadcrumb a:hover { color: #F8992B !important; }
.pd-breadcrumb-sep { margin: 0 8px !important; color: #cbd5e1 !important; }

.pd-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: center !important;
}

/* Gallery stage: photo card floating over an animated blob */
.pd-gallery-stage {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
    min-height: 380px !important;
}

.pd-gallery-blob {
    position: absolute !important;
    inset: 8% 6% !important;
    background: linear-gradient(135deg, rgba(248, 153, 43, 0.20) 0%, rgba(22, 82, 127, 0.12) 100%) !important;
    border-radius: 42% 58% 68% 32% / 42% 48% 52% 58% !important;
    animation: shapeBlob 11s infinite alternate ease-in-out !important;
    z-index: 1 !important;
}

.pd-gallery-orb {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(2px) !important;
    z-index: 1 !important;
}

.pd-gallery-orb-1 {
    width: 70px !important; height: 70px !important;
    top: 12% !important; right: 14% !important;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15)) !important;
}

.pd-gallery-orb-2 {
    width: 42px !important; height: 42px !important;
    bottom: 16% !important; left: 12% !important;
    background: radial-gradient(circle at 30% 30%, rgba(248, 153, 43, 0.55), rgba(248, 153, 43, 0)) !important;
}

.pd-gallery-image {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 460px !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 24px !important;
    border: 6px solid #FFFFFF !important;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16) !important;
    cursor: zoom-in !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pd-gallery-stage:hover .pd-gallery-image { transform: translateY(-6px) scale(1.015) !important; }

.pd-video-badge {
    position: absolute !important;
    z-index: 3 !important;
    bottom: 30px !important;
    right: 8% !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #16527f !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 24px rgba(22, 82, 127, 0.32) !important;
    transition: background 0.25s ease, transform 0.25s ease !important;
}

.pd-video-badge:hover { background: #F8992B !important; transform: translateY(-2px) !important; }

.pd-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 6px !important;
}

.pd-thumb {
    width: 78px !important;
    height: 78px !important;
    padding: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.25s ease !important;
}

.pd-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.pd-thumb:hover { transform: translateY(-3px) !important; }
.pd-thumb.is-active { border-color: #F8992B !important; box-shadow: 0 8px 20px rgba(248, 153, 43, 0.28) !important; }

/* Info column */
.pd-kicker {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #F8992B !important;
    margin: 0 0 10px 0 !important;
}

.pd-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #16527f !important;
    margin: 0 0 14px 0 !important;
}

.pd-slogan {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-family: 'Dancing Script', cursive, serif !important;
    font-size: 26px !important;
    font-style: italic !important;
    color: #F8992B !important;
    line-height: 1.35 !important;
    margin: 0 0 18px 0 !important;
}

.pd-slogan-mark { flex: 0 0 auto !important; margin-top: 8px !important; opacity: 0.55 !important; }

.pd-short,
.pd-short p {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: #55647a !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
}

/* Quick facts */
.pd-facts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 12px !important;
    margin: 22px 0 !important;
    padding: 0 !important;
}

.pd-fact {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.pd-fact:hover { border-color: rgba(248, 153, 43, 0.45) !important; box-shadow: 0 10px 24px rgba(248, 153, 43, 0.12) !important; }

.pd-fact dt {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin-bottom: 5px !important;
}

.pd-fact dt .sl-icon { color: #F8992B !important; }

.pd-fact dd {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #16527f !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Certificate chips */
.pd-certs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 24px !important; }

.pd-cert {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: #16527f !important;
    background: rgba(22, 82, 127, 0.08) !important;
    border: 1px solid rgba(22, 82, 127, 0.14) !important;
    border-radius: 999px !important;
    padding: 6px 13px !important;
}

/* CTA buttons */
.pd-cta { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }

/* "Liên hệ đặt hàng" uses the shared .nh-btn (end of this file); the hotline keeps
   its own quieter ghost button so the two don't compete. */
.pd-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 52px !important;
    padding: 0 26px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pd-btn-ghost {
    background: #FFFFFF !important;
    color: #16527f !important;
    border: 1.5px solid rgba(22, 82, 127, 0.2) !important;
}

.pd-btn-ghost:hover { border-color: #16527f !important; transform: translateY(-3px) !important; color: #16527f !important; }

/* Wave divider closing the hero */
.pd-wave {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: -1px !important;
    line-height: 0 !important;
    color: #FFFFFF !important;
    pointer-events: none !important;
}

.pd-wave svg { width: 100% !important; height: 80px !important; display: block !important; }

/* ---------- Story ---------- */
.pd-story { padding: 60px 0 10px 0 !important; }

.pd-story-card {
    position: relative !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    background: #F8FAF9 !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 26px !important;
    padding: 40px 44px !important;
    text-align: center !important;
}

.pd-story-card::before {
    content: '“' !important;
    position: absolute !important;
    top: -6px !important; left: 26px !important;
    font-family: 'Dancing Script', cursive, serif !important;
    font-size: 90px !important;
    color: rgba(248, 153, 43, 0.28) !important;
    line-height: 1 !important;
}

.pd-story-body,
.pd-story-body p {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: #55647a !important;
    line-height: 1.85 !important;
    text-align: left !important;
}

.pd-story-body p + p { margin-top: 12px !important; }

/* ---------- Cooking methods (tabs + panel) ---------- */
.pd-cooking { padding: 64px 0 !important; background: #F8FAF9 !important; margin-top: 54px !important; }

.pd-cooking-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
}

.pd-cooking-tabs { display: flex !important; flex-direction: column !important; gap: 10px !important; }

.pd-cooking-tab {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    width: 100% !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pd-cooking-tab:hover { border-color: rgba(248, 153, 43, 0.45) !important; transform: translateX(3px) !important; }

.pd-cooking-tab.is-active {
    border-color: transparent !important;
    background: linear-gradient(135deg, #16527f 0%, #1d6597 100%) !important;
    box-shadow: 0 14px 30px rgba(22, 82, 127, 0.24) !important;
}

.pd-cooking-tab-icon {
    flex: 0 0 auto !important;
    width: 44px !important; height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, rgba(248, 153, 43, 0.14) 0%, rgba(22, 82, 127, 0.08) 100%) !important;
    color: #F8992B !important;
    transition: all 0.3s ease !important;
}

.pd-cooking-tab.is-active .pd-cooking-tab-icon { background: rgba(255, 255, 255, 0.18) !important; color: #FFFFFF !important; }

.pd-cooking-tab-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #16527f !important;
    line-height: 1.35 !important;
}

.pd-cooking-tab.is-active .pd-cooking-tab-text { color: #FFFFFF !important; }

.pd-cooking-tab-step {
    display: block !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: 0.1em !important;
    color: #F8992B !important;
    margin-bottom: 1px !important;
}

.pd-cooking-tab.is-active .pd-cooking-tab-step { color: #FFC680 !important; }

.pd-cooking-tab-video { margin-left: auto !important; color: #94a3b8 !important; display: inline-flex !important; }
.pd-cooking-tab.is-active .pd-cooking-tab-video { color: rgba(255, 255, 255, 0.8) !important; }

.pd-cooking-panels { position: relative !important; }

.pd-cooking-panel { display: none !important; }

.pd-cooking-panel.is-active {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06) !important;
    animation: pdFadeIn 0.35s ease both !important;
}

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

.pd-cooking-media { position: relative !important; background: #EEF5FA !important; min-height: 300px !important; }

.pd-cooking-media img,
.pd-cooking-media video,
.pd-cooking-media iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    object-fit: cover !important;
    display: block !important;
    border: 0 !important;
}

.pd-cooking-media-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 300px !important;
}

.pd-cooking-media-empty .pd-cooking-tab-icon { width: 78px !important; height: 78px !important; border-radius: 24px !important; }

.pd-play {
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 68px !important; height: 68px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #F8992B !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28) !important;
    transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease !important;
}

.pd-play:hover { transform: scale(1.08) !important; background: #F8992B !important; color: #FFFFFF !important; }

.pd-cooking-copy { padding: 32px 34px !important; display: flex !important; flex-direction: column !important; }

.pd-cooking-step {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #F8992B !important;
    margin: 0 0 6px 0 !important;
}

.pd-cooking-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.pd-cooking-desc,
.pd-cooking-desc p {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    color: #55647a !important;
    line-height: 1.8 !important;
    margin-bottom: 8px !important;
}

.pd-cooking-link {
    margin-top: auto !important;
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #16527f !important;
    text-decoration: none !important;
    padding-top: 14px !important;
    transition: color 0.22s ease, gap 0.22s ease !important;
}

.pd-cooking-link:hover { color: #F8992B !important; gap: 11px !important; }

/* Collapsible short usage guide */
.pd-usage {
    max-width: 900px !important;
    margin: 26px auto 0 auto !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 18px !important;
    padding: 4px 22px !important;
}

.pd-usage > summary {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    cursor: pointer !important;
    padding: 16px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    list-style: none !important;
}

.pd-usage > summary::-webkit-details-marker { display: none !important; }
.pd-usage > summary .sl-icon { color: #F8992B !important; }
.pd-usage[open] > summary { border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important; }

.pd-usage-body { padding: 16px 0 20px 0 !important; }

.pd-usage-body,
.pd-usage-body p,
.pd-usage-body li {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    color: #55647a !important;
    line-height: 1.8 !important;
}

.pd-usage-body ul { padding-left: 20px !important; margin-bottom: 0 !important; }
.pd-usage-body strong { color: #16527f !important; }

/* ---------- Detail (long description) ---------- */
.pd-detail { padding: 64px 0 !important; }

.pd-detail-body {
    max-width: 900px !important;
    margin: 0 auto !important;
}

.pd-detail-body,
.pd-detail-body p,
.pd-detail-body li {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: #55647a !important;
    line-height: 1.85 !important;
}

.pd-detail-body img { border-radius: 18px !important; margin: 16px 0 !important; }
.pd-detail-body h2, .pd-detail-body h3, .pd-detail-body h4 { font-family: 'Outfit', sans-serif !important; color: #16527f !important; }

/* ---------- Photo grid (Bento Masonry layout) ---------- */
.pd-photos { padding: 10px 0 64px 0; }

.pd-photo-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.pd-photo-card {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #EEF5FA;
    cursor: zoom-in;
    height: 245px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
    outline: none;
}

.pd-photo-col-3 { grid-column: span 3; }
.pd-photo-col-4 { grid-column: span 4; }
.pd-photo-col-5 { grid-column: span 5; }

.pd-photo-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pd-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.pd-photo-card:hover .pd-photo-img {
    transform: scale(1.1);
}

/* ---------- Inquiry band ---------- */
.pd-inquiry {
    padding: 66px 0 !important;
    background: linear-gradient(135deg, #16527f 0%, #0f3d61 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

.pd-inquiry::after {
    content: '' !important;
    position: absolute !important;
    width: 420px !important; height: 420px !important;
    right: -120px !important; top: -140px !important;
    background: radial-gradient(circle, rgba(248, 153, 43, 0.22) 0%, rgba(248, 153, 43, 0) 70%) !important;
    border-radius: 50% !important;
}

.pd-inquiry-grid {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px) !important;
    gap: 46px !important;
    align-items: center !important;
}

.pd-inquiry-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    margin: 0 0 14px 0 !important;
}

.pd-inquiry-text {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    line-height: 1.8 !important;
    margin-bottom: 22px !important;
}

.pd-inquiry-contact { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.pd-inquiry-contact li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
}

.pd-inquiry-contact .sl-icon { color: #F8992B !important; flex: 0 0 auto !important; margin-top: 3px !important; }
.pd-inquiry-contact a { color: #FFFFFF !important; text-decoration: none !important; }
.pd-inquiry-contact a:hover { color: #F8992B !important; }

.pd-inquiry-card {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    padding: 30px !important;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.24) !important;
    margin: 0 !important;
}

/* ---------- Related ---------- */
.pd-related { padding: 64px 0 !important; background: #F8FAF9 !important; }

/* ---------- Lightbox ---------- */
.pd-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: rgba(8, 15, 26, 0.92) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
    animation: pdFadeIn 0.2s ease both !important;
}

.pd-lightbox[hidden] { display: none !important; }

.pd-lightbox-body {
    width: min(1000px, 100%) !important;
    max-height: 86vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pd-lightbox-body img,
.pd-lightbox-body video {
    max-width: 100% !important;
    max-height: 86vh !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5) !important;
}

.pd-lightbox-body iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5) !important;
}

.pd-lightbox-close {
    position: absolute !important;
    top: 22px !important; right: 26px !important;
    width: 44px !important; height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.22s ease !important;
}

.pd-lightbox-close:hover { background: #F8992B !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .pd-hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .pd-title { font-size: 30px !important; }
    .pd-slogan { font-size: 23px !important; }
    .pd-section-title { font-size: 25px !important; }
    .pd-cooking-shell { grid-template-columns: 1fr !important; }
    .pd-cooking-tabs { flex-direction: row !important; overflow-x: auto !important; padding-bottom: 6px !important; }
    .pd-cooking-tab { width: auto !important; flex: 0 0 auto !important; min-width: 210px !important; }
    .pd-cooking-tab:hover { transform: translateY(-3px) !important; }
    .pd-cooking-panel.is-active { grid-template-columns: 1fr !important; }
    .pd-inquiry-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .pd-inquiry-title { font-size: 26px !important; }
    .pd-story-card { padding: 30px 24px !important; }
    .pd-photo-wide { grid-column: auto !important; }
}

@media (max-width: 549px) {
    .pd-hero { padding-bottom: 60px !important; }
    .pd-title { font-size: 25px !important; }
    .pd-gallery-stage { min-height: 280px !important; padding: 10px !important; }
    .pd-gallery-image { border-width: 5px !important; border-radius: 20px !important; }
    .pd-thumb { width: 62px !important; height: 62px !important; }
    .pd-cta { flex-direction: column !important; align-items: stretch !important; }
    .pd-btn { justify-content: center !important; }
    .pd-cooking-copy { padding: 24px 20px !important; }
    .pd-inquiry-card { padding: 22px 18px !important; }
    .pd-lightbox { padding: 16px !important; }
}

/* Photo (non cut-out) images inside the granola card: frame them instead of rotating a rectangle. */
.granola-rotated-img.is-photo {
    max-height: 210px !important;
    width: 260px !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    border: 5px solid #FFFFFF !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18) !important;
    transform: rotate(-4deg) scale(1) !important;
    filter: none !important;
}

.granola-card-container:hover .granola-rotated-img.is-photo {
    transform: rotate(0deg) scale(1.06) !important;
}

@media (max-width: 849px) {
    .granola-rotated-img.is-photo { width: 210px !important; max-height: 165px !important; }
}

/* --------------------------------------------------------------------------
   Cut-out artwork (transparent PNG/WebP) on the product detail page:
   float it with a drop shadow instead of framing it like a photo.
   -------------------------------------------------------------------------- */
.pd-gallery-image.is-cutout {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 20px 34px rgba(15, 23, 42, 0.26)) !important;
}

.pd-thumb.is-cutout {
    background: #FFFFFF !important;
    padding: 6px !important;
}

.pd-thumb.is-cutout img { object-fit: contain !important; }

/* ==========================================
   GLOBAL TITLE HEADING FONT: PHUDU
   ========================================== */
h1, h2, h3, h4, h5, h6,
.pd-title,
.pd-section-title,
.pd-cooking-title,
.pd-inquiry-title,
.cooking-main-title,
.cooking-card-title,
.pcard-title,
.sp-hero-title,
.sp-title,
.sp-card-title,
.sp-post-title,
.sp-cta-title,
.ftr-title,
.granola-title,
.product-title,
.section-title,
.banner-title,
.entry-title,
.product_title {
    font-family: 'Phudu', cursive, sans-serif !important;
}

.pd-photo.is-cutout {
    background: linear-gradient(135deg, #F8FAF9 0%, #EEF5FA 100%) !important;
}

.pd-photo.is-cutout img {
    object-fit: contain !important;
    padding: 16px !important;
}

/* ==========================================================================
   SUBPAGES (.sp-*) — About / Culinary corner / Market & News / Contact /
   policy pages / single post. Same language as the homepage: Phudu headings,
   Dancing Script kicker, blue #16527f + orange #F8992B, wave dividers.
   ========================================================================== */
.sp-page #main { background: #FFFFFF !important; }

/* ---------- Hero ---------- */
.sp-hero {
    position: relative !important;
    padding: 72px 0 96px 0 !important;
    background-color: #0f3d61 !important;
    background-image: var(--sp-hero-image, none) !important;
    background-size: cover !important;
    background-position: center center !important;
    overflow: hidden !important;
    text-align: center !important;
}

.sp-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(10, 44, 71, 0.9) 0%, rgba(15, 61, 97, 0.76) 45%, rgba(22, 82, 127, 0.62) 100%) !important;
}

.sp-hero > .container { position: relative !important; z-index: 2 !important; }

.sp-hero-kicker {
    font-family: 'Dancing Script', cursive, serif !important;
    font-style: italic !important;
    font-size: 22px !important;
    color: #FFC680 !important;
    margin: 0 0 6px 0 !important;
}

.sp-hero-title {
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin: 0 auto 14px auto !important;
    max-width: 900px !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
}

.sp-hero-sub {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 17px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    line-height: 1.7 !important;
    max-width: 720px !important;
    margin: 0 auto 18px auto !important;
}

.sp-crumbs {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.sp-crumbs a { color: #FFFFFF !important; text-decoration: none !important; }
.sp-crumbs a:hover { color: #F8992B !important; }
.sp-crumbs span { margin: 0 8px !important; opacity: 0.6 !important; }

.sp-hero-wave {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: -1px !important;
    line-height: 0 !important;
    color: #FFFFFF !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.sp-hero-wave svg { width: 100% !important; height: 74px !important; display: block !important; }

/* ---------- Section furniture ---------- */
.sp-section { padding: 62px 0 !important; }
.sp-section-tint { background: #F8FAF9 !important; }
.sp-section-head { text-align: center !important; margin-bottom: 38px !important; }

.sp-kicker {
    font-family: 'Dancing Script', cursive, serif !important;
    font-style: italic !important;
    font-size: 21px !important;
    color: #F8992B !important;
    margin: 0 0 4px 0 !important;
}

/* Homepage eyebrow labels use the same handwritten treatment as "Góc ẩm thực & tin tức". */
#text-4211902938 h3,
#text-777919792 h3 {
    margin: 0 0 4px 0 !important;
    color: #F8992B !important;
    font-family: 'Dancing Script', cursive, serif !important;
    font-size: 21px !important;
    font-style: italic !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.sp-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
}

.sp-lead {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: #55647a !important;
    line-height: 1.7 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}

/* ---------- Long-form content ---------- */
.sp-prose { max-width: 900px !important; margin: 0 auto !important; }

.sp-prose p,
.sp-prose li {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: #55647a !important;
    line-height: 1.85 !important;
}

.sp-prose p { margin-bottom: 14px !important; }
.sp-prose h2 { font-size: 26px !important; color: #16527f !important; margin: 30px 0 12px 0 !important; }
.sp-prose h3 { font-size: 20px !important; color: #16527f !important; margin: 24px 0 10px 0 !important; }
.sp-prose strong { color: #16527f !important; }
.sp-prose ul, .sp-prose ol { padding-left: 22px !important; margin-bottom: 16px !important; }
.sp-prose li { margin-bottom: 7px !important; }
.sp-prose img { border-radius: 18px !important; margin: 18px 0 !important; max-width: 100% !important; height: auto !important; }
.sp-prose a { color: #F8992B !important; text-decoration: underline !important; }

.sp-prose blockquote {
    margin: 22px 0 !important;
    padding: 18px 24px !important;
    background: #F8FAF9 !important;
    border-left: 4px solid #F8992B !important;
    border-radius: 0 16px 16px 0 !important;
}

.sp-prose blockquote p { margin: 0 !important; font-style: italic !important; }

/* Anchor offset so menu links (#tong-quan …) don't hide under the sticky header */
.sp-anchor { scroll-margin-top: 110px !important; }

/* ---------- Generic cards ---------- */
.sp-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 20px !important;
}

.sp-card {
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 20px !important;
    padding: 26px 24px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
    height: 100% !important;
}

.sp-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(248, 153, 43, 0.45) !important;
    box-shadow: 0 18px 36px rgba(248, 153, 43, 0.1) !important;
}

.sp-card-icon {
    width: 54px !important; height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(248, 153, 43, 0.14) 0%, rgba(22, 82, 127, 0.08) 100%) !important;
    color: #F8992B !important;
    margin-bottom: 14px !important;
    transition: all 0.3s ease !important;
}

.sp-card:hover .sp-card-icon {
    background: linear-gradient(135deg, #F8992B 0%, #16527f 100%) !important;
    color: #FFFFFF !important;
    transform: scale(1.06) rotate(-4deg) !important;
}

.sp-card-title { font-size: 18px !important; color: #16527f !important; margin: 0 0 8px 0 !important; line-height: 1.35 !important; }

.sp-card-text {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 15.5px !important;
    color: #64748b !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ---------- Company fact list (About > Tổng quan) ---------- */
.sp-facts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Company facts: icon plate + a green accent that grows on hover, revealed with a
   short stagger as the block scrolls in (see [data-reveal] in storefront.js). */
.sp-fact {
    position: relative !important;
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 16px !important;
    padding: 16px 18px 16px 16px !important;
    overflow: hidden !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.sp-fact::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: linear-gradient(180deg, #8ec821 0%, #2a660b 100%) !important;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sp-fact:hover { border-color: rgba(142, 200, 33, 0.55) !important; box-shadow: 0 10px 26px rgba(42, 102, 11, 0.10) !important; }
.sp-fact:hover::before { height: 72% !important; }

.sp-fact-icon {
    flex: 0 0 auto !important;
    width: 38px !important; height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    color: #5aa016 !important;
    background: linear-gradient(160deg, #f4fbe4 0%, #e2f4bd 100%) !important;
    transition: color 0.25s ease, background 0.25s ease !important;
}

.sp-fact:hover .sp-fact-icon { color: #FFFFFF !important; background: linear-gradient(160deg, #8ec821 0%, #4f9314 100%) !important; }

/* Scroll reveal — one shared helper, opted into with data-reveal. */
[data-reveal] > * {
    opacity: 0 !important;
    transform: translateY(16px) !important;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition-delay: calc(var(--reveal-i, 0) * 60ms) !important;
}

[data-reveal].is-revealed > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .sp-fact { transition: none !important; }
}

.sp-fact-label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin: 0 0 3px 0 !important;
}

.sp-fact-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #16527f !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
}

.sp-fact-value a { color: #16527f !important; text-decoration: none !important; }
.sp-fact-value a:hover { color: #F8992B !important; }

/* ---------- Certificate chips ---------- */
.sp-certs { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; justify-content: center !important; }

.sp-cert {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #16527f !important;
    background: rgba(22, 82, 127, 0.07) !important;
    border: 1px solid rgba(22, 82, 127, 0.14) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
}

/* ---------- Split (image + text) ---------- */
.sp-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 42px !important;
    align-items: center !important;
}

.sp-split-media {
    position: relative !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14) !important;
    aspect-ratio: 4 / 3 !important;
}

.sp-split-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.sp-split-body .sp-section-head { text-align: left !important; margin-bottom: 18px !important; }
.sp-split-body .sp-lead { margin: 0 !important; }
.sp-split-reverse .sp-split-media { order: 2 !important; }

/* ---------- Category pills (archive filters) ---------- */
.sp-pills { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; margin-bottom: 34px !important; }

.sp-pill {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #16527f !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 999px !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.sp-pill:hover { border-color: #F8992B !important; color: #F8992B !important; }

.sp-pill.is-active {
    background: linear-gradient(135deg, #16527f 0%, #1d6597 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 24px rgba(22, 82, 127, 0.24) !important;
}

/* ---------- Post cards ---------- */
.sp-posts {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

.sp-post {
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    height: 100% !important;
    text-decoration: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important;
}

.sp-post:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(248, 153, 43, 0.45) !important;
    box-shadow: none !important;
}

.sp-post-media {
    position: relative !important;
    aspect-ratio: 16 / 10 !important;
    background: linear-gradient(160deg, #FBFCFC 0%, #EDF4F9 100%) !important;
    overflow: hidden !important;
}

.sp-post-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.sp-post:hover .sp-post-media img { transform: scale(1.05) !important; }

.sp-post-chip {
    position: absolute !important;
    z-index: 2 !important;
    left: 14px !important; top: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    background: rgba(22, 82, 127, 0.92) !important;
    border-radius: 999px !important;
    padding: 6px 13px !important;
    backdrop-filter: blur(4px) !important;
}

.sp-post-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 20px 22px 22px 22px !important; }

.sp-post-date {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin: 0 0 8px 0 !important;
}

.sp-post-title {
    font-size: 18px !important;
    color: #16527f !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.sp-post:hover .sp-post-title { color: #F8992B !important; }

.sp-post-excerpt {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 15.5px !important;
    color: #64748b !important;
    line-height: 1.7 !important;
    margin: 0 0 14px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.sp-post-more {
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #16527f !important;
    padding-top: 12px !important;
    border-top: 1px dashed #E8EEF4 !important;
    transition: color 0.25s ease, gap 0.25s ease !important;
}

.sp-post:hover .sp-post-more { color: #F8992B !important; gap: 11px !important; }

/* Featured (first) post spans two columns on wide screens */
.sp-post-featured { grid-column: span 2 !important; }
.sp-post-featured .sp-post { flex-direction: row !important; }
.sp-post-featured .sp-post-media { aspect-ratio: auto !important; flex: 0 0 46% !important; }
.sp-post-featured .sp-post-title { font-size: 23px !important; }
.sp-post-featured .sp-post-excerpt { -webkit-line-clamp: 3 !important; }

.sp-empty {
    text-align: center !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    color: #64748b !important;
    padding: 40px 0 !important;
}

/* ---------- Single post ---------- */
.sp-article-hero { position: relative !important; }

.sp-article-image {
    max-width: 1000px !important;
    margin: -70px auto 0 auto !important;
    position: relative !important;
    z-index: 3 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 54px rgba(15, 23, 42, 0.2) !important;
    aspect-ratio: 16 / 9 !important;
    background: #EEF5FA !important;
}

.sp-article-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

.sp-article-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 22px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #64748b !important;
}

.sp-article-meta .sl-icon { color: #F8992B !important; vertical-align: -3px !important; margin-right: 5px !important; }

.sp-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #16527f !important;
    text-decoration: none !important;
    margin-top: 26px !important;
    transition: gap 0.25s ease, color 0.25s ease !important;
}

.sp-back:hover { color: #F8992B !important; gap: 13px !important; }

/* ---------- Contact ---------- */
.sp-contact-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
    gap: 44px !important;
    align-items: start !important;
}

.sp-contact-cards { display: grid !important; gap: 14px !important; }

.sp-contact-card {
    display: flex !important;
    gap: 15px !important;
    align-items: flex-start !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 18px !important;
    padding: 20px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.sp-contact-card:hover { transform: translateY(-4px) !important; border-color: rgba(248, 153, 43, 0.45) !important; }

.sp-contact-card .sp-card-icon { margin-bottom: 0 !important; flex: 0 0 auto !important; width: 48px !important; height: 48px !important; }
.sp-contact-card-title { font-size: 12px !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: #94a3b8 !important; margin: 0 0 4px 0 !important; }

.sp-contact-card-value {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #16527f !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.sp-contact-card-value a { color: #16527f !important; text-decoration: none !important; }
.sp-contact-card-value a:hover { color: #F8992B !important; }

.sp-map {
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid #E8EEF4 !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
    margin-top: 14px !important;
    line-height: 0 !important;
}

.sp-map iframe { width: 100% !important; height: 300px !important; border: 0 !important; display: block !important; }

/* ---------- CTA band ---------- */
/* The CTA band: white at both edges, greenest in the middle, so it floats between the
   white page above and the footer's white waves below. The pseudo-elements are hairline
   borders rather than glows. */
.sp-cta {
    position: relative !important;
    padding: 66px 0 74px 0 !important;
    overflow: hidden !important;
    text-align: center !important;
}

.sp-cta::before,
.sp-cta::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        rgba(142, 200, 33, 0) 0%,
        rgba(142, 200, 33, 0.55) 50%,
        rgba(142, 200, 33, 0) 100%) !important;
    pointer-events: none !important;
}

.sp-cta::before { top: 0 !important; }
.sp-cta::after { bottom: 0 !important; }

.sp-cta > .container { position: relative !important; z-index: 2 !important; }
.sp-cta-title { font-size: 30px !important; color: #2a660b !important; margin: 0 0 12px 0 !important; line-height: 1.25 !important; }

.sp-cta-text {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: #4a6340 !important;
    line-height: 1.7 !important;
    max-width: 680px !important;
    margin: 0 auto 24px auto !important;
}

/* The hotline button now sits on a light band, so it flips to a green outline. */
.sp-cta .sp-btn-ghost {
    background: #FFFFFF !important;
    color: #2a660b !important;
    border: 1.5px solid rgba(42, 102, 11, 0.28) !important;
}

.sp-cta .sp-btn-ghost:hover { background: #2a660b !important; color: #FFFFFF !important; border-color: #2a660b !important; }

.sp-btns { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; }

.sp-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    /* min-height matches .nh-btn so the pair lines up in the CTA band. */
    min-height: 52px !important;
    padding: 0 26px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sp-btn-primary {
    background: linear-gradient(135deg, #F8992B 0%, #f07f14 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 12px 28px rgba(248, 153, 43, 0.34) !important;
}

.sp-btn-primary:hover { transform: translateY(-3px) !important; color: #FFFFFF !important; box-shadow: 0 18px 34px rgba(248, 153, 43, 0.42) !important; }

.sp-btn-ghost { background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; border: 1.5px solid rgba(255, 255, 255, 0.35) !important; }
.sp-btn-ghost:hover { background: #FFFFFF !important; color: #16527f !important; transform: translateY(-3px) !important; }

/* ---------- Pagination ---------- */
.sp-pagination { margin-top: 38px !important; display: flex !important; justify-content: center !important; }

/* ---------- Pagination (.pgn) — own markup, see partials/pagination.blade.php ---------- */
.pgn {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.pgn-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #16527f !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

a.pgn-btn:hover { border-color: #F8992B !important; color: #F8992B !important; }

.pgn-btn.is-active {
    background: #16527f !important;
    border-color: #16527f !important;
    color: #FFFFFF !important;
}

.pgn-btn.is-disabled { color: #cbd5e1 !important; background: #F8FAF9 !important; }

.pgn-dots {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    padding: 0 2px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .sp-hero { padding: 54px 0 78px 0 !important; }
    .sp-hero-title { font-size: 30px !important; }
    .sp-title, .sp-cta-title { font-size: 25px !important; }
    .sp-split { grid-template-columns: 1fr !important; gap: 26px !important; }
    .sp-split-reverse .sp-split-media { order: 0 !important; }
    .sp-contact-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .sp-post-featured { grid-column: auto !important; }
    .sp-post-featured .sp-post { flex-direction: column !important; }
    .sp-post-featured .sp-post-media { aspect-ratio: 16 / 10 !important; flex: none !important; }
    .sp-post-featured .sp-post-title { font-size: 19px !important; }
    .sp-article-image { margin-top: -50px !important; border-radius: 20px !important; }
}

@media (max-width: 549px) {
    .sp-hero-title { font-size: 25px !important; }
    .sp-section { padding: 44px 0 !important; }
    .sp-card { padding: 22px 20px !important; }
    .sp-btns { flex-direction: column !important; align-items: stretch !important; }
    .sp-btn { justify-content: center !important; }
    .sp-posts { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   SHOP / CATEGORY ARCHIVE (.shopx-*)
   ========================================================================== */

/* ---------- Layout ---------- */
.shopx-body { padding-top: 34px !important; }

.shopx-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr) !important;
    gap: 30px !important;
    align-items: start !important;
}

/* ---------- Filters ---------- */
.shopx-filter-toggle { display: none !important; }

.shopx-filter-panel {
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 22px !important;
    padding: 22px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
    position: sticky !important;
    top: 110px !important;
}

.shopx-filter-block { padding-bottom: 18px !important; margin-bottom: 18px !important; border-bottom: 1px dashed #E8EEF4 !important; }
.shopx-filter-block:last-of-type { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }

.shopx-filter-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin: 0 0 12px 0 !important;
}

.shopx-search { position: relative !important; margin: 0 !important; }

.shopx-search input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 44px 0 15px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: #16527f !important;
    background: #F8FAFC !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.shopx-search input:focus { border-color: #F8992B !important; background: #FFFFFF !important; outline: 0 !important; }

.shopx-search button {
    position: absolute !important;
    right: 5px !important; top: 5px !important;
    width: 34px !important; height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #16527f !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
    transition: background 0.25s ease !important;
}

.shopx-search button:hover { background: #F8992B !important; }

.shopx-filter-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.shopx-filter-list li { margin: 0 0 4px 0 !important; }

.shopx-filter-list a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    text-decoration: none !important;
    padding: 9px 12px !important;
    border-radius: 11px !important;
    transition: all 0.22s ease !important;
}

.shopx-filter-list a span {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    background: #F1F5F9 !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
}

.shopx-filter-list a:hover { background: #F8FAFC !important; color: #16527f !important; }

.shopx-filter-list a.is-active {
    background: rgba(248, 153, 43, 0.1) !important;
    color: #16527f !important;
    font-weight: 700 !important;
}

.shopx-filter-list a.is-active span { background: #F8992B !important; color: #FFFFFF !important; }

.shopx-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

.shopx-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #F8FAFC !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 999px !important;
    padding: 7px 13px !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
}

.shopx-chip span { font-size: 11px !important; color: #94a3b8 !important; }
.shopx-chip:hover { border-color: #F8992B !important; color: #16527f !important; }

.shopx-chip.is-active {
    background: linear-gradient(135deg, #16527f 0%, #1d6597 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.shopx-chip.is-active span { color: rgba(255, 255, 255, 0.8) !important; }

.shopx-clear {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #b20000 !important;
    text-decoration: none !important;
}

.shopx-clear:hover { color: #F8992B !important; }

.shopx-help {
    margin-top: 20px !important;
    background: linear-gradient(135deg, #16527f 0%, #0f3d61 100%) !important;
    border-radius: 18px !important;
    padding: 20px !important;
}

.shopx-help-title { font-family: 'Outfit', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #FFFFFF !important; margin: 0 0 6px 0 !important; }
.shopx-help-text { font-family: 'Dosis', 'Outfit', sans-serif !important; font-size: 14.5px !important; color: rgba(255, 255, 255, 0.8) !important; line-height: 1.6 !important; margin: 0 0 14px 0 !important; }

/* Kept as its own white pill — the sidebar sits on blue, .nh-btn is for the page CTAs. */
.shopx-help-btn {
    display: inline-block !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #16527f !important;
    background: #FFFFFF !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.shopx-help-btn:hover { background: #F8992B !important; color: #FFFFFF !important; }

/* ---------- Toolbar ---------- */
.shopx-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    background: #F8FAFC !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    margin-bottom: 20px !important;
}

.shopx-count {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.shopx-count strong { color: #16527f !important; }

.shopx-sort { display: flex !important; align-items: center !important; gap: 9px !important; margin: 0 !important; }

.shopx-sort label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

.shopx-sort select {
    height: 40px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: #16527f !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 11px !important;
    padding: 0 34px 0 13px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.shopx-sort select:focus { border-color: #F8992B !important; outline: 0 !important; }

/* ---------- Active filter chips ---------- */
.shopx-active { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 18px !important; }

.shopx-active-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #16527f !important;
    background: rgba(248, 153, 43, 0.12) !important;
    border: 1px solid rgba(248, 153, 43, 0.35) !important;
    border-radius: 999px !important;
    padding: 7px 14px !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
}

.shopx-active-chip:hover { background: #F8992B !important; color: #FFFFFF !important; }

/* ---------- Grid + empty ---------- */
.shopx-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 22px !important;
}

/* The card partial keeps Flatsome's column wrapper; neutralise it inside the grid. */
.shopx-grid > .product-small { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
.shopx-grid > .product-small > .col-inner { height: 100% !important; }

.shopx-empty {
    text-align: center !important;
    padding: 60px 20px !important;
    background: #F8FAFC !important;
    border: 1px dashed #E8EEF4 !important;
    border-radius: 22px !important;
    color: #94a3b8 !important;
}

.shopx-empty-title { font-family: 'Outfit', sans-serif !important; font-size: 19px !important; font-weight: 700 !important; color: #16527f !important; margin: 14px 0 6px 0 !important; }
.shopx-empty-text { font-family: 'Dosis', 'Outfit', sans-serif !important; font-size: 16px !important; color: #64748b !important; margin: 0 0 20px 0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .shopx-layout { grid-template-columns: 1fr !important; gap: 18px !important; }

    .shopx-filter-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100% !important;
        justify-content: center !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: #16527f !important;
        background: #FFFFFF !important;
        border: 1px solid #E8EEF4 !important;
        border-radius: 14px !important;
        padding: 13px 18px !important;
        cursor: pointer !important;
    }

    .shopx-filter-count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 20px !important; height: 20px !important;
        border-radius: 999px !important;
        background: #F8992B !important;
        color: #FFFFFF !important;
        font-size: 11px !important;
    }

    .shopx-filter-panel { display: none !important; position: static !important; margin-top: 12px !important; }
    .shopx-filters.is-open .shopx-filter-panel { display: block !important; }
}

@media (max-width: 549px) {
    .shopx-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 14px !important; }
    .shopx-toolbar { padding: 12px 14px !important; }
    .shopx-sort { width: 100% !important; }
    .shopx-sort select { flex: 1 1 auto !important; }
}

/* ==========================================================================
   FOOTER (.ftr-*)
   ========================================================================== */
/* Green footer: three white waves at the top flow out of the page, then the lime
   gradient deepens all the way down — the look the client asked for. */
.ftr {
    position: relative !important;
    margin-top: 0 !important;
    background: linear-gradient(180deg,
        #eef8d2 0%,
        #cdea6a 7%,
        #8ec821 17%,
        #5aa016 34%,
        #3d7d10 58%,
        #2a660b 80%,
        #1f5607 100%) !important;
}

.ftr-waves {
    position: relative !important;
    height: 140px !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* The paths are already drawn fill-on-top, so they must NOT be flipped vertically —
   only mirrored horizontally for variety. Shortest and solid sits in front. */
.ftr-wave {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    display: block !important;
    color: #FFFFFF !important;
}

.ftr-wave-back { height: 140px !important; opacity: 0.28 !important; transform: scaleX(-1) !important; }
.ftr-wave-mid { height: 112px !important; opacity: 0.5 !important; }
.ftr-wave-front { height: 82px !important; opacity: 1 !important; }

.ftr-main {
    background: transparent !important;
    padding: 30px 0 46px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.ftr-main > .container { position: relative !important; z-index: 2 !important; }

.ftr-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) !important;
    gap: 40px !important;
}

.ftr-logo { max-width: 168px !important; height: auto !important; margin-bottom: 16px !important; }

.ftr-slogan {
    font-family: 'Dancing Script', cursive, serif !important;
    font-style: italic !important;
    font-size: 21px !important;
    color: #FFC680 !important;
    margin: 0 0 10px 0 !important;
}

.ftr-about {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 15.5px !important;
    color: rgba(255, 255, 255, 0.76) !important;
    line-height: 1.75 !important;
    margin: 0 0 16px 0 !important;
    max-width: 420px !important;
}

.ftr-certs { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }

.ftr-cert {
    font-family: 'Outfit', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
}

.ftr-socials { display: flex !important; gap: 9px !important; margin-top: 16px !important; }

.ftr-socials a {
    width: 38px !important; height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    transition: all 0.25s ease !important;
}

.ftr-socials a:hover { background: #F8992B !important; border-color: #F8992B !important; transform: translateY(-3px) !important; }

.ftr-title {
    font-size: 16px !important;
    color: #FFFFFF !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 10px !important;
    position: relative !important;
}

.ftr-title::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; bottom: 0 !important;
    width: 34px !important; height: 3px !important;
    border-radius: 3px !important;
    background: #F8992B !important;
}

.ftr-links, .ftr-contact { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ftr-links li { margin-bottom: 9px !important; }

.ftr-links a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none !important;
    transition: color 0.22s ease, padding-left 0.22s ease !important;
    display: inline-block !important;
}

.ftr-links a:hover { color: #F8992B !important; padding-left: 5px !important; }

.ftr-contact li {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
}

.ftr-contact .sl-icon { color: #F8992B !important; flex: 0 0 auto !important; margin-top: 3px !important; }
.ftr-contact a { color: rgba(255, 255, 255, 0.9) !important; text-decoration: none !important; }
.ftr-contact a:hover { color: #F8992B !important; }

/* Shape comes from .nh-btn; the footer only adds spacing. */
.ftr-cta { margin-top: 14px !important; }

.ftr-bottom { background: rgba(16, 46, 4, 0.55) !important; padding: 16px 0 !important; }

.ftr-bottom-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.ftr-copy {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
}

.ftr-copy a { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; }
.ftr-copy a:hover { color: #F8992B !important; }

.ftr-policies { list-style: none !important; display: flex !important; flex-wrap: wrap !important; gap: 6px 18px !important; margin: 0 !important; padding: 0 !important; }

.ftr-policies a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
}

.ftr-policies a:hover { color: #F8992B !important; }

@media (max-width: 991px) {
    .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px !important; }
    .ftr-bottom-row { justify-content: center !important; text-align: center !important; }
    .ftr-policies { justify-content: center !important; }
}

@media (max-width: 549px) {
    .ftr-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
    .ftr-main { padding: 40px 0 34px 0 !important; }
}

/* ==========================================================================
   CONTACT BUTTON (.nh-btn) — one shape for every "liên hệ / báo giá" action:
   white icon plate with a right-pointing notch + uppercase label on orange.
   Flat by request: no shadow, no lift, no transition.
   ========================================================================== */
.nh-btn {
    display: inline-flex !important;
    align-items: stretch !important;
    min-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #F8992B !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    transform: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    max-width: 100% !important;
}

.nh-btn:hover, .nh-btn:focus, .nh-btn:active {
    background: #e5851b !important;
    box-shadow: none !important;
    transform: none !important;
    color: #FFFFFF !important;
}

.nh-btn-ico {
    flex: 0 0 auto !important;
    width: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFFFFF !important;
    color: #F8992B !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%) !important;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%) !important;
}

.nh-btn-ico svg { width: 21px !important; height: 21px !important; margin-right: 8px !important; }

.nh-btn-label {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 26px 0 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
}

/* Full-width variants (sidebar help card, footer column, forms). */
.nh-btn-block { display: flex !important; width: 100% !important; }

.nh-btn[disabled], .nh-btn.is-loading { opacity: 0.65 !important; pointer-events: none !important; }

@media (max-width: 549px) {
    .nh-btn { min-height: 48px !important; }
    .nh-btn-ico { width: 46px !important; }
    .nh-btn-label {
        font-size: 12.5px !important;
        padding: 0 16px 0 10px !important;
        letter-spacing: 0.05em !important;
        /* Long labels (the two-number hotline) wrap instead of overflowing. */
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.35 !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
}

/* The inquiry forms keep .btn-solid-modern as the JS loading hook; .nh-btn owns the look. */
.nh-btn.btn-solid-modern { height: auto !important; gap: 0 !important; padding: 0 !important; border-radius: 12px !important; }
.nh-btn .btn-spinner { border-top-color: #F8992B !important; border-color: rgba(248, 153, 43, 0.35) !important; }

/* ==========================================================================
   HOME — FEATURED PRODUCTS (.hf-*), partials/home-featured.blade.php
   Pattern-tinted band between two white waves, holding a 4-up .pcard grid.
   ========================================================================== */
.hf {
    position: relative !important;
    background: #F8FAF9 !important;
    overflow: hidden !important;
}

.hf-bg {
    position: absolute !important;
    inset: 0 !important;
    background-repeat: repeat !important;
    background-size: 520px auto !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.hf-wave {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    line-height: 0 !important;
    color: #FFFFFF !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.hf-wave svg { width: 100% !important; height: 58px !important; display: block !important; }

/* Fill sits on the path's bottom edge: flip it for the top divider only. */
.hf-wave-top { top: -1px !important; }
.hf-wave-top svg { transform: scaleY(-1) !important; }
.hf-wave-bottom { bottom: -1px !important; }

.hf-inner { position: relative !important; z-index: 3 !important; padding: 92px 0 96px 0 !important; }

.hf-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

/* The card partial keeps Flatsome's column wrapper; neutralise it inside the grid. */
.hf-grid .product-small { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
.hf-grid .product-small > .col-inner { height: 100% !important; }

.hf-more { margin-top: 34px !important; }

@media (max-width: 1099px) {
    .hf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 849px) {
    .hf-inner { padding: 74px 0 78px 0 !important; }
    .hf-wave svg { height: 44px !important; }
    .hf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 549px) {
    .hf-grid { gap: 14px !important; }
}


/* ---------- Home product tabs ---------- */
.hf-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 0 30px 0 !important;
}

.hf-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #16527f !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 999px !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    line-height: 1 !important;
}

.hf-tab span {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    background: #F1F5F9 !important;
    border-radius: 999px !important;
    padding: 3px 8px !important;
}

.hf-tab:hover { border-color: #F8992B !important; color: #F8992B !important; background: #FFFFFF !important; }

.hf-tab.is-active {
    background: #16527f !important;
    border-color: #16527f !important;
    color: #FFFFFF !important;
}

.hf-tab.is-active span { background: rgba(255, 255, 255, 0.18) !important; color: #FFFFFF !important; }

.hf-cell { display: block !important; height: 100% !important; }
.hf-cell.is-hidden { display: none !important; }

/* ==========================================================================
   HOME — NEWS BAND (.hn-*), partials/home-news.blade.php
   Replaces the imported "bánh kem" demo block (pancake photos, dead links).
   ========================================================================== */
.hn {
    position: relative !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
}

.hn-inner { position: relative !important; z-index: 2 !important; padding: 72px 0 84px 0 !important; }

/* The two hand-cut dish photos, facing each other across the band. */
.hn-deco {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 290px !important;
    height: 290px !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    filter: drop-shadow(0 16px 26px rgba(15, 23, 42, 0.14)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.hn-deco-left { left: 0 !important; background-image: url('../../wp-content/uploads/2025/08/catalog/deco-goi-tom-hoa.webp') !important; }
.hn-deco-right { right: 0 !important; background-image: url('../../wp-content/uploads/2025/08/catalog/deco-banh-phong-chien.webp') !important; }

.hn-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

.hn-card {
    display: flex !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.hn-card { flex-direction: column !important; }

.hn-media {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: linear-gradient(160deg, #FBFCFC 0%, #EDF4F9 100%) !important;
}

.hn-media { aspect-ratio: 16 / 10 !important; }
.hn-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

.hn-cat {
    position: absolute !important;
    left: 14px !important; bottom: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    background: #F8992B !important;
    border-radius: 999px !important;
    padding: 6px 13px !important;
}

.hn-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 16px 18px 18px 18px !important; }

.hn-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    margin-bottom: 8px !important;
}

.hn-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.hn-card:hover .hn-title { color: #F8992B !important; }

.hn-text {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 15.5px !important;
    color: #55647a !important;
    line-height: 1.65 !important;
    margin: 0 0 14px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.hn-more {
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #16527f !important;
    padding-top: 12px !important;
    border-top: 1px dashed #E8EEF4 !important;
}

.hn-card:hover .hn-more { color: #F8992B !important; }



.hn-cat-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #F8992B !important;
    margin-bottom: 5px !important;
}

.hn-cta { margin-top: 34px !important; }

@media (max-width: 1439px) {
    .hn-deco { width: 210px !important; height: 210px !important; }
}

@media (max-width: 1199px) {
    .hn-deco { display: none !important; }
}

@media (max-width: 1099px) {
    .hn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 849px) {
    .hn-inner { padding: 58px 0 66px 0 !important; }
}

@media (max-width: 549px) {
    .hn-grid { grid-template-columns: 1fr !important; }
    .hn-title { font-size: 17px !important; }
}

/* ==========================================================================
   EDITORIAL POST CARDS
   Homepage news, archive cards, and related posts share the same food-led
   treatment: an image, a category badge, and a quiet editorial body.
   ========================================================================== */
.hn-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: start !important;
}

.hn-list {
    display: contents !important;
}

.hn-card,
.sp-post {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(20, 64, 109, 0.1) !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: none !important;
}

/* Only the news card carries a shadow; the post card is flat by request. */
.hn-card { box-shadow: 0 18px 36px rgba(25, 47, 73, 0.1) !important; }
.sp-post { box-shadow: none !important; }

.hn-card::after,
.sp-post::after {
    position: absolute !important;
    z-index: 0 !important;
    right: -4px !important;
    bottom: -8px !important;
    width: 142px !important;
    height: 154px !important;
    content: '' !important;
    background: url('../../wp-content/uploads/2025/08/post-card-shrimp.png') right bottom / contain no-repeat !important;
    pointer-events: none !important;
}

/* The news card keeps its lift shadow; the post card is flat by request. */
.hn-card:hover {
    box-shadow: 0 18px 36px rgba(25, 47, 73, 0.1) !important;
}

.hn-card:hover,
.sp-post:hover {
    transform: none !important;
    border-color: rgba(248, 153, 43, 0.42) !important;
}

.hn-card-lead,
.hn-card-row,
.sp-post-featured .sp-post {
    flex-direction: column !important;
}

.hn-media,
.hn-card-lead .hn-media,
.hn-card-row .hn-media,
.sp-post-media,
.sp-post-featured .sp-post-media {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    background: #F6F7F5 !important;
}

.hn-media img,
.sp-post-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.35s ease !important;
}

.hn-card:hover .hn-media img,
.sp-post:hover .sp-post-media img {
    transform: scale(1.05) !important;
}

.hn-cat,
.sp-post-chip {
    position: absolute !important;
    z-index: 2 !important;
    top: 24px !important;
    left: 24px !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 17px !important;
    color: #FFFFFF !important;
    background: #F8992B !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(225, 125, 23, 0.2) !important;
    font-family: 'Phudu', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    backdrop-filter: none !important;
}

.hn-cat-icon,
.sp-post-chip-icon {
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.hn-cat-icon--export,
.sp-post-chip-icon--export {
    fill: currentColor !important;
    stroke: none !important;
    stroke-width: 0 !important;
}

.hn-body,
.hn-card-row .hn-body,
.sp-post-body {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 21px 28px 23px !important;
    justify-content: flex-start !important;
}

.hn-date,
.hn-card-row .hn-date,
.sp-post-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 10px !important;
    color: #73819a !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

.hn-date-icon,
.sp-post-date-icon {
    display: block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: #F8992B !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.hn-title,
.hn-card-row .hn-title,
.sp-post-title,
.sp-post-featured .sp-post-title {
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 13px !important;
    overflow: visible !important;
    color: #0D3B70 !important;
    font-family: 'Phudu', sans-serif !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

/* Clamp the text, not the heading: the orange ::after bar must stay outside the
   -webkit-box or it counts as a line and gets cut off. */
.hn-title > span,
.sp-post-title > span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.hn-title::after,
.sp-post-title::after {
    display: block !important;
    width: 52px !important;
    height: 4px !important;
    margin-top: 12px !important;
    content: '' !important;
    background: #F8992B !important;
    border-radius: 999px !important;
}

.hn-text,
.sp-post-excerpt,
.sp-post-featured .sp-post-excerpt {
    position: relative !important;
    z-index: 1 !important;
    display: -webkit-box !important;
    margin: 0 0 14px !important;
    overflow: hidden !important;
    color: #6D7C95 !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.58 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.hn-more,
.sp-post-more {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 14px !important;
    color: #0D3B70 !important;
    border-top: 1px dashed #D8E0E8 !important;
    font-family: 'Phudu', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease !important;
}

.hn-more svg,
.sp-post-more svg {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    margin-left: 2px !important;
    padding: 8px !important;
    overflow: visible !important;
    fill: none !important;
    stroke: #F8992B !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    border: 1.5px solid rgba(248, 153, 43, 0.58) !important;
    border-radius: 50% !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.hn-card:hover .hn-title,
.sp-post:hover .sp-post-title,
.hn-card:hover .hn-more,
.sp-post:hover .sp-post-more {
    color: #0D3B70 !important;
}

.hn-card:hover .hn-more svg,
.sp-post:hover .sp-post-more svg {
    background: transparent !important;
    transform: none !important;
}

.sp-posts {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
}

.sp-post-featured {
    grid-column: auto !important;
}

@media (max-width: 1399px) {
    .hn-grid,
    .sp-posts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 1099px) {
    .hn-grid,
    .sp-posts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 849px) {
    .hn-grid,
    .sp-posts { grid-template-columns: 1fr !important; }
    .hn-card,
    .sp-post { min-height: 0 !important; }
}

@media (max-width: 549px) {
    .hn-card,
    .sp-post { border-radius: 24px !important; }
    .hn-media,
    .hn-card-lead .hn-media,
    .hn-card-row .hn-media,
    .sp-post-media,
    .sp-post-featured .sp-post-media { aspect-ratio: 16 / 10 !important; }
    .hn-cat,
    .sp-post-chip { top: 16px !important; left: 16px !important; padding: 9px 13px !important; font-size: 11px !important; }
    .hn-body,
    .hn-card-row .hn-body,
    .sp-post-body { padding: 22px 23px 24px !important; }
    .hn-title,
    .hn-card-row .hn-title,
    .sp-post-title,
    .sp-post-featured .sp-post-title { min-height: 0 !important; font-size: 20px !important; }
    .hn-text,
    .sp-post-excerpt { font-size: 16px !important; }
    .hn-card::after,
    .sp-post::after { width: 112px !important; height: 122px !important; }
}

/* ==========================================================================
   RECIPE BODY (.rec-*) — Góc ẩm thực posts, written by nguyenhau:import-culinary.
   Lives inside .sp-prose, so it only styles the pieces the prose rules don't.
   ========================================================================== */
.rec { margin: 0 !important; }

.sp-prose .rec-intro {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 17px !important;
    color: #40506a !important;
    line-height: 1.8 !important;
    margin: 0 0 16px 0 !important;
}

.rec-cols {
    display: grid !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    gap: 20px !important;
    margin: 30px 0 !important;
    align-items: start !important;
}

.rec-card {
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 20px !important;
    padding: 24px 24px 26px 24px !important;
}

.rec-ingredients { background: #F8FAF9 !important; }

.sp-prose .rec-card-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin: 0 0 14px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px dashed #E1E9F0 !important;
    line-height: 1.35 !important;
}

.rec-card-title span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
}

.sp-prose .rec-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }

.sp-prose .rec-list li {
    position: relative !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    color: #40506a !important;
    line-height: 1.6 !important;
    padding: 0 0 0 24px !important;
    margin: 0 0 10px 0 !important;
}

.sp-prose .rec-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 9px !important;
    width: 8px !important; height: 8px !important;
    border-radius: 50% !important;
    background: #F8992B !important;
}

.sp-prose .rec-step-list { list-style: none !important; margin: 0 !important; padding: 0 !important; counter-reset: none !important; }

.sp-prose .rec-step {
    display: flex !important;
    gap: 14px !important;
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
}

.sp-prose .rec-step:last-child { padding-bottom: 0 !important; }

.rec-step-no {
    flex: 0 0 auto !important;
    width: 30px !important; height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #F8992B 0%, #f07f14 100%) !important;
    border-radius: 50% !important;
}

.rec-step-body { min-width: 0 !important; }

/* A recipe with one action reads as an instruction rather than a numbered sequence. */
.sp-prose .rec-step:only-child { gap: 0 !important; }

.sp-prose .rec-step:only-child .rec-step-no { display: none !important; }

.sp-prose .rec-step:only-child .rec-step-body {
    padding-left: 14px !important;
    border-left: 3px solid #F8992B !important;
}

.sp-prose .rec-step-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin: 4px 0 4px 0 !important;
}

.sp-prose .rec-step:only-child .rec-step-title { margin-top: 0 !important; }

.sp-prose .rec-step-text {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    color: #55647a !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.rec-figure { margin: 26px 0 !important; }

.rec-figure img {
    display: block !important;
    width: 100% !important;
    border-radius: 20px !important;
    border: 6px solid #FFFFFF !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
}

.rec-figure figcaption {
    font-family: 'Dancing Script', cursive, serif !important;
    font-style: italic !important;
    font-size: 19px !important;
    color: #F8992B !important;
    text-align: center !important;
    margin-top: 12px !important;
}

.sp-prose .rec-note {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: #40506a !important;
    line-height: 1.75 !important;
    background: #F8FAF9 !important;
    border-left: 4px solid #F8992B !important;
    border-radius: 0 14px 14px 0 !important;
    padding: 16px 20px !important;
    margin: 24px 0 !important;
}

.rec-vegan {
    background: linear-gradient(135deg, rgba(22, 82, 127, 0.05) 0%, rgba(248, 153, 43, 0.07) 100%) !important;
    border: 1px solid #E1E9F0 !important;
    border-radius: 22px !important;
    padding: 26px 26px 10px 26px !important;
    margin: 30px 0 0 0 !important;
}

.sp-prose .rec-vegan-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin: 0 0 10px 0 !important;
}

.sp-prose .rec-vegan p {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16.5px !important;
    color: #40506a !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

.rec-vegan .rec-figure { margin: 20px 0 22px 0 !important; }

@media (max-width: 849px) {
    .rec-cols { grid-template-columns: 1fr !important; gap: 16px !important; }
    .rec-card { padding: 20px !important; }
    .rec-vegan { padding: 22px 20px 8px 20px !important; }
}

/* ==========================================================================
   MARKET POSTS (.mkt-*) — written by nguyenhau:import-markets.
   The brief pasted a screenshot of the export country table; this rebuilds it
   with local flag SVGs so it stays sharp, responsive and translatable.
   ========================================================================== */
.mkt-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 26px 0 30px 0 !important;
}

.mkt-stat {
    text-align: center !important;
    background: linear-gradient(135deg, #16527f 0%, #0f3d61 100%) !important;
    border-radius: 18px !important;
    padding: 20px 14px !important;
}

.mkt-stat strong {
    display: block !important;
    font-family: 'Phudu', 'Outfit', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.1 !important;
}

.mkt-stat span {
    display: block !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin-top: 5px !important;
}

.mkt-groups { display: flex !important; flex-direction: column !important; gap: 18px !important; }

.mkt-group {
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 20px !important;
    padding: 20px 22px 22px 22px !important;
}

.sp-prose .mkt-group-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin: 0 0 14px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px dashed #E1E9F0 !important;
}

.mkt-group-title span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #F8992B !important;
    background: rgba(248, 153, 43, 0.1) !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
}

.sp-prose .mkt-flags {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 10px !important;
}

.sp-prose .mkt-flag {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    background: #F8FAF9 !important;
    border: 1px solid #EDF2F7 !important;
    border-radius: 12px !important;
}

.sp-prose .mkt-flag::before { content: none !important; }

.mkt-flag img {
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 20px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2) !important;
}

.mkt-flag span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.3 !important;
}

.mkt-certs { margin-top: 28px !important; text-align: center !important; }

.sp-prose .mkt-certs-label {
    font-family: 'Dancing Script', cursive, serif !important;
    font-style: italic !important;
    font-size: 20px !important;
    color: #F8992B !important;
    margin: 0 0 12px 0 !important;
}

.mkt-certs-row { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; }

.mkt-cert {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: #16527f !important;
    background: rgba(22, 82, 127, 0.07) !important;
    border: 1px solid rgba(22, 82, 127, 0.14) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
}

/* ---------- Domestic market ---------- */
.mkt-domestic {
    display: grid !important;
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: center !important;
    margin: 28px 0 !important;
}

.mkt-map {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F8FAF9 !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 20px !important;
    padding: 18px !important;
}

/* Never upscale: the client's map is a 156px-wide graphic. */
.mkt-map img { width: 156px !important; max-width: 100% !important; height: auto !important; }

.mkt-regions { display: flex !important; flex-direction: column !important; gap: 12px !important; }

.mkt-region {
    position: relative !important;
    background: #FFFFFF !important;
    border: 1px solid #E8EEF4 !important;
    border-left: 4px solid #F8992B !important;
    border-radius: 0 16px 16px 0 !important;
    padding: 15px 18px !important;
}

.sp-prose .mkt-region-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    margin: 0 0 4px 0 !important;
}

.sp-prose .mkt-region p {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 15.5px !important;
    color: #55647a !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.mkt-card {
    background: #F8FAF9 !important;
    border: 1px solid #E8EEF4 !important;
    border-radius: 20px !important;
    padding: 22px 24px 24px 24px !important;
}

.sp-prose .mkt-channels {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 0 18px !important;
}

@media (max-width: 849px) {
    .mkt-stats { grid-template-columns: 1fr !important; }
    .mkt-domestic { grid-template-columns: 1fr !important; }
    .mkt-map { padding: 14px !important; }
}

/* ---------- Floating-label select (contact form "Quốc gia") ----------
   A <select> always has a value, so the floating trick can't work: pin the
   label above the field and leave room for it. */
.floating-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 38px !important;
    cursor: pointer !important;
}

.floating-select-group { position: relative !important; }

.floating-select-group::after {
    content: '' !important;
    position: absolute !important;
    right: 16px !important;
    top: 21px !important;
    width: 8px !important; height: 8px !important;
    border-right: 2px solid #94a3b8 !important;
    border-bottom: 2px solid #94a3b8 !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
}

.floating-label.is-static {
    top: -6px !important;
    transform: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: #FFFFFF !important;
    z-index: 5 !important;
}

.floating-select:focus ~ .floating-label.is-static { color: #F8992B !important; }

/* ==========================================================================
   FLOATING CONTACT BUTTONS (.fbtn-*)
   Configured in admin Settings → "Nút liên hệ nổi"; each row carries its brand
   colour through the --fbtn-color custom property.
   ========================================================================== */
.fbtn {
    position: fixed !important;
    right: 16px !important;
    bottom: 84px !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.fbtn-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 48px !important;
    width: 48px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--fbtn-color, #16527f) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22) !important;
    transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fbtn-icon {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
}

.fbtn-label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    color: #FFFFFF !important;
    padding: 0 56px 0 18px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

/* Expand on hover / keyboard focus; the icon stays pinned to the right. */
.fbtn-item:hover,
.fbtn-item:focus-visible {
    width: auto !important;
    color: #FFFFFF !important;
}

.fbtn-item:hover .fbtn-label,
.fbtn-item:focus-visible .fbtn-label { opacity: 1 !important; }

/* Gentle pulse on the call/chat actions so they read as the primary contact. */
.fbtn-phone::before,
.fbtn-zalo::before {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    border: 2px solid var(--fbtn-color, #16527f) !important;
    animation: fbtn-pulse 2.2s ease-out infinite !important;
    pointer-events: none !important;
}

@keyframes fbtn-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fbtn-phone::before, .fbtn-zalo::before { animation: none !important; }
    .fbtn-item { transition: none !important; }
}

@media (max-width: 549px) {
    .fbtn { right: 12px !important; bottom: 74px !important; gap: 8px !important; }
    .fbtn-item, .fbtn-icon { width: 44px !important; height: 44px !important; }
    .fbtn-phone::before, .fbtn-zalo::before { width: 44px !important; height: 44px !important; }
    .fbtn-label { display: none !important; }
}

/* ==========================================================================
   HEADER SEARCH OVERLAY (.hsearch-*) — suggestions link to the product page.
   ========================================================================== */
.hsearch {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 90px 18px 18px 18px !important;
}

.hsearch[hidden] { display: none !important; }

body.hsearch-open { overflow: hidden !important; }

.hsearch-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(11, 34, 54, 0.55) !important;
    backdrop-filter: blur(3px) !important;
}

.hsearch-panel {
    position: relative !important;
    width: 100% !important;
    max-width: 620px !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.28) !important;
    overflow: hidden !important;
}

.hsearch-form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #E8EEF4 !important;
    margin: 0 !important;
}

.hsearch-icon { color: #94a3b8 !important; display: inline-flex !important; }

.hsearch-input {
    flex: 1 1 auto !important;
    height: 42px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    color: #16527f !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
}

.hsearch-input::-webkit-search-cancel-button { display: none !important; }

.hsearch-close {
    flex: 0 0 auto !important;
    width: 34px !important; height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.hsearch-results { max-height: min(60vh, 420px) !important; overflow-y: auto !important; }

.hsearch-hint {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 15px !important;
    color: #94a3b8 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 26px 20px !important;
}

.hsearch-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 11px 16px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.hsearch-item:hover { background: #F8FAF9 !important; }

.hsearch-thumb {
    flex: 0 0 auto !important;
    width: 48px !important; height: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(160deg, #FBFCFC 0%, #EDF4F9 100%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.hsearch-thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 4px !important; }

.hsearch-text { display: flex !important; flex-direction: column !important; min-width: 0 !important; }

.hsearch-text strong {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #16527f !important;
    line-height: 1.35 !important;
}

.hsearch-item:hover .hsearch-text strong { color: #F8992B !important; }

.hsearch-text small {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

.hsearch-all {
    display: block !important;
    text-align: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #16527f !important;
    background: #F8FAF9 !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
}

.hsearch-all:hover { color: #F8992B !important; }

@media (max-width: 549px) {
    .hsearch { padding: 70px 12px 12px 12px !important; }
    .hsearch-thumb { width: 42px !important; height: 42px !important; }
}

/* ---------- About: long brief copy beside a sticky photo ----------
   The verbatim "Tổng quan" text is far taller than the factory photo, so the media
   column keeps the photo and the certificates together and follows the reader. */
.sp-split-about { align-items: start !important; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important; }

.sp-split-aside {
    position: sticky !important;
    top: 96px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.sp-split-about .sp-split-media { aspect-ratio: 3 / 2 !important; }
.sp-split-about .sp-prose p:first-child { margin-top: 0 !important; }

@media (max-width: 991px) {
    .sp-split-about { grid-template-columns: 1fr !important; }
    .sp-split-aside { position: static !important; }
}

/* ==========================================================================
   ABOUT PAGE — company profile refresh
   The shared hero and CTA stay untouched; these rules only shape the page body.
   ========================================================================== */
.page-about .nh-about-intro,
.page-about .nh-about-direction {
    padding: 88px 0 !important;
    background: #FFFFFF !important;
}

.page-about .nh-about-intro-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    gap: 64px !important;
    align-items: center !important;
}

.page-about .nh-about-image-wrap {
    position: relative !important;
    padding: 0 32px 32px 0 !important;
}

.page-about .nh-about-image-wrap::before {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 71% !important;
    height: 73% !important;
    background: #EAF4DC !important;
    border: 1px solid #D3E7B5 !important;
    border-radius: 6px !important;
}

.page-about .nh-about-image-frame {
    position: relative !important;
    z-index: 1 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #EAF1F5 !important;
}

.page-about .nh-about-image-frame img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.page-about .nh-about-brand-seal {
    position: absolute !important;
    z-index: 2 !important;
    left: 26px !important;
    bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: 9px 16px 9px 9px !important;
    color: #16527F !important;
    background: #FFFFFF !important;
    border: 1px solid #E6EEF3 !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 26px rgba(15, 54, 83, 0.14) !important;
}

.page-about .nh-about-brand-seal img {
    display: block !important;
    width: 43px !important;
    height: 43px !important;
    object-fit: contain !important;
}

.page-about .nh-about-brand-seal span,
.page-about .nh-about-profile-label,
.page-about .nh-about-purpose > p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.page-about .nh-about-eyebrow {
    font-family: 'Dancing Script', cursive, serif !important;
    font-size: 23px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #F8992B !important;
    margin: 0 0 10px 0 !important;
}

.page-about .nh-about-intro-copy h2,
.page-about .nh-about-quality h2,
.page-about .nh-about-direction h2 {
    font-family: 'Phudu', sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

.page-about .nh-about-intro-copy h2,
.page-about .nh-about-direction h2 { color: #16527F !important; }

.page-about .nh-about-copy { margin-top: 22px !important; }

.page-about .nh-about-copy p {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.72 !important;
    color: #52647A !important;
    margin: 0 0 15px 0 !important;
}

.page-about .nh-about-copy p:last-child { margin-bottom: 0 !important; }

.page-about .nh-about-cert-note {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 26px !important;
    padding-top: 18px !important;
    border-top: 1px solid #DFEAEF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: #285B76 !important;
}

.page-about .nh-about-cert-note i {
    flex: 0 0 auto !important;
    font-size: 22px !important;
    color: #65A416 !important;
}

.page-about .nh-about-overview-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr) !important;
    gap: 64px !important;
    align-items: start !important;
    margin-top: 94px !important;
    padding-top: 82px !important;
    border-top: 1px solid #E3EDF0 !important;
}

.page-about .nh-about-story h3 {
    max-width: 640px !important;
    font-family: 'Phudu', sans-serif !important;
    font-size: 29px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    color: #16527F !important;
    margin: 0 !important;
}

.page-about .nh-about-profile {
    padding: 27px 28px 8px 28px !important;
    background: #F7FAF5 !important;
    border: 1px solid #DBE9D0 !important;
    border-top: 4px solid #65A416 !important;
    border-radius: 6px !important;
}

.page-about .nh-about-profile-label {
    color: #4D8613 !important;
    margin: 0 0 15px 0 !important;
}

.page-about .nh-about-profile dl {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    margin: 0 !important;
}

.page-about .nh-about-profile-item {
    min-width: 0 !important;
    padding: 15px 0 17px 0 !important;
    border-top: 1px solid #DCE9D5 !important;
}

.page-about .nh-about-profile-item dt {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #76906C !important;
}

.page-about .nh-about-profile-item dt i {
    flex: 0 0 auto !important;
    font-size: 16px !important;
    color: #65A416 !important;
}

.page-about .nh-about-profile-item dd {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.52 !important;
    color: #16527F !important;
    margin: 7px 0 0 0 !important;
    overflow-wrap: anywhere !important;
}

.page-about .nh-about-profile-item dd a { color: inherit !important; text-decoration: none !important; }
.page-about .nh-about-profile-item dd a:hover { color: #F8992B !important; }

.page-about .nh-about-quality {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
    padding: 82px 0 !important;
    color: #FFFFFF !important;
    background-color: #124D72 !important;
    background-image:
        linear-gradient(108deg, rgba(6, 53, 80, 0.95) 0%, rgba(10, 68, 96, 0.90) 56%, rgba(8, 59, 87, 0.84) 100%),
        url('/wp-content/uploads/2025/08/catalog/hinh-cty-final.jpg') !important;
    background-position: center, center !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: scroll, fixed !important;
}

.page-about .nh-about-quality::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 32% !important;
    height: 4px !important;
    background: #9DCF37 !important;
    z-index: 2 !important;
}

.page-about .nh-about-quality > .container {
    position: relative !important;
    z-index: 1 !important;
}

.page-about .nh-about-quality-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
    gap: 72px !important;
    align-items: start !important;
}

.page-about .nh-about-quality-title {
    position: sticky !important;
    top: 106px !important;
    z-index: 2 !important;
    align-self: start !important;
}

.page-about .nh-about-quality .nh-about-eyebrow { color: #F9B55E !important; }
.page-about .nh-about-quality h2 { color: #FFFFFF !important; }

.page-about .nh-about-quality-copy { margin-top: 0 !important; }

.page-about .nh-about-quality-copy p {
    font-size: 19px !important;
    color: #DCEAF1 !important;
}

.page-about .nh-about-standards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 46px 0 0 0 !important;
    list-style: none !important;
}

.page-about .nh-about-standard {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 62px !important;
    padding: 12px 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    border-radius: 6px !important;
}

.page-about .nh-about-standard i { flex: 0 0 auto !important; font-size: 18px !important; color: #B6DB69 !important; }

.page-about .nh-about-direction-head {
    max-width: 680px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.page-about .nh-about-purpose-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 42px !important;
}

.page-about .nh-about-purpose {
    min-height: 328px !important;
    padding: 36px 38px !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
}

.page-about .nh-about-purpose--vision {
    background: #F2F8EB !important;
    border-color: #D5E6C2 !important;
}

.page-about .nh-about-purpose--mission {
    background: #FFF6EA !important;
    border-color: #F4DDBA !important;
}

.page-about .nh-about-purpose-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 25px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
}

.page-about .nh-about-purpose--vision .nh-about-purpose-icon { color: #4C8715 !important; background: #DDEFC8 !important; }
.page-about .nh-about-purpose--mission .nh-about-purpose-icon { color: #D46F13 !important; background: #FBE0B8 !important; }

.page-about .nh-about-purpose > p { margin: 0 0 8px 0 !important; }
.page-about .nh-about-purpose--vision > p { color: #5E8F2C !important; }
.page-about .nh-about-purpose--mission > p { color: #D67A25 !important; }

.page-about .nh-about-purpose h3 {
    font-family: 'Phudu', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.34 !important;
    color: #16527F !important;
    margin: 0 0 14px 0 !important;
}

.page-about .nh-about-purpose > div {
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    color: #53677D !important;
}

.page-about .nh-about-values {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 24px 0 0 0 !important;
    margin: 18px 0 0 0 !important;
    list-style: none !important;
    border-top: 1px solid #DDE8EC !important;
}

.page-about .nh-about-values li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 0 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    color: #285B76 !important;
    border-right: 1px solid #DDE8EC !important;
}

.page-about .nh-about-values li:last-child { border-right: 0 !important; }
.page-about .nh-about-values i { flex: 0 0 auto !important; font-size: 19px !important; color: #F8992B !important; }

@media (max-width: 991px) {
    .page-about .nh-about-intro,
    .page-about .nh-about-direction { padding: 70px 0 !important; }
    .page-about .nh-about-intro-grid,
    .page-about .nh-about-overview-grid,
    .page-about .nh-about-quality-grid { grid-template-columns: 1fr !important; gap: 42px !important; }
    .page-about .nh-about-image-wrap { max-width: 720px !important; }
    .page-about .nh-about-overview-grid { margin-top: 70px !important; padding-top: 62px !important; }
    .page-about .nh-about-quality { padding: 70px 0 !important; }
    .page-about .nh-about-quality-title {
        top: 76px !important;
        width: 100% !important;
        padding: 12px 0 !important;
        background: #073752 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 10px 18px rgba(4, 36, 54, 0.22) !important;
    }
    .page-about .nh-about-standards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 649px) {
    .page-about .nh-about-intro,
    .page-about .nh-about-direction,
    .page-about .nh-about-quality { padding: 58px 0 !important; }
    .page-about .nh-about-image-wrap { padding: 0 17px 24px 0 !important; }
    .page-about .nh-about-brand-seal { left: 14px !important; bottom: 0 !important; min-height: 53px !important; padding: 6px 10px 6px 6px !important; }
    .page-about .nh-about-brand-seal img { width: 35px !important; height: 35px !important; }
    .page-about .nh-about-brand-seal span { font-size: 9px !important; }
    .page-about .nh-about-eyebrow { font-size: 20px !important; }
    .page-about .nh-about-intro-copy h2,
    .page-about .nh-about-quality h2,
    .page-about .nh-about-direction h2 { font-size: 30px !important; }
    .page-about .nh-about-copy { margin-top: 17px !important; }
    .page-about .nh-about-copy p { font-size: 17px !important; }
    .page-about .nh-about-cert-note { margin-top: 21px !important; }
    .page-about .nh-about-overview-grid { margin-top: 56px !important; padding-top: 50px !important; gap: 34px !important; }
    .page-about .nh-about-story h3 { font-size: 25px !important; }
    .page-about .nh-about-profile { padding: 22px 20px 5px 20px !important; }
    .page-about .nh-about-profile dl { grid-template-columns: 1fr !important; }
    .page-about .nh-about-quality-grid { gap: 28px !important; }
    .page-about .nh-about-quality-title { top: 54px !important; padding: 10px 0 !important; }
    .page-about .nh-about-quality-copy p { font-size: 17px !important; }
    .page-about .nh-about-standards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 30px !important; }
    .page-about .nh-about-standard { min-height: 56px !important; font-size: 12px !important; }
    .page-about .nh-about-purpose-grid { grid-template-columns: 1fr !important; margin-top: 31px !important; }
    .page-about .nh-about-purpose { min-height: 0 !important; padding: 28px 24px !important; }
    .page-about .nh-about-purpose h3 { font-size: 22px !important; }
    .page-about .nh-about-purpose > div { font-size: 16px !important; }
    .page-about .nh-about-values { grid-template-columns: 1fr !important; gap: 12px !important; padding-top: 20px !important; }
    .page-about .nh-about-values li { justify-content: flex-start !important; min-height: 36px !important; padding: 0 !important; text-align: left !important; border-right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .page-about .nh-about-quality { background-attachment: scroll, scroll !important; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.page-contact .nh-contact {
    padding: 68px 0 84px !important;
    background: #FFFFFF !important;
}

.page-contact .nh-contact-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin: 0 0 38px 0 !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid #DDE8EC !important;
}

.page-contact .nh-contact-kicker,
.page-contact .nh-contact-form-head > div > p {
    margin: 0 0 6px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    color: #E98220 !important;
}

.page-contact .nh-contact-head h2,
.page-contact .nh-contact-form-head h2 {
    margin: 0 !important;
    font-family: 'Phudu', sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    color: #16527F !important;
}

.page-contact .nh-contact-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(440px, 1.08fr) !important;
    gap: 52px !important;
    align-items: start !important;
}

.page-contact .nh-contact-information { min-width: 0 !important; }

.page-contact .nh-contact-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.page-contact .nh-contact-action {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    min-width: 0 !important;
    min-height: 96px !important;
    padding: 18px 20px !important;
    background: #F7FAF8 !important;
    border: 1px solid #DEEAE4 !important;
    border-radius: 6px !important;
}

.page-contact .nh-contact-action-icon,
.page-contact .nh-contact-form-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    color: #16527F !important;
    background: #E7F0D9 !important;
    border-radius: 50% !important;
    font-size: 19px !important;
}

.page-contact .nh-contact-action-label,
.page-contact .nh-contact-reference-row span,
.page-contact .nh-contact-location-copy p {
    margin: 0 0 5px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

.page-contact .nh-contact-action-label,
.page-contact .nh-contact-reference-row span { color: #6B8290 !important; }

.page-contact .nh-contact-action-value {
    display: grid !important;
    gap: 3px !important;
}

.page-contact .nh-contact-action-value a,
.page-contact .nh-contact-reference-row a,
.page-contact .nh-contact-reference-row strong {
    display: block !important;
    color: #16527F !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
    text-decoration: none !important;
}

.page-contact .nh-contact-action-value a:hover,
.page-contact .nh-contact-reference-row a:hover { color: #E98220 !important; }

.page-contact .nh-contact-location {
    position: relative !important;
    display: block !important;
    min-height: 310px !important;
    margin: 16px 0 0 0 !important;
    overflow: hidden !important;
    background: #173E59 !important;
    border: 1px solid #DCE7ED !important;
    border-radius: 8px !important;
}

.page-contact .nh-contact-location > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.page-contact .nh-contact-location-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    padding: 28px !important;
    background: linear-gradient(180deg, rgba(8, 37, 56, 0.05) 26%, rgba(7, 47, 73, 0.92) 100%) !important;
}

.page-contact .nh-contact-location-copy {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    max-width: 100% !important;
}

.page-contact .nh-contact-location-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin-top: 1px !important;
    color: #FFFFFF !important;
    background: #E98220 !important;
    border-radius: 50% !important;
    font-size: 16px !important;
}

.page-contact .nh-contact-location-copy p { color: rgba(255, 255, 255, 0.72) !important; }

.page-contact .nh-contact-location-copy strong {
    display: block !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
}

.page-contact .nh-contact-directions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 0 15px !important;
    color: #16527F !important;
    background: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 5px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.page-contact .nh-contact-directions:hover { color: #FFFFFF !important; background: #E98220 !important; border-color: #E98220 !important; }

.page-contact .nh-contact-reference {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 22px !important;
    margin-top: 3px !important;
}

.page-contact .nh-contact-reference-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #DDE8EC !important;
}

.page-contact .nh-contact-reference-row > i {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
    color: #6DA523 !important;
    font-size: 18px !important;
}

.page-contact .nh-contact-form-panel {
    min-width: 0 !important;
    padding: 34px !important;
    background: #FFFFFF !important;
    border: 1px solid #DCE7ED !important;
    border-top: 4px solid #E98220 !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 38px rgba(13, 56, 82, 0.12) !important;
}

.page-contact .nh-contact-form-head {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #DDE8EC !important;
}

.page-contact .nh-contact-form-icon { color: #FFFFFF !important; background: #E98220 !important; }
.page-contact .nh-contact-form-head h2 { font-size: 28px !important; }

.page-contact .nh-contact-form-note {
    margin: 14px 0 0 0 !important;
    color: #63798A !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}

.page-contact .nh-contact-form-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin: 18px 0 0 0 !important;
    padding: 12px 14px !important;
    color: #9F2B21 !important;
    background: #FFF4F1 !important;
    border: 1px solid #F5C8C0 !important;
    border-radius: 6px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.page-contact .nh-contact-form-alert i { flex: 0 0 auto !important; margin-top: 2px !important; }
.page-contact .nh-contact-form-alert ul { margin: 0 !important; padding-left: 16px !important; }

.page-contact .nh-contact-form { margin-top: 24px !important; }

.page-contact .nh-contact-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.page-contact .nh-contact-field {
    display: grid !important;
    min-width: 0 !important;
    gap: 7px !important;
    margin: 0 !important;
}

.page-contact .nh-contact-field--full { grid-column: 1 / -1 !important; }

.page-contact .nh-contact-field > span {
    color: #2B4F66 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.page-contact .nh-contact-field em { color: #E98220 !important; font-style: normal !important; }

.page-contact .nh-contact-field input,
.page-contact .nh-contact-field select,
.page-contact .nh-contact-field textarea {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #1B3D53 !important;
    background: #FFFFFF !important;
    border: 1px solid #C9D9E1 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    outline: 0 !important;
    transition: border-color 0.18s ease, background-color 0.18s ease !important;
}

.page-contact .nh-contact-field input,
.page-contact .nh-contact-field select { height: 48px !important; padding: 0 13px !important; }

.page-contact .nh-contact-field textarea {
    min-height: 136px !important;
    padding: 12px 13px !important;
    resize: vertical !important;
}

.page-contact .nh-contact-field input:focus,
.page-contact .nh-contact-field select:focus,
.page-contact .nh-contact-field textarea:focus {
    background: #FCFEFF !important;
    border-color: #E98220 !important;
}

.page-contact .nh-contact-field [aria-invalid='true'] { border-color: #CB4B3D !important; background: #FFF8F7 !important; }

.page-contact .nh-contact-field small {
    color: #B23B30 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.page-contact .nh-contact-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 24px 0 0 0 !important;
    padding: 0 20px !important;
    color: #FFFFFF !important;
    background: #E98220 !important;
    border: 1px solid #E98220 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.page-contact .nh-contact-submit:hover { background: #D97417 !important; border-color: #D97417 !important; }
.page-contact .nh-contact-submit .btn-spinner { border-top-color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.4) !important; }

@media (max-width: 991px) {
    .page-contact .nh-contact { padding: 58px 0 68px !important; }
    .page-contact .nh-contact-layout { grid-template-columns: 1fr !important; gap: 34px !important; }
    .page-contact .nh-contact-form-panel { max-width: 760px !important; }
}

@media (max-width: 649px) {
    .page-contact .nh-contact { padding: 44px 0 54px !important; }
    .page-contact .nh-contact-head { margin-bottom: 26px !important; padding-bottom: 17px !important; }
    .page-contact .nh-contact-head h2 { font-size: 27px !important; }
    .page-contact .nh-contact-actions,
    .page-contact .nh-contact-reference,
    .page-contact .nh-contact-fields { grid-template-columns: 1fr !important; }
    .page-contact .nh-contact-action { min-height: 0 !important; padding: 17px !important; }
    .page-contact .nh-contact-location { min-height: 300px !important; }
    .page-contact .nh-contact-location-overlay { padding: 20px !important; }
    .page-contact .nh-contact-location-copy strong { font-size: 14px !important; }
    .page-contact .nh-contact-reference { gap: 0 !important; }
    .page-contact .nh-contact-reference-row { padding: 15px 0 !important; }
    .page-contact .nh-contact-form-panel { padding: 25px 18px !important; }
    .page-contact .nh-contact-form-head h2 { font-size: 24px !important; }
    .page-contact .nh-contact-field input,
    .page-contact .nh-contact-field select,
    .page-contact .nh-contact-field textarea { font-size: 16px !important; }
}

/* ===========================================================================
   CONTACT PAGE — CONNECTION HUB
   ========================================================================== */
.page-contact .nh-contact {
    position: relative !important;
    overflow: hidden !important;
    padding: 82px 0 92px !important;
    background:
        radial-gradient(circle at 6% 8%, rgba(248, 153, 43, 0.12), transparent 20rem),
        radial-gradient(circle at 96% 68%, rgba(22, 82, 127, 0.1), transparent 25rem),
        #F5F8F7 !important;
}

.page-contact .nh-contact-head {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 36px !important;
    margin: 0 0 40px !important;
    padding: 0 0 27px !important;
    border-bottom: 1px solid rgba(22, 82, 127, 0.17) !important;
}

.page-contact .nh-contact-head-copy { max-width: 720px !important; }

.page-contact .nh-contact-kicker,
.page-contact .nh-contact-form-head > div > p,
.page-contact .nh-contact-hub-heading p {
    margin: 0 0 9px !important;
    color: #E98220 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}

.page-contact .nh-contact-head h2,
.page-contact .nh-contact-form-head h2 {
    margin: 0 !important;
    color: #16527F !important;
    font-family: 'Phudu', sans-serif !important;
    font-size: clamp(30px, 3vw, 44px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.13 !important;
}

.page-contact .nh-contact-head-note {
    max-width: 315px !important;
    margin: 0 0 3px !important;
    color: #58707D !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.48 !important;
}

.page-contact .nh-contact-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    gap: 30px !important;
    align-items: stretch !important;
}

.page-contact .nh-contact-left {
    display: grid !important;
    min-width: 0 !important;
    gap: 15px !important;
}

.page-contact .nh-contact-information {
    position: relative !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 37px !important;
    color: #FFFFFF !important;
    background: #16527F !important;
    border: 1px solid rgba(8, 50, 79, 0.7) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 42px rgba(15, 62, 95, 0.17) !important;
}

.page-contact .nh-contact-hub-decoration {
    position: absolute !important;
    z-index: 0 !important;
    top: -132px !important;
    right: -110px !important;
    width: 295px !important;
    height: 295px !important;
    border: 44px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.page-contact .nh-contact-hub-decoration::after {
    position: absolute !important;
    top: 62px !important;
    left: -102px !important;
    width: 104px !important;
    height: 104px !important;
    background: rgba(248, 153, 43, 0.92) !important;
    border-radius: 50% !important;
    content: '' !important;
}

.page-contact .nh-contact-hub-heading,
.page-contact .nh-contact-hub-intro,
.page-contact .nh-contact-actions,
.page-contact .nh-contact-reference,
.page-contact .nh-contact-hub-actions { position: relative !important; z-index: 1 !important; }

.page-contact .nh-contact-hub-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.page-contact .nh-contact-hub-mark {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    color: #16527F !important;
    background: #F8992B !important;
    border-radius: 14px !important;
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.12) !important;
}

.page-contact .nh-contact-hub-heading p { color: rgba(255, 255, 255, 0.68) !important; }

.page-contact .nh-contact-hub-heading h2 {
    max-width: 430px !important;
    margin: 0 !important;
    color: #FFFFFF !important;
    font-family: 'Phudu', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.28 !important;
}

.page-contact .nh-contact-hub-intro {
    max-width: 520px !important;
    margin: 23px 0 0 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.page-contact .nh-contact-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 28px !important;
}

.page-contact .nh-contact-action {
    display: flex !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    min-height: 104px !important;
    gap: 11px !important;
    padding: 17px 15px !important;
    color: #FFFFFF !important;
    background: rgba(4, 40, 65, 0.27) !important;
    border: 1px solid rgba(255, 255, 255, 0.17) !important;
    border-radius: 12px !important;
}

.page-contact .nh-contact-action-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 37px !important;
    height: 37px !important;
    color: #F8992B !important;
    background: rgba(248, 153, 43, 0.13) !important;
    border: 1px solid rgba(248, 153, 43, 0.25) !important;
    border-radius: 10px !important;
}

.page-contact .nh-contact-action-label,
.page-contact .nh-contact-reference-row > div > span {
    display: block !important;
    margin: 0 0 5px !important;
    color: rgba(255, 255, 255, 0.61) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.11em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}

.page-contact .nh-contact-action-value { display: grid !important; gap: 3px !important; }

.page-contact .nh-contact-action-value a,
.page-contact .nh-contact-reference-row a,
.page-contact .nh-contact-reference-row strong {
    display: block !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.48 !important;
    overflow-wrap: anywhere !important;
    text-decoration: none !important;
}

.page-contact .nh-contact-action-value a:hover,
.page-contact .nh-contact-reference-row a:hover { color: #F8992B !important; }

.page-contact .nh-contact-reference {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 15px !important;
    margin-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.page-contact .nh-contact-reference-row {
    display: flex !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    gap: 9px !important;
    padding: 16px 0 3px !important;
}

.page-contact .nh-contact-reference-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    margin-top: 1px !important;
    color: #F8992B !important;
}

.page-contact .nh-contact-hub-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 18px !important;
    margin-top: 26px !important;
    padding-top: 22px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.page-contact .nh-contact-hub-button,
.page-contact .nh-contact-hub-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.page-contact .nh-contact-hub-button {
    padding: 0 17px !important;
    color: #16527F !important;
    background: #F8992B !important;
    border-radius: 7px !important;
}

.page-contact .nh-contact-hub-button:hover { color: #FFFFFF !important; background: #E98220 !important; transform: translateY(-1px) !important; }

.page-contact .nh-contact-hub-link { color: #FFFFFF !important; }
.page-contact .nh-contact-hub-link:hover { color: #F8992B !important; transform: translateX(2px) !important; }

.page-contact .nh-contact-location {
    position: relative !important;
    display: block !important;
    min-height: 252px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #0B3D60 !important;
    border: 1px solid rgba(22, 82, 127, 0.16) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(15, 62, 95, 0.1) !important;
}

.page-contact .nh-contact-location > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.02) !important;
}

.page-contact .nh-contact-location-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 26px !important;
    background: linear-gradient(180deg, rgba(7, 43, 68, 0.04) 20%, rgba(4, 37, 60, 0.92) 100%) !important;
}

.page-contact .nh-contact-location-copy { display: flex !important; align-items: flex-start !important; gap: 10px !important; max-width: 72% !important; }

.page-contact .nh-contact-location-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #16527F !important;
    background: #F8992B !important;
    border-radius: 10px !important;
}

.page-contact .nh-contact-location-copy p {
    margin: 0 0 5px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.11em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}

.page-contact .nh-contact-location-copy strong {
    display: block !important;
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.48 !important;
}

.page-contact .nh-contact-directions {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 39px !important;
    padding: 0 12px !important;
    color: #16527F !important;
    background: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 7px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.page-contact .nh-contact-directions:hover { color: #FFFFFF !important; background: #E98220 !important; border-color: #E98220 !important; }

.page-contact .nh-contact-form-panel {
    position: relative !important;
    min-width: 0 !important;
    padding: 42px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(22, 82, 127, 0.15) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 46px rgba(15, 62, 95, 0.12) !important;
}

.page-contact .nh-contact-form-panel::before {
    position: absolute !important;
    top: 0 !important;
    right: 34px !important;
    left: 34px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #F8992B 0 25%, #16527F 25% 100%) !important;
    border-radius: 0 0 4px 4px !important;
    content: '' !important;
}

.page-contact .nh-contact-form-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid #DDE7E9 !important;
}

.page-contact .nh-contact-form-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 47px !important;
    height: 47px !important;
    color: #FFFFFF !important;
    background: #16527F !important;
    border-radius: 14px !important;
}

.page-contact .nh-contact-form-head h2 { font-size: 29px !important; }

.page-contact .nh-contact-form-note {
    margin: 15px 0 0 !important;
    color: #647A86 !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

.page-contact .nh-contact-form-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin: 18px 0 0 !important;
    padding: 12px 14px !important;
    color: #9F2B21 !important;
    background: #FFF4F1 !important;
    border: 1px solid #F5C8C0 !important;
    border-radius: 9px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.page-contact .nh-contact-form-alert .sl-icon { flex: 0 0 auto !important; margin-top: 1px !important; }
.page-contact .nh-contact-form-alert ul { margin: 0 !important; padding-left: 16px !important; }

.page-contact .nh-contact-form { margin-top: 25px !important; }

.page-contact .nh-contact-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 17px 15px !important;
}

.page-contact .nh-contact-field {
    display: grid !important;
    min-width: 0 !important;
    gap: 7px !important;
    margin: 0 !important;
}

.page-contact .nh-contact-field--full { grid-column: 1 / -1 !important; }

.page-contact .nh-contact-field > span {
    color: #31566A !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.025em !important;
    line-height: 1.35 !important;
}

.page-contact .nh-contact-field em { color: #E98220 !important; font-style: normal !important; }

.page-contact .nh-contact-field input,
.page-contact .nh-contact-field select,
.page-contact .nh-contact-field textarea {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #173F54 !important;
    background: #F8FBFB !important;
    border: 1px solid #D6E1E4 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    outline: 0 !important;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.page-contact .nh-contact-field input,
.page-contact .nh-contact-field select { height: 51px !important; padding: 0 14px !important; }

.page-contact .nh-contact-field textarea { min-height: 126px !important; padding: 13px 14px !important; resize: vertical !important; }

.page-contact .nh-contact-field input:focus,
.page-contact .nh-contact-field select:focus,
.page-contact .nh-contact-field textarea:focus {
    background: #FFFFFF !important;
    border-color: #F8992B !important;
    box-shadow: 0 0 0 3px rgba(248, 153, 43, 0.14) !important;
}

.page-contact .nh-contact-field [aria-invalid='true'] { border-color: #CB4B3D !important; background: #FFF8F7 !important; }

.page-contact .nh-contact-field small {
    color: #B23B30 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.page-contact .nh-contact-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 53px !important;
    margin: 24px 0 0 !important;
    padding: 0 20px !important;
    color: #FFFFFF !important;
    background: #16527F !important;
    border: 1px solid #16527F !important;
    border-radius: 9px !important;
    box-shadow: 0 9px 18px rgba(22, 82, 127, 0.18) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.page-contact .nh-contact-submit:hover { background: #0D4167 !important; border-color: #0D4167 !important; box-shadow: 0 12px 24px rgba(22, 82, 127, 0.25) !important; transform: translateY(-1px) !important; }
.page-contact .nh-contact-submit .btn-spinner { border-top-color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.4) !important; }

.page-contact .nh-contact-form-privacy {
    margin: 13px 0 0 !important;
    color: #81939C !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

@media (max-width: 991px) {
    .page-contact .nh-contact { padding: 66px 0 74px !important; }
    .page-contact .nh-contact-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 25px !important; }
    .page-contact .nh-contact-left { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) !important; align-items: stretch !important; }
    .page-contact .nh-contact-location { min-height: 100% !important; }
    .page-contact .nh-contact-form-panel { max-width: none !important; }
}

@media (max-width: 649px) {
    .page-contact .nh-contact { padding: 48px 0 56px !important; }
    .page-contact .nh-contact-head { display: block !important; margin-bottom: 27px !important; padding-bottom: 20px !important; }
    .page-contact .nh-contact-head h2 { font-size: 31px !important; }
    .page-contact .nh-contact-head-note { max-width: 480px !important; margin-top: 16px !important; font-size: 16px !important; }
    .page-contact .nh-contact-left { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
    .page-contact .nh-contact-information { padding: 28px 21px !important; border-radius: 15px !important; }
    .page-contact .nh-contact-hub-heading h2 { font-size: 20px !important; }
    .page-contact .nh-contact-hub-intro { margin-top: 19px !important; font-size: 17px !important; }
    .page-contact .nh-contact-actions,
    .page-contact .nh-contact-reference,
    .page-contact .nh-contact-fields { grid-template-columns: minmax(0, 1fr) !important; }
    .page-contact .nh-contact-actions { margin-top: 23px !important; }
    .page-contact .nh-contact-action { min-height: 0 !important; padding: 15px !important; }
    .page-contact .nh-contact-reference { gap: 0 !important; }
    .page-contact .nh-contact-reference-row { padding-top: 14px !important; }
    .page-contact .nh-contact-hub-actions { margin-top: 21px !important; padding-top: 18px !important; }
    .page-contact .nh-contact-location { min-height: 272px !important; border-radius: 15px !important; }
    .page-contact .nh-contact-location-overlay { display: block !important; padding: 21px !important; }
    .page-contact .nh-contact-location-copy { max-width: 100% !important; }
    .page-contact .nh-contact-directions { margin: 15px 0 0 46px !important; }
    .page-contact .nh-contact-form-panel { padding: 31px 19px 27px !important; border-radius: 15px !important; }
    .page-contact .nh-contact-form-panel::before { right: 19px !important; left: 19px !important; }
    .page-contact .nh-contact-form-head { padding-bottom: 18px !important; }
    .page-contact .nh-contact-form-head h2 { font-size: 25px !important; }
    .page-contact .nh-contact-form-note { font-size: 15px !important; }
    .page-contact .nh-contact-field input,
    .page-contact .nh-contact-field select,
    .page-contact .nh-contact-field textarea { font-size: 16px !important; }
}

/* ========================================================================== 
   HOME — FEATURED NEWS LAYOUT
   One lead story establishes the section's focal point; supporting stories are
   deliberately quieter. Category badges are omitted from the home news cards.
   ========================================================================== */
.hn-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(340px, 0.9fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

.hn .hn-cat { display: none !important; }

/* Keep the editorial cards crisp against the white homepage background. */
.hn .hn-card,
.hn .hn-card:hover { box-shadow: none !important; }

.hn-card-lead {
    min-height: 590px !important;
}

.hn-card-lead .hn-media {
    flex: 1 1 56% !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

.hn-card-lead .hn-body {
    padding: 25px 30px 28px !important;
}

.hn-card-lead .hn-title {
    font-size: 29px !important;
    line-height: 1.27 !important;
}

.hn-card-lead .hn-text {
    font-size: 18px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}

.hn-card-lead .hn-more { margin-top: auto !important; }

.hn-list {
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.hn-card-row {
    flex-direction: row !important;
    min-height: 0 !important;
}

.hn-card-row::after { display: none !important; }

.hn-card-row .hn-media {
    flex: 0 0 39% !important;
    width: 39% !important;
    min-height: 100% !important;
    aspect-ratio: auto !important;
}

.hn-card-row .hn-body {
    padding: 17px 20px 18px !important;
}

.hn-card-row .hn-date {
    gap: 7px !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
}

.hn-card-row .hn-title {
    margin-bottom: 9px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

.hn-card-row .hn-title::after {
    width: 38px !important;
    height: 3px !important;
    margin-top: 8px !important;
}

.hn-card-row .hn-text { display: none !important; }

.hn-card-row .hn-more {
    gap: 9px !important;
    margin-top: auto !important;
    padding-top: 9px !important;
    font-size: 12px !important;
}

.hn-card-row .hn-more svg {
    width: 30px !important;
    height: 30px !important;
    padding: 6px !important;
}

@media (max-width: 1199px) {
    .hn-layout { grid-template-columns: 1fr !important; }

    .hn-card-lead { min-height: 0 !important; }
    .hn-card-lead .hn-media { flex: 0 0 auto !important; aspect-ratio: 16 / 8 !important; }

    .hn-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        gap: 20px !important;
    }

    .hn-card-row { flex-direction: column !important; }
    .hn-card-row .hn-media { flex: 0 0 auto !important; width: 100% !important; min-height: 0 !important; aspect-ratio: 16 / 10 !important; }
    .hn-card-row .hn-body { padding: 20px 22px 22px !important; }
    .hn-card-row .hn-date { font-size: 14px !important; }
    .hn-card-row .hn-title { font-size: 18px !important; }
    .hn-card-row .hn-text { display: -webkit-box !important; font-size: 16px !important; }
    .hn-card-row .hn-more { font-size: 13px !important; }
}

@media (max-width: 849px) {
    .hn-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .hn-card-lead .hn-title { font-size: 25px !important; }
}

@media (max-width: 599px) {
    .hn-layout { gap: 18px !important; }
    .hn-card-lead .hn-media { aspect-ratio: 16 / 10 !important; }
    .hn-card-lead .hn-body { padding: 22px 23px 24px !important; }
    .hn-card-lead .hn-title { font-size: 22px !important; }
    .hn-card-lead .hn-text { font-size: 16px !important; }
    .hn-list { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* Product detail gallery: product uploads can be portrait, square, or landscape.
   Preserve every image inside one stable frame instead of cropping it to 4:3. */
.pd-gallery-image {
    object-fit: contain !important;
    object-position: center !important;
    background: #FFFFFF !important;
}

.pd-thumb img {
    object-fit: contain !important;
    background: #FFFFFF !important;
}

/* ========================================================================== 
   PRODUCT DETAIL — EDITORIAL REDESIGN
   The page is led by product data rather than decorative cards. Borders, spacing
   and type create hierarchy; shadows are reserved for the image lightbox only.
   ========================================================================== */
.pd-page .pd-hero {
    padding: 30px 0 68px !important;
    background: #F7FAFB !important;
    border-bottom: 1px solid #E1E9EF !important;
}

.pd-page .pd-wave { display: none !important; }

.pd-page .pd-breadcrumb {
    margin-bottom: 28px !important;
    color: #75849A !important;
}

.pd-page .pd-hero-grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr) !important;
    gap: clamp(38px, 5vw, 76px) !important;
    align-items: center !important;
}

.pd-page .pd-gallery { position: sticky !important; top: 104px !important; }

.pd-page .pd-gallery-stage {
    min-height: 500px !important;
    padding: 22px !important;
    background: #FFFFFF !important;
    border: 1px solid #DCE7EE !important;
    border-radius: 28px !important;
}

.pd-page .pd-gallery-blob {
    inset: 24px !important;
    background: linear-gradient(135deg, #F7E7CF 0%, #ECF4F8 72%) !important;
    border-radius: 22px !important;
    animation: none !important;
}

.pd-page .pd-gallery-orb { display: none !important; }

.pd-page .pd-gallery-image {
    width: 100% !important;
    max-width: none !important;
    height: 440px !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

.pd-page .pd-gallery-image.is-cutout {
    background: transparent !important;
    filter: drop-shadow(0 12px 18px rgba(15, 59, 112, 0.14)) !important;
}

.pd-page .pd-gallery-stage:hover .pd-gallery-image { transform: none !important; }

.pd-page .pd-thumbs {
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding-left: 2px !important;
}

.pd-page .pd-thumb {
    width: 66px !important;
    height: 66px !important;
    border: 1px solid #D9E4EB !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.pd-page .pd-thumb:hover { transform: none !important; border-color: #F8992B !important; }
.pd-page .pd-thumb.is-active { border: 2px solid #F8992B !important; box-shadow: none !important; }

.pd-page .pd-info { max-width: 620px !important; padding: 12px 0 !important; }

.pd-page .pd-kicker {
    margin-bottom: 12px !important;
    color: #D97718 !important;
}

.pd-page .pd-title {
    max-width: 650px !important;
    margin-bottom: 16px !important;
    color: #103E70 !important;
    font-size: clamp(34px, 3.3vw, 52px) !important;
    line-height: 1.13 !important;
}

.pd-page .pd-slogan {
    margin-bottom: 20px !important;
    font-size: clamp(22px, 2vw, 28px) !important;
}

.pd-page .pd-short,
.pd-page .pd-short p {
    max-width: 58ch !important;
    margin-bottom: 0 !important;
    color: #52647C !important;
}

.pd-page .pd-facts-panel {
    margin: 28px 0 22px !important;
    padding-top: 18px !important;
    border-top: 1px solid #D8E3E9 !important;
}

.pd-page .pd-meta-label {
    margin: 0 0 4px !important;
    color: #8A98AA !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.pd-page .pd-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
}

.pd-page .pd-fact {
    min-height: 92px !important;
    padding: 15px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #E1E9EF !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.pd-page .pd-fact:hover { border-color: #E1E9EF !important; box-shadow: none !important; }
.pd-page .pd-fact:nth-child(odd) { padding-right: 24px !important; border-right: 1px solid #E1E9EF !important; }
.pd-page .pd-fact:nth-child(even) { padding-left: 24px !important; }

.pd-page .pd-fact dt { margin-bottom: 7px !important; color: #7A8A9F !important; }
.pd-page .pd-fact dd { color: #1A4E80 !important; font-size: 15px !important; }

.pd-page .pd-certs { margin: 0 0 24px !important; }
.pd-page .pd-cert { background: transparent !important; border-color: #C9D9E5 !important; }

.pd-page .pd-cta { gap: 10px !important; }
.pd-page .pd-cta .nh-btn,
.pd-page .pd-cta .pd-btn {
    min-height: 50px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.pd-page .pd-btn-ghost { background: transparent !important; border-color: #B7C9D8 !important; }
.pd-page .pd-btn-ghost:hover { transform: none !important; background: #FFFFFF !important; }

.pd-page .pd-story {
    padding: 84px 0 !important;
    background: #FFFFFF !important;
}

.pd-page .pd-editorial-grid,
.pd-page .pd-content-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr) !important;
    gap: clamp(34px, 7vw, 104px) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding-top: 34px !important;
    border-top: 1px solid #D8E3E9 !important;
}

.pd-page .pd-editorial-intro,
.pd-page .pd-content-intro {
    align-self: start !important;
}

.pd-page .pd-editorial-intro .pd-section-title,
.pd-page .pd-content-intro .pd-section-title {
    margin-bottom: 0 !important;
    color: #103E70 !important;
    font-size: clamp(27px, 2.5vw, 38px) !important;
    line-height: 1.2 !important;
}

.pd-page .pd-story-body,
.pd-page .pd-story-body p {
    margin: 0 !important;
    color: #4F6076 !important;
    font-size: 18px !important;
    line-height: 1.85 !important;
}

.pd-page .pd-story-body p + p { margin-top: 16px !important; }

.pd-page .pd-cooking {
    margin-top: 0 !important;
    padding: 84px 0 !important;
    background: #F7FAFB !important;
    border-top: 1px solid #E1E9EF !important;
    border-bottom: 1px solid #E1E9EF !important;
}

.pd-page .pd-section-head {
    max-width: 760px !important;
    margin: 0 0 34px !important;
    text-align: left !important;
}

.pd-page .pd-section-head .pd-section-title {
    color: #103E70 !important;
    font-size: clamp(29px, 2.6vw, 40px) !important;
    line-height: 1.2 !important;
}

.pd-page .pd-section-sub { margin: 10px 0 0 !important; }

.pd-page .pd-cooking-shell {
    grid-template-columns: minmax(0, 252px) minmax(0, 1fr) !important;
    gap: 42px !important;
}

.pd-page .pd-cooking-tabs { gap: 0 !important; border-top: 1px solid #D9E4EB !important; }

.pd-page .pd-cooking-tab {
    gap: 12px !important;
    padding: 15px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #D9E4EB !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.pd-page .pd-cooking-tab:hover { border-color: #D9E4EB !important; transform: none !important; }

.pd-page .pd-cooking-tab.is-active {
    padding-left: 14px !important;
    background: transparent !important;
    border-color: #D9E4EB !important;
    border-left: 3px solid #F8992B !important;
    box-shadow: none !important;
}

.pd-page .pd-cooking-tab-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #EAF1F5 !important;
}

.pd-page .pd-cooking-tab.is-active .pd-cooking-tab-icon { background: #F8992B !important; color: #FFFFFF !important; }
.pd-page .pd-cooking-tab.is-active .pd-cooking-tab-text { color: #103E70 !important; }
.pd-page .pd-cooking-tab.is-active .pd-cooking-tab-step { color: #D97718 !important; }

.pd-page .pd-cooking-panel.is-active {
    border: 1px solid #D7E3EA !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.pd-page .pd-cooking-media { min-height: 330px !important; background: #EEF4F6 !important; }
.pd-page .pd-cooking-media img,
.pd-page .pd-cooking-media video,
.pd-page .pd-cooking-media iframe { min-height: 330px !important; }

.pd-page .pd-play { border: 1px solid #FFFFFF !important; box-shadow: none !important; }
.pd-page .pd-cooking-copy { padding: 34px !important; }
.pd-page .pd-cooking-link { color: #D97718 !important; }

.pd-page .pd-usage {
    max-width: none !important;
    margin: 24px 0 0 294px !important;
    padding: 2px 0 !important;
    background: transparent !important;
    border-width: 1px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.pd-page .pd-detail {
    padding: 84px 0 !important;
    background: #FFFFFF !important;
}

.pd-page .pd-detail-body { max-width: none !important; margin: 0 !important; }

.pd-page .pd-detail-body,
.pd-page .pd-detail-body p,
.pd-page .pd-detail-body li {
    color: #4F6076 !important;
    font-size: 18px !important;
    line-height: 1.85 !important;
}

.pd-page .pd-detail-body h2,
.pd-page .pd-detail-body h3,
.pd-page .pd-detail-body h4 {
    margin-top: 28px !important;
    color: #103E70 !important;
}

.pd-page .pd-detail-body img { border-radius: 12px !important; box-shadow: none !important; }

.pd-page .pd-photos {
    padding: 84px 0 !important;
    background: #F7FAFB !important;
    border-top: 1px solid #E1E9EF !important;
}

.pd-page .pd-photo-bento-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 14px !important;
}

.pd-page .pd-photo-col-3,
.pd-page .pd-photo-col-4,
.pd-page .pd-photo-col-5 { grid-column: auto !important; }

.pd-page .pd-photo-card {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    background: #FFFFFF !important;
    border: 1px solid #D9E4EB !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.pd-page .pd-photo-img { object-fit: contain !important; background: #FFFFFF !important; }
.pd-page .pd-photo-card:hover .pd-photo-img { transform: none !important; }

.pd-page .pd-inquiry { padding: 80px 0 !important; background: #103E70 !important; }

.pd-page .pd-inquiry-card,
.pd-page .storefront-modern-inquiry {
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.pd-page .pd-related { padding: 84px 0 !important; background: #FFFFFF !important; }

@media (max-width: 991px) {
    .pd-page .pd-hero { padding-bottom: 52px !important; }
    .pd-page .pd-gallery { position: static !important; }
    .pd-page .pd-gallery-stage { min-height: 420px !important; }
    .pd-page .pd-gallery-image { height: 360px !important; }
    .pd-page .pd-editorial-grid,
    .pd-page .pd-content-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
    .pd-page .pd-cooking-shell { grid-template-columns: 1fr !important; gap: 28px !important; }
    .pd-page .pd-cooking-tabs { flex-direction: row !important; overflow-x: auto !important; border-top: 0 !important; }
    .pd-page .pd-cooking-tab { min-width: 178px !important; border-top: 1px solid #D9E4EB !important; }
    .pd-page .pd-cooking-tab.is-active { border-left: 0 !important; border-top: 3px solid #F8992B !important; }
    .pd-page .pd-usage { margin-left: 0 !important; }
}

@media (max-width: 599px) {
    .pd-page .pd-hero,
    .pd-page .pd-story,
    .pd-page .pd-cooking,
    .pd-page .pd-detail,
    .pd-page .pd-photos,
    .pd-page .pd-inquiry,
    .pd-page .pd-related { padding-top: 54px !important; padding-bottom: 54px !important; }
    .pd-page .pd-gallery-stage { min-height: 310px !important; padding: 12px !important; border-radius: 18px !important; }
    .pd-page .pd-gallery-blob { inset: 14px !important; border-radius: 13px !important; }
    .pd-page .pd-gallery-image { height: 280px !important; border-radius: 10px !important; }
    .pd-page .pd-facts { grid-template-columns: 1fr !important; }
    .pd-page .pd-fact,
    .pd-page .pd-fact:nth-child(odd),
    .pd-page .pd-fact:nth-child(even) { min-height: 0 !important; padding: 14px 0 !important; border-right: 0 !important; }
    .pd-page .pd-cta { flex-direction: column !important; }
    .pd-page .pd-cta .nh-btn,
    .pd-page .pd-cta .pd-btn { width: 100% !important; }
    .pd-page .pd-photo-bento-grid { grid-template-columns: 1fr !important; }
    .pd-page .pd-inquiry-card { padding: 22px 18px !important; }
}

/* Flaticon UIcons in the product cooking controls. */
.pd-page .pd-cooking-tab-icon .fi {
    display: block !important;
    font-size: 19px !important;
    line-height: 1 !important;
}

.pd-page .pd-cooking-media-empty .pd-cooking-tab-icon .fi { font-size: 34px !important; }

/* The fixed contact actions and the back-to-top control use inline SVG, not the icon
   font: a font glyph is placed by baseline metrics and never lands exactly in the
   middle of the button, and the collection has no Zalo mark. */
.fbtn-icon svg,
.back-to-top svg {
    display: block !important;
    flex: none !important;
}

/* ========================================================================== 
   FLOATING CONTACT DOCK — compact controls with correctly centred UIcons.
   ========================================================================== */
.fbtn {
    right: 18px !important;
    bottom: 82px !important;
    gap: 8px !important;
    padding: 7px !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(208, 222, 232, 0.9) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
}

.fbtn-item {
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

.fbtn-icon {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #FFFFFF !important;
}

/* Every glyph is drawn on the same 24×24 grid with its ink centred on (12, 12), so a
   square box plus place-items: center puts it dead centre in the button. */
.fbtn-glyph {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    fill: currentColor !important;
}

/* Zalo is a wordmark, not a pictogram — it needs the extra width to stay legible. */
.fbtn-glyph-zalo {
    width: 32px !important;
    height: 32px !important;
}

.fbtn-label {
    position: absolute !important;
    top: 50% !important;
    right: calc(100% + 12px) !important;
    width: max-content !important;
    padding: 8px 11px !important;
    color: #103E70 !important;
    background: #FFFFFF !important;
    border: 1px solid #D6E2EA !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(6px, -50%) !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
}

.fbtn-item:hover,
.fbtn-item:focus-visible {
    width: 50px !important;
    filter: brightness(1.04) !important;
    transform: translateX(-3px) !important;
}

.fbtn-item:hover .fbtn-label,
.fbtn-item:focus-visible .fbtn-label {
    opacity: 1 !important;
    transform: translate(0, -50%) !important;
}

.fbtn-phone::before,
.fbtn-zalo::before { display: none !important; animation: none !important; }

/* The imported theme styles this link as a progress circle; reset it as a dock control. */
#top-link.back-to-top {
    position: fixed !important;
    right: 25px !important;
    bottom: 18px !important;
    z-index: 999 !important;
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #16527F !important;
    background: #FFFFFF !important;
    border: 1px solid #BFD1DE !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

#top-link.back-to-top::before,
#top-link.back-to-top::after { display: none !important; }

#top-link.back-to-top:hover {
    color: #FFFFFF !important;
    background: #16527F !important;
    border-color: #16527F !important;
    transform: none !important;
}

#top-link.back-to-top svg {
    width: 20px !important;
    height: 20px !important;
}

@media (max-width: 549px) {
    .fbtn {
        right: 12px !important;
        bottom: 74px !important;
        gap: 7px !important;
        padding: 6px !important;
        border-radius: 19px !important;
    }

    .fbtn-item { width: 46px !important; height: 46px !important; border-radius: 13px !important; }
    .fbtn-item:hover,
    .fbtn-item:focus-visible { width: 46px !important; transform: none !important; }
    .fbtn-glyph { width: 21px !important; height: 21px !important; }
    .fbtn-glyph-zalo { width: 29px !important; height: 29px !important; }
    .fbtn-label { display: none !important; }
    #top-link.back-to-top { right: 12px !important; bottom: 14px !important; width: 46px !important; height: 46px !important; border-radius: 13px !important; }
}

/* ==========================================================================
   LANGUAGE SWITCH (.nh-lang) — segmented VI/EN control in the navbar.
   Replaces the two loose flag circles: a pill reads as a switch, and the
   active side is filled so the current language is obvious at a glance.
   ========================================================================== */
.nh-lang {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 3px !important;
    background: rgba(16, 62, 112, 0.06) !important;
    border: 1px solid rgba(16, 62, 112, 0.12) !important;
    border-radius: 999px !important;
}

.nh-lang-opt {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px 4px 6px !important;
    border-radius: 999px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    color: #5B7086 !important;
    text-decoration: none !important;
    transition: background 0.18s ease, color 0.18s ease !important;
}

.nh-lang-opt:hover,
.nh-lang-opt:focus-visible { color: #103E70 !important; background: rgba(255, 255, 255, 0.75) !important; }

.nh-lang-opt.is-active {
    color: #103E70 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(16, 62, 112, 0.16) !important;
}

.nh-lang-flag {
    display: block !important;
    width: 20px !important;
    height: 14px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
    flex: none !important;
}

.nh-lang-opt:not(.is-active) .nh-lang-flag { filter: saturate(0.45) opacity(0.75) !important; }

/* Dark/transparent header on the home hero: invert the pill so it stays legible. */
.floating-header-wrapper .nh-lang {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

.floating-header-wrapper .nh-lang-opt { color: rgba(255, 255, 255, 0.8) !important; }
.floating-header-wrapper .nh-lang-opt.is-active { color: #103E70 !important; background: #FFFFFF !important; }

/* Inside the mobile drawer the pill sits on white, so use the light styling there. */
.storefront-mobile-menu .nh-lang { width: max-content !important; margin: 4px 20px 0 !important; }

@media (max-width: 549px) {
    .nh-lang-opt { padding: 4px 8px 4px 5px !important; font-size: 12px !important; gap: 5px !important; }
    .nh-lang-flag { width: 18px !important; height: 13px !important; }
}

/* ==========================================================================
   CONTACT HERO — keep the heading from breaking into a long line + orphan.
   The English copy is longer than the Vietnamese, so the <br class="hide-for-small">
   in the blade sets the break; these rules stop the two columns fighting for
   width and stop a single word being left alone on the last line.
   ========================================================================== */
.page-contact .nh-contact-head-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.page-contact .nh-contact-head-note {
    flex: 0 1 315px !important;
}

.page-contact .nh-contact-head h2,
.page-contact .nh-contact-form-head h2,
.page-contact .nh-contact-hub-intro,
.page-contact .nh-contact-head-note {
    text-wrap: pretty;
    overflow-wrap: break-word !important;
}

/* ==========================================================================
   STICKY HEADER (#header) — one row, everything on the same centre line.
   Flatsome sizes the menu with `line-height: 70px` inside a 76px bar, so the
   links, the logo and the search / language controls each ended up on their own
   baseline. Stretching the three columns to the full bar height and centring
   their content puts them back on one line, and it also makes each <li> as tall
   as the bar — which is what pins the dropdown to the bottom edge instead of
   leaving it floating below the header.
   ========================================================================== */
#header .header-main .header-inner {
    align-items: stretch !important;
}

#header .header-main .header-inner > .flex-col {
    display: flex !important;
    align-items: center !important;
}

#header #logo,
#header #logo a {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#header .header-nav-main.nav {
    align-items: stretch !important;
    height: 100% !important;
}

#header .header-nav-main.nav > li {
    display: flex !important;
    align-items: center !important;
}

#header .header-nav-main.nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1.2 !important;
    /* Only the vertical padding is reset — the theme's nav-spacing-xlarge keeps
       deciding how far apart the menu items sit. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#header .floating-navbar-actions {
    height: 100% !important;
}

/* The dropdown opens flush under the bar; 6px is a deliberate gap, not a gutter. */
#header .header-nav-main.nav > li > .sub-menu.nav-dropdown {
    top: 100% !important;
    margin-top: 6px !important;
}

/* ==========================================================================
   SHOP SIDEBAR — redesign.
   Was: one white box cut into blocks by dashed lines, links and chips all the
   same weight, so nothing told you where you were. Now each block is titled by
   a small orange-ticked label, the active product line is marked by a rail +
   cream fill, and the cooking filters read as real toggles with their icon.
   ========================================================================== */
.shopx-filter-panel {
    padding: 22px 20px !important;
    border: 1px solid #E9EFF5 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(16, 62, 112, 0.05) !important;
    top: 100px !important;
}

.shopx-filter-block {
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #EEF3F7 !important;
}

.shopx-filter-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 14px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    color: #93A5B5 !important;
}

.shopx-filter-title::before { content: none !important; display: none !important; }

/* ---------- Search ---------- */
.shopx-search input {
    height: 46px !important;
    padding: 0 46px 0 16px !important;
    background: #F6F9FC !important;
    border: 1.5px solid transparent !important;
    border-radius: 14px !important;
    font-family: 'Dosis', 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #16527F !important;
}

.shopx-search input::placeholder { color: #A8B7C4 !important; font-weight: 500 !important; }

.shopx-search input:focus {
    background: #FFFFFF !important;
    border-color: #F8992B !important;
    box-shadow: 0 0 0 3px rgba(248, 153, 43, 0.15) !important;
}

/* Chỉ là cái kính lúp có màu, không phải nút nền đặc: bám sát mép phải và cao
   bằng ô input để không bị lệch so với chữ. */
.shopx-search button,
.shopx-search button:hover,
.shopx-search button:focus {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 46px !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #16527F !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.shopx-search button:hover { color: #F8992B !important; transform: scale(1.08) !important; }

.shopx-search button .sl-icon { display: block !important; }

/* ---------- Product lines ----------
   Chỉ đổi màu chữ: không ray, không nền, kể cả khi đang chọn. */
.shopx-filter-list li { margin: 0 0 2px 0 !important; }

.shopx-filter-list a,
.shopx-filter-list a:hover,
.shopx-filter-list a:focus,
.shopx-filter-list a.is-active {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    transition: color 0.2s ease !important;
}

.shopx-filter-list a::before,
.shopx-filter-list a::after { content: none !important; display: none !important; }

.shopx-filter-list a { font-weight: 500 !important; color: #4A5C6B !important; }
.shopx-filter-list a:hover,
.shopx-filter-list a:focus { color: #F8992B !important; }
.shopx-filter-list a.is-active { font-weight: 700 !important; color: #16527F !important; }

/* Rule cũ `.shopx-filter-list a span` bắt CẢ tên danh mục, nên tên đang bị bọc
   trong một viên nền xám — và viên cam khi active. Tên phải là chữ trơn. */
.shopx-filter-list a .shopx-filter-name,
.shopx-filter-list a:hover .shopx-filter-name,
.shopx-filter-list a.is-active .shopx-filter-name {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.shopx-filter-list a .shopx-filter-count-badge {
    flex: none !important;
    min-width: 26px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: #EDF2F7 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    color: #7C8FA0 !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.shopx-filter-list a:hover .shopx-filter-count-badge { background: #FDEBD6 !important; color: #E98220 !important; }
.shopx-filter-list a.is-active .shopx-filter-count-badge { background: #F8992B !important; color: #FFFFFF !important; }

/* ---------- Cooking method toggles ---------- */
.shopx-chips { gap: 7px !important; }

.shopx-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 12px 8px 9px !important;
    border: 1px solid #E4EBF2 !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4A5C6B !important;
    transition: all 0.2s ease !important;
}

.shopx-chip .shopx-chip-icon {
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #F1F6FA !important;
    color: #16527F !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.shopx-chip .shopx-chip-icon .fi { display: block !important; font-size: 12px !important; line-height: 1 !important; }

.shopx-chip .shopx-chip-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #A8B7C4 !important;
}

.shopx-chip:hover {
    border-color: #F8992B !important;
    background: #FFFAF3 !important;
    color: #16527F !important;
}

.shopx-chip:hover .shopx-chip-icon { background: #FDEBD6 !important; color: #E98220 !important; }

.shopx-chip.is-active {
    border-color: #16527F !important;
    background: #16527F !important;
    color: #FFFFFF !important;
}

.shopx-chip.is-active .shopx-chip-icon { background: rgba(255, 255, 255, 0.18) !important; color: #FFFFFF !important; }
.shopx-chip.is-active .shopx-chip-count { color: rgba(255, 255, 255, 0.75) !important; }

.shopx-chip .shopx-chip-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: inherit !important;
}

/* ---------- Clear ---------- */
.shopx-clear {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-top: 16px !important;
    padding: 10px !important;
    border: 1px dashed #D9E3EC !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #7C8FA0 !important;
    transition: all 0.2s ease !important;
}

.shopx-clear:hover { border-color: #F8992B !important; color: #E98220 !important; background: #FFFAF3 !important; }

/* ---------- Advice card ---------- */
.shopx-help {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 22px !important;
    padding: 22px 20px !important;
    border-radius: 20px !important;
    background: linear-gradient(150deg, #1A5C8C 0%, #103E70 60%, #0C3157 100%) !important;
}

/* Soft light spot so the card is not a flat rectangle of blue. */
.shopx-help::after {
    content: '' !important;
    position: absolute !important;
    top: -60px !important;
    right: -50px !important;
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(248, 153, 43, 0.28) 0%, rgba(248, 153, 43, 0) 70%) !important;
    pointer-events: none !important;
}

.shopx-help > * { position: relative !important; z-index: 1 !important; }

.shopx-help-title {
    font-family: 'Phudu', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}

.shopx-help-text { margin-bottom: 16px !important; }

@media (max-width: 849px) {
    .shopx-filter-panel { padding: 18px 16px !important; border-radius: 20px !important; }
    .shopx-help { padding: 18px 16px !important; }
}