/*
Theme Name: PMW Tools Flatsome Child
Theme URI: https://halomedia.com.vn
Description: PMW Tools child theme for Flatsome.
Author: Halo Media
Author URI: https://halomedia.com.vn
Template: flatsome
Version: 1.3.7
*/

:root {
    /* Bảng màu suy từ SỐ ĐO web mẫu bangtaihaphong.com, dịch sắc độ để
       không bị nhìn nhầm là web nhái. Xem 03-thiet-ke/DO-WEB-MAU.md */
    --btln-primary: var(--fs-color-primary, #1230A8);   /* mẫu #0403FE */
    --btln-primary-dark: #0C2278;
    --btln-action: var(--fs-color-secondary, #E8391D);  /* mẫu #FE0000 */
    --btln-action-hover: #C42D14;
    --btln-catbar: #101C63;                             /* mẫu #1F1575 */
    --btln-topbar: #EAF0F8;                             /* mẫu #FFE6DB */

    --btln-secondary: #1230A8;
    --btln-secondary-dark: #0C2278;
    --btln-ink: #0A0A0A;
    --btln-muted: #56606B;
    --btln-surface: #F4F4F4;                            /* mẫu dùng #F4F4F4 */
    --btln-border: #E1E5EA;
    --btln-footer: #2A3138;                             /* mẫu #383838 */
    --btln-radius: 4px;                                 /* mẫu bo góc 0 — mình bo nhẹ */
    --btln-shadow: 0 6px 20px rgba(10, 10, 10, .07);
}

body {
    color: var(--btln-ink);
    line-height: 1.6;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--btln-secondary-dark);
    outline-offset: 3px;
    box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06));
}

/* Header — layout remains controlled by Flatsome Theme Options. */
.header-main .searchform-wrapper .search-field,
.header-main .searchform-wrapper select,
.header-main .searchform-wrapper .submit-button {
    min-height: 46px;
}

.header-main .searchform-wrapper .search-field {
    border: 1px solid #C9D4DB;
    border-radius:4px 0 0 4px;
    box-shadow: none;
}

.header-main .searchform-wrapper .submit-button {
    min-width: 46px;
    background: var(--btln-primary);
}

.header-main .hotline_t {
    line-height: 1.25;
    white-space: nowrap;
}

.header-main .hotline_t p {
    margin: 0 0 2px;
    color: var(--btln-muted);
    font-size:12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.header-main .hotline_t > span a {
    color: var(--btln-primary-dark);
    font-size:18px;
    font-weight: 700;
}

/* Vùng chạm 44px phải đặt ở thẻ <a>, KHÔNG đặt ở <i> bên trong.
   Đặt min-width lên .icon-menu làm glyph phình thành 44×44 rồi rơi lệch trong ô —
   và min-width luôn thắng width nên mọi rule sửa sau đều vô hiệu. */
.header-main .header-cart-link,
.header-main .account-link,
.mobile-nav > li > a {
    min-width: 44px;
    min-height: 44px;
}

.header-bottom {
    box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06));
}

.header-bottom .header-bottom-nav {
    width: 100%;
    justify-content: space-between;
}

.header-bottom .nav > li > a,
.header-bottom .nav-dropdown > li > a {
    display: flex;
    min-height: 44px;
    align-items: center;
}

.header-bottom .nav > li > a {
    padding-right: 10px;
    padding-left: 10px;
    font-size:12px;
    letter-spacing: 0.01em;
}

/* Hero */
.btln-home-hero .section-content {
    width: 100%;
}

.btln-hero {
    overflow: hidden;
    isolation: isolate;
}

.btln-hero .banner-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.btln-hero--blue .banner-bg {
    background-image:
        radial-gradient(circle at 83% 50%, rgba(255, 255, 255, 0.13) 0 12%, transparent 12.5%),
        radial-gradient(circle at 83% 50%, transparent 0 20%, rgba(255, 255, 255, 0.06) 20.5% 21%, transparent 21.5%),
        linear-gradient(120deg, #0E334B 0%, #1B6FA5 58%, #102D40 100%);
}

.btln-hero--orange .banner-bg {
    background-image:
        radial-gradient(circle at 82% 50%, rgba(255, 255, 255, 0.12) 0 13%, transparent 13.5%),
        linear-gradient(120deg, #5E270D 0%, #C45D17 58%, #633015 100%);
}

.btln-hero-copy h1,
.btln-hero-copy h2 {
    max-width: 680px;
    margin: 0 0 16px;
    color: #FFFFFF;
    font-size: clamp(34px, 3.4vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.btln-hero-copy .btln-hero-lead p {
    max-width: 650px;
    margin-bottom: 22px;
    color: #F4F8FB;
    font-size:16px;
    line-height: 1.65;
}

.btln-eyebrow {
    margin-bottom: 10px;
    color: #FFFFFF;
    font-size:12px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.btln-eyebrow--dark {
    color: var(--btln-primary-dark);
}

.btln-hero-copy .button {
    min-height: 46px;
    margin: 4px 10px 4px 0;
    padding-right: 20px;
    padding-left: 20px;
}

.btln-hero-copy .button.btln-hero-primary {
    border-color: var(--btln-primary-dark);
    background-color: var(--btln-primary-dark);
    color: #FFFFFF;
}

.btln-hero-copy .button.btln-hero-primary:hover,
.btln-hero-copy .button.btln-hero-primary:focus-visible {
    border-color: #963E07;
    background-color: #963E07;
    color: #FFFFFF;
}

.btln-hero-spec .text-inner {
    display: grid;
    gap: 10px;
}

.btln-hero-spec p {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius:var(--r-1,4px);
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    font-size:22px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.btln-hero-slider .flickity-prev-next-button {
    width: 44px;
    height: 44px;
}

.btln-hero-slider .flickity-page-dots .dot {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 4px;
    padding: 20px 0;
    border: 0;
    background-clip: content-box;
}

/* Homepage category sections */
.btln-cat-head {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--btln-primary);
}

.btln-cat-head > .col {
    padding-bottom: 0;
}

.btln-cat-title {
    display: inline-flex;
    min-height: 44px;
    margin: 0;
    padding: 10px 22px;
    align-items: center;
    border-radius:4px 4px 0 0;
    background: var(--btln-primary);
    color: #FFFFFF;
    font-size:18px;
    line-height: 1.2;
    letter-spacing: 0.015em;
}

.btln-cat-subs {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.btln-cat-subs p {
    display: flex;
    min-width: max-content;
    margin: 0;
    padding: 3px 0;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.btln-cat-subs a {
    display: inline-flex;
    min-height: 38px;
    padding: 8px 9px;
    align-items: center;
    border-radius:var(--r-1,4px);
    color: #344854;
    font-size:14px;
    font-weight:600;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btln-cat-subs a:hover,
.btln-cat-subs a:focus-visible {
    background: rgba(27, 111, 165, 0.09);
    color: var(--btln-secondary-dark);
}

.btln-cat-subs a:last-child {
    color: var(--btln-primary-dark);
    font-weight: 700;
}

.btln-product-grid > .product-small > .col-inner {
    height: 100%;
}

.btln-product-grid .product-small.box {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.btln-product-grid .product-small.box:hover {
    border-color: rgba(27, 111, 165, 0.4);
    box-shadow: var(--btln-shadow);
    transform: translateY(-3px);
}

.btln-product-grid .box-image {
    overflow: hidden;
    border-bottom: 1px solid #EDF1F4;
    background: #FFFFFF;
}

.btln-product-grid .box-image img {
    object-fit: contain;
}

.btln-product-grid .box-text {
    min-height: 96px;
    padding: 14px;
    text-align: left;
}

.btln-product-grid .product-title a {
    color: #20323E;
    font-size:14px;
    font-weight: 600;
    line-height: 1.45;
}

.btln-product-grid .product-title a:hover {
    color: var(--btln-secondary);
}

/* ===== Card sản phẩm hiện đại — áp cho mọi vị trí (grid, sản phẩm tương tự, chuyên mục) ===== */
.product-small.box {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.product-small.box:hover {
    border-color: rgba(27, 111, 165, 0.4);
    box-shadow: var(--btln-shadow);
    transform: translateY(-3px);
}

.product-small .box-image {
    overflow: hidden;
    background: #FFFFFF;
    border-bottom: 1px solid #EDF1F4;
}

.product-small .box-image img {
    object-fit: contain;
}

.product-small .box-text {
    padding: 14px 14px 16px;
}

.product-small .product-title a {
    color: #20323E;
    font-weight: 600;
    line-height: 1.45;
    transition: color 0.2s ease;
}

.product-small .product-title a:hover {
    color: var(--btln-secondary);
}

/* ===== Hero trang chủ v2 (chữ trái + ảnh sản phẩm phải) ===== */
.btln-home-hero {
    overflow: hidden;
}

/* Hero giờ là: menu dọc trái + banner phải trên nền sáng.
   Nền tối toàn khối của thiết kế cũ đã bỏ. */
.btln-home-hero .btln-menu-space { min-height: 1px; }
.btln-home-hero .btln-hero-slider { border-radius:var(--r-1,4px); overflow: hidden; }

.btln-hero2-copy {
    padding: 62px 46px 62px 0;
}

.btln-hero2-copy h1 {
    margin: 0 0 16px;
    color: #FFFFFF;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.028em;
}

.btln-hero2-lead p {
    max-width: 560px;
    margin: 0;
    color: #E8F1F7;
    font-size:18px;
    line-height: 1.66;
}

.btln-hero2-media {
    padding: 34px 0;
    text-align: center;
}

.btln-hero2-media img {
    border-radius:var(--r-1,4px);
    box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
}

.btln-home-hero .button.primary:not(.is-outline) {
    border-color: var(--btln-action);
    background-color: var(--btln-action);
    color: #FFFFFF;
}

.btln-home-hero .button.primary:not(.is-outline):hover,
.btln-home-hero .button.primary:not(.is-outline):focus-visible {
    border-color: var(--btln-action-hover);
    background-color: var(--btln-action-hover);
    color: #FFFFFF;
}

@media (max-width: 849px) {
    .btln-hero2-copy {
        padding: 48px 20px 6px;
    }

    .btln-hero2-media {
        padding: 10px 0 42px;
    }
}

@media (max-width: 549px) {
    .btln-hero2-copy {
        padding: 40px 15px 4px;
    }
}

/* ===== Lưới danh mục sản phẩm (tiles trang chủ) ===== */
.btln-cats-grid {
    justify-content: center;
}

.btln-cat-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 132px;
    padding: 22px 22px 20px;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.btln-cat-link:hover {
    border-color: rgba(27, 111, 165, 0.45);
    box-shadow: var(--btln-shadow);
    transform: translateY(-3px);
}

.btln-cat-link span {
    display: block;
}

.btln-cat-name {
    color: var(--btln-ink);
    font-size:18px;
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.btln-cat-link:hover .btln-cat-name {
    color: var(--btln-secondary);
}

.btln-cat-sub {
    margin-top: 6px;
    flex-grow: 1;
    color: var(--btln-muted);
    font-size:14px;
}

.btln-cat-go {
    margin-top: 14px;
    color: var(--btln-primary-dark);
    font-size:14px;
    font-weight: 700;
}

.btln-cat-go::after {
    content: " \2192";
}

/* ===== Sidebar danh mục sản phẩm (gọn gàng) ===== */
.widget_product_categories ul.product-categories {
    margin: 0;
    list-style: none;
}

.widget_product_categories ul.product-categories li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #EDF1F4;
}

.widget_product_categories ul.product-categories li a {
    display: block;
    padding: 11px 4px;
    color: #33454F;
    font-size:14px;
    font-weight:600;
    transition: color 0.18s ease, padding 0.18s ease;
}

.widget_product_categories ul.product-categories li a:hover {
    padding-left: 9px;
    color: var(--btln-primary-dark);
}

.widget_product_categories ul.product-categories li.current-cat > a {
    color: var(--btln-primary-dark);
    font-weight: 700;
}

.widget_product_categories ul.product-categories li.current-cat > a::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius:var(--r-full,999px);
    background: var(--btln-primary);
    vertical-align: middle;
    content: "";
}

/* ===== Footer: điểm nhấn brand + hover ===== */
.btln-footer {
    border-top: 3px solid var(--btln-primary);
}

.btln-footer-menu .ux-menu-link__link {
    transition: padding 0.18s ease, color 0.18s ease;
}

.btln-footer-menu .ux-menu-link__link:hover {
    padding-left: 5px;
    color: #FFFFFF;
}

/* ===== Chi tiết sản phẩm: bo ảnh cho gọn ===== */
.single-product div.product div.images img,
.single-product .product-gallery img,
.single-product .woocommerce-product-gallery__image img {
    border-radius:var(--r-1,4px);
}

.btln-empty-state {
    display: none;
    margin: 8px 0 18px;
    padding: 18px 20px;
    border: 1px dashed #B7C6CF;
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    color: var(--btln-muted);
    text-align: center;
}

.btln-empty-state p {
    margin: 0;
}

@supports selector(.btln-cat-section:has(.product-small)) {
    .btln-cat-section:not(:has(.btln-product-grid .product-small)) .btln-empty-state {
        display: block;
    }
}

.btln-view-all {
    min-height: 44px;
    margin: 10px 0 0;
    color: var(--btln-primary-dark);
    font-weight: 700;
}

/* About */
.btln-about-copy h2,
.btln-clients h2 {
    margin-bottom: 18px;
    color: var(--btln-ink);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.btln-about-copy p {
    max-width: 720px;
    color: var(--btln-muted);
    font-size:16px;
}

.btln-about-panel > .col-inner {
    border: 1px solid var(--btln-border);
    box-shadow: var(--btln-shadow);
}

.btln-about-logo {
    margin-bottom: 18px;
}

.btln-about-panel h3 {
    margin-bottom: 16px;
    color: var(--btln-secondary-dark);
    font-size:22px;
}

.btln-about-point {
    margin-bottom: 10px;
    padding-left: 14px;
    border-left: 3px solid var(--btln-primary);
}

.btln-about-point p {
    margin: 0;
    color: #425460;
}

/* USP */
.btln-usp-item {
    min-height: 92px;
    border: 1px solid var(--btln-border);
    transition: box-shadow .2s ease, transform .2s ease;
}

.btln-usp-item:hover {
    box-shadow: var(--btln-shadow);
    transform: translateY(-2px);
}

/* Gạch nhấn cam đầu mỗi ô — dấu hiệu thị giác nhất quán với thẻ sản phẩm */
.btln-usp-item .col-inner::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    border-radius:var(--r-1,4px);
    background: var(--btln-action);
    margin-bottom: 12px;
}

.btln-usp-item h3,
.btln-usp-item h5 {
    margin-bottom: 6px;
    color: var(--btln-ink);
    font-size:16px;
    font-weight: 700;
    line-height: 1.3;
}

.btln-usp-item p {
    margin: 0;
    color: var(--btln-muted);
    font-size:14px;
    line-height: 1.55;
}

/* Client logos */
.btln-clients .btln-section-lead p {
    margin: 0;
    color: var(--btln-muted);
    font-size:16px;
}

.btln-clients-slider {
    padding: 0 16px;
}

.btln-clients-slider .img {
    padding: 8px;
}

.btln-clients-slider .img-inner {
    display: flex;
    height: 92px;
    padding: 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
}

.btln-clients-slider .img img {
    width: 100%;
    max-height: 58px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.btln-clients-slider .is-selected img,
.btln-clients-slider .img:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* ===== Lưới logo khách hàng (grid tĩnh, hiển thị màu) ===== */
.btln-logos-grid {
    max-width: 1120px;
    margin: 0 auto;
    justify-content: center;
}

.btln-logo-cell > .col-inner {
    display: flex;
    height: 104px;
    padding: 18px 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06));
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.btln-logo-cell > .col-inner:hover {
    border-color: #C6D3DB;
    box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
    transform: translateY(-3px);
}

.btln-logo-cell .img {
    width: 100%;
    line-height: 0;
}

.btln-logo-cell .img img {
    width: 100%;
    max-height: 56px;
    object-fit: contain;
}

@media (max-width: 549px) {
    .btln-logo-cell > .col-inner {
        height: 88px;
        padding: 14px 16px;
    }

    .btln-logo-cell .img img {
        max-height: 46px;
    }
}

/* Content pages */
.btln-page-hero {
    overflow: hidden;
    isolation: isolate;
}

.btln-page-hero .section-bg {
    background-image:
        radial-gradient(circle at 85% 45%, rgba(255, 255, 255, 0.10) 0 12%, transparent 12.5%),
        radial-gradient(circle at 85% 45%, transparent 0 22%, rgba(255, 255, 255, 0.05) 22.5% 23%, transparent 23.5%),
        linear-gradient(120deg, #0E334B 0%, #1B6FA5 62%, #102D40 100%);
}

.btln-page-hero h1 {
    max-width: 830px;
    margin: 0 0 16px;
    color: #FFFFFF;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.btln-page-eyebrow {
    margin: 0 0 10px;
    color: #DCECF5;
    font-size:12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.btln-page-eyebrow--dark {
    color: var(--btln-primary-dark);
}

.btln-page-lead p {
    max-width: 760px;
    margin: 0;
    color: #F1F7FA;
    font-size:18px;
    line-height: 1.65;
}

.btln-page-section[id] {
    scroll-margin-top: 110px;
}

.btln-page-section h2 {
    margin-bottom: 18px;
    color: var(--btln-ink);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.22;
    letter-spacing: -0.018em;
}

.btln-page-section h3 {
    color: var(--btln-secondary-dark);
    font-size:18px;
    line-height: 1.35;
}

.btln-page-copy p,
.btln-page-copy li,
.btln-policy-page p,
.btln-policy-page li {
    color: #425460;
    font-size:16px;
    line-height: 1.72;
}

.btln-page-copy a,
.btln-policy-page a,
.btln-contact-page a {
    color: var(--btln-primary-dark);
    font-weight: 700;
}

.btln-page-card > .col-inner {
    border: 1px solid var(--btln-border);
    box-shadow: var(--btln-shadow);
}

.btln-page-card p:last-child,
.btln-value-card p:last-child {
    margin-bottom: 0;
}

.btln-value-card > .col-inner {
    height: 100%;
    padding: 26px;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
}

.btln-value-card h3 {
    margin-bottom: 10px;
}

.btln-value-card p {
    color: #4E606C;
    font-size:14px;
    line-height: 1.65;
}

.btln-policy-copy ul,
.btln-policy-copy ol,
.btln-policy-aside ul {
    margin-left: 1.2em;
}

.btln-policy-copy li,
.btln-policy-aside li {
    margin-bottom: 12px;
    padding-left: 5px;
}

.btln-policy-notice {
    margin-top: 24px;
    padding: 18px 20px;
    border-left: 4px solid var(--btln-primary);
    border-radius:0 4px 4px 0;
    background: #FFF4EA;
}

.btln-policy-notice p {
    margin: 0;
    color: #53341E;
}

.btln-policy-aside .button {
    min-height: 46px;
    margin: 8px 0 0;
}

.btln-page-section .button.primary:not(.is-outline),
.btln-product-layout .button.primary:not(.is-outline),
.btln-support-cta .button.primary:not(.is-outline),
.btln-contact-form input[type="submit"] {
    border-color: var(--btln-action);
    background-color: var(--btln-action);
    color: #FFFFFF;
}

.btln-page-section .button.primary:not(.is-outline):hover,
.btln-page-section .button.primary:not(.is-outline):focus-visible,
.btln-product-layout .button.primary:not(.is-outline):hover,
.btln-product-layout .button.primary:not(.is-outline):focus-visible,
.btln-support-cta .button.primary:not(.is-outline):hover,
.btln-support-cta .button.primary:not(.is-outline):focus-visible,
.btln-contact-form input[type="submit"]:hover,
.btln-contact-form input[type="submit"]:focus-visible {
    border-color: var(--btln-action-hover);
    background-color: var(--btln-action-hover);
    color: #FFFFFF;
}

.btln-page-section .button.primary.is-outline,
.btln-product-layout .button.primary.is-outline {
    border-color: var(--btln-action);
    color: var(--btln-action);
}

.btln-page-section .button.primary.is-outline:hover,
.btln-page-section .button.primary.is-outline:focus-visible,
.btln-product-layout .button.primary.is-outline:hover,
.btln-product-layout .button.primary.is-outline:focus-visible {
    border-color: var(--btln-action);
    background-color: var(--btln-action);
    color: #FFFFFF;
}

.btln-status-card h3::before {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 9px;
    border-radius:var(--r-full,999px);
    background: var(--btln-primary);
    content: "";
}

.btln-news-empty > .col-inner {
    margin: 0 auto;
    padding: 46px 38px;
    border: 1px dashed #B8C7D0;
    border-radius:var(--r-1,4px);
    background: var(--btln-surface);
}

.btln-news-empty p {
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
    color: var(--btln-muted);
    font-size:16px;
}

.btln-news-empty .button {
    min-height: 46px;
    margin: 8px 5px 0;
}

.btln-contact-info > .col-inner > .text + .text {
    margin-top: 14px;
}

.btln-contact-address {
    margin-bottom: 14px;
}

.btln-contact-address > .col-inner {
    border-left: 4px solid var(--btln-secondary);
    border-radius:0 4px 4px 0;
    background: var(--btln-surface);
}

.btln-contact-address h3 {
    margin: 0 0 5px;
    font-size:16px;
}

.btln-contact-address p {
    margin: 0;
    color: #425460;
    font-size:14px;
}

.btln-contact-hotline {
    margin-top: 24px;
}

.btln-contact-hotline p {
    margin: 0;
}

.btln-contact-hotline span {
    color: var(--btln-muted);
    font-size:12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.btln-contact-hotline a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--btln-primary-dark);
    font-size:28px;
    font-weight: 700;
}

.btln-contact-form .wpcf7-form label {
    display: block;
    margin-bottom: 13px;
    color: #2F424E;
    font-size:14px;
    font-weight: 700;
}

.btln-contact-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 6px;
}

.btln-contact-form input:not([type="submit"]),
.btln-contact-form textarea {
    width: 100%;
    min-height: 48px;
    margin: 0;
    border: 1px solid #C8D4DB;
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    box-shadow: none;
}

.btln-contact-form textarea {
    min-height: 132px;
    resize: vertical;
}

.btln-contact-form input:focus,
.btln-contact-form textarea:focus {
    border-color: var(--btln-secondary);
    box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06));
}

.btln-contact-form input[type="submit"] {
    min-height: 48px;
    margin: 2px 0 0;
    border-color: var(--btln-action);
    border-radius:var(--r-1,4px);
    background: var(--btln-action);
    color: #FFFFFF;
}

.btln-contact-form .wpcf7-not-valid-tip {
    margin-top: 5px;
    font-size:12px;
}

/* Product detail — keeps the existing Flatsome custom-layout approach. */
.btln-product-breadcrumbs .breadcrumbs {
    margin: 0;
    color: var(--btln-muted);
    font-size:12px;
}

.btln-product-summary h1.product-title {
    margin-bottom: 14px;
    color: var(--btln-ink);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.22;
    letter-spacing: -0.018em;
}

.btln-product-summary form.cart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 18px 0 20px;
    align-items: stretch;
}

.btln-product-summary form.cart .quantity {
    grid-column: 1 / -1;
    float: none;
    width: max-content;
    margin: 0;
}

.btln-product-summary form.cart .quantity input,
.btln-product-summary form.cart .quantity .button,
.btln-product-summary .single_add_to_cart_button,
.btln-product-summary .btln-request-quote-button {
    min-height: 48px;
}

.btln-product-summary .single_add_to_cart_button,
.btln-product-summary .btln-request-quote-button {
    display: inline-flex;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    align-items: center;
    justify-content: center;
    border-radius:var(--r-1,4px);
    font-size:14px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btln-product-summary .single_add_to_cart_button {
    border-color: var(--btln-action);
    background: var(--btln-action);
    color: #FFFFFF;
}

.btln-product-summary .single_add_to_cart_button:hover,
.btln-product-summary .single_add_to_cart_button:focus-visible {
    border-color: var(--btln-action-hover);
    background: var(--btln-action-hover);
    color: #FFFFFF;
}

.btln-product-summary .btln-request-quote-button,
.btln-product-summary .btln-request-quote-button.is-outline {
    border: 2px solid var(--btln-secondary);
    background: #FFFFFF;
    color: var(--btln-secondary-dark);
}

.btln-product-summary .btln-request-quote-button:hover,
.btln-product-summary .btln-request-quote-button:focus-visible,
.btln-product-summary .btln-request-quote-button.is-outline:hover,
.btln-product-summary .btln-request-quote-button.is-outline:focus-visible {
    border-color: var(--btln-secondary-dark);
    background: var(--btln-secondary-dark);
    color: #FFFFFF;
}

.btln-product-summary form.cart[aria-busy="true"] .btln-request-quote-button {
    cursor: wait;
    opacity: 0.72;
}

.btln-product-summary .btln-request-quote-button.is-loading::after {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius:var(--r-full,999px);
    content: "";
    animation: btln-quote-spin 0.75s linear infinite;
}

@keyframes btln-quote-spin {
    to {
        transform: rotate(360deg);
    }
}

.btln-product-benefits > .col-inner,
.btln-product-support-card > .col-inner {
    border: 1px solid var(--btln-border);
    background: var(--btln-surface);
}

.btln-product-benefit {
    margin-bottom: 17px;
    align-items: flex-start;
}

.btln-product-benefit .icon-box-img {
    flex: 0 0 42px;
}

.btln-product-benefit .icon-inner {
    padding: 7px;
    border-radius:var(--r-full,999px);
    background: #FFFFFF;
    box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
}

.btln-product-benefit h5 {
    margin-bottom: 3px;
    color: var(--btln-secondary-dark);
    font-size:14px;
    line-height: 1.35;
}

.btln-product-benefit p {
    margin: 0;
    color: #52636E;
    font-size:12px;
    line-height: 1.5;
}

.btln-product-support-wrap {
    margin-top: 14px;
}

.btln-product-support-card h3 {
    margin-bottom: 8px;
    color: var(--btln-ink);
    font-size:18px;
}

.btln-product-support-card p {
    color: #52636E;
    font-size:14px;
    line-height: 1.55;
}

.btln-product-support-card .button {
    min-height: 44px;
    margin: 5px 0 0;
}

.btln-product-support-contact p {
    margin: 12px 0 0;
    color: var(--btln-ink);
}

.btln-product-support-contact a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--btln-primary-dark);
    font-weight: 700;
}

/* Cart request flow — no monetary columns or totals. */
.btln-request-cart .product-quantity {
    width: 150px;
    text-align: center;
}

.btln-request-cart td.product-quantity .quantity {
    margin-right: auto;
    margin-left: auto;
}

.btln-request-cart .actions .button {
    min-height: 44px;
    border-radius:var(--r-1,4px);
}

.btln-cart-next-step {
    padding: 24px;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: var(--btln-surface);
    box-shadow: var(--btln-shadow);
}

.btln-cart-next-step h2 {
    margin-bottom: 10px;
    color: var(--btln-ink);
    font-size:22px;
    line-height: 1.3;
}

.btln-cart-next-step > p {
    color: var(--btln-muted);
}

.btln-cart-next-step .btln-cart-checkout-button {
    display: flex;
    min-height: 50px;
    margin: 18px 0 10px;
    align-items: center;
    justify-content: center;
    border-color: var(--btln-action);
    border-radius:var(--r-1,4px);
    background: var(--btln-action);
    color: #FFFFFF;
}

.btln-cart-next-step .btln-cart-checkout-button:hover,
.btln-cart-next-step .btln-cart-checkout-button:focus-visible {
    border-color: var(--btln-action-hover);
    background: var(--btln-action-hover);
    color: #FFFFFF;
}

.btln-cart-next-step .btln-cart-next-step__note {
    margin: 0;
    font-size:12px;
    text-align: center;
}

.btln-mini-cart-quantity {
    color: var(--btln-muted);
    font-size:12px;
}

/* Quote checkout — short, touch-friendly and visually consistent. */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
    margin-bottom: 18px;
    color: var(--btln-ink);
    font-size:22px;
    line-height: 1.3;
}

.woocommerce-checkout .form-row label {
    margin-bottom: 5px;
    color: var(--btln-ink);
    font-weight: 600;
}

.woocommerce-checkout .woocommerce-billing-fields .input-text {
    min-height: 48px;
    border: 1px solid #C9D4DB;
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    color: var(--btln-ink);
    font-size:16px;
    box-shadow: none;
}

.woocommerce-checkout .woocommerce-billing-fields .input-text:focus {
    border-color: var(--btln-secondary);
    box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06));
}

.woocommerce-checkout #place_order {
    width: 100%;
    min-height: 50px;
    margin: 0;
    border-color: var(--btln-action);
    border-radius:var(--r-1,4px);
    background: var(--btln-action);
    color: #FFFFFF;
    font-size:16px;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus-visible {
    border-color: var(--btln-action-hover);
    background: var(--btln-action-hover);
    color: #FFFFFF;
}

.woocommerce-checkout .btln-request-review-table,
.woocommerce-checkout .btln-request-review-table th,
.woocommerce-checkout .btln-request-review-table td {
    width: 100%;
}

.woocommerce-checkout .btln-request-review-table .product-name {
    text-align: left;
}

.woocommerce-checkout .btln-request-review-table td.product-name {
    padding-top: 14px;
    padding-bottom: 14px;
}

.woocommerce-checkout .btln-request-review-table .product-quantity {
    float: right;
    color: var(--btln-secondary-dark);
    white-space: nowrap;
}

.btln-product-details .product-section {
    border-top-color: var(--btln-border);
}

.btln-product-latest > .col-inner {
    padding: 20px;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: var(--btln-surface);
}

.btln-service-item {
    min-height: 70px;
    align-items: center;
}

.btln-service-item h5,
.btln-service-item p {
    color: #FFFFFF;
}

.btln-service-item h5 {
    margin-bottom: 3px;
    font-size:14px;
}

.btln-service-item p {
    margin: 0;
    font-size:12px;
    line-height: 1.45;
}

.btln-support-cta h2 {
    margin: 0 0 8px;
    color: #FFFFFF;
    font-size: clamp(26px, 3vw, 36px);
}

.btln-support-cta p {
    margin: 0;
    color: #E3EEF4;
}

.btln-support-cta-actions .button {
    min-height: 46px;
    margin: 5px 0 5px 8px;
}

/* Footer */
.btln-footer {
    color: #D7E0E6;
}

.btln-footer-title {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 12px;
    color: #FFB777;
    font-size:14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.btln-footer-title::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    border-radius:var(--r-1,4px);
    background: var(--btln-primary);
    content: "";
}

.btln-footer p {
    color: #D7E0E6;
}

.btln-footer-menu .ux-menu-link__link {
    min-height: 44px;
    padding: 8px 0;
    align-items: center;
    color: #D7E0E6;
    font-size:14px;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.btln-footer-menu .ux-menu-link__link:hover,
.btln-footer-menu .ux-menu-link__link:focus-visible {
    padding-left: 4px;
    color: #FFFFFF;
}

.btln-footer-address-item p {
    margin: 0 0 11px;
    color: #D7E0E6;
    font-size:12px;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

.btln-footer-address-item strong {
    color: #FFFFFF;
    font-weight: 700;
}

.btln-footer-address-item .btln-footer-company {
    margin-bottom: 14px;
    color: #FFFFFF;
    font-size:14px;
    font-weight: 700;
    line-height: 1.4;
}

.btln-footer-address-item a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: #FFB777;
    font-size:16px;
    font-weight: 700;
}

.btln-footer-social p {
    display: flex;
    margin: 0 0 18px;
    flex-wrap: wrap;
    gap: 8px;
}

.btln-footer-social span {
    display: inline-flex;
    min-height: 44px;
    padding: 8px 10px;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius:var(--r-1,4px);
    color: #FFFFFF;
    font-size:12px;
    font-weight: 600;
}

.btln-footer-social i {
    font-size:18px;
}

.btln-footer-bct {
    max-width: 190px;
}

.btln-footer-bct .img-inner {
    overflow: hidden;
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
}

.btln-footer-hotline span {
    color: #BFD0DA;
    font-size:12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.btln-footer-hotline a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: #FFB777;
    font-size:22px;
    font-weight: 700;
}

.btln-footer-cta .button {
    min-height: 44px;
    margin-bottom: 10px;
}

.absolute-footer a {
    color: #FFFFFF;
}

/* ===== Footer nâng cấp UI/UX ===== */
.btln-footer-menu .ux-menu-link__link {
    position: relative;
    padding-left: 15px;
}

.btln-footer-menu .ux-menu-link__link::before {
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 700;
    transition: color 0.2s ease, transform 0.2s ease;
    content: "\203A";
}

.btln-footer-menu .ux-menu-link__link:hover,
.btln-footer-menu .ux-menu-link__link:focus-visible {
    padding-left: 19px;
    color: #FFFFFF;
}

.btln-footer-menu .ux-menu-link__link:hover::before,
.btln-footer-menu .ux-menu-link__link:focus-visible::before {
    color: var(--btln-primary);
    transform: translateX(2px);
}

.btln-footer-social span {
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btln-footer-social span:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.btln-footer-social span:first-child:hover {
    border-color: #1877F2;
    background: #1877F2;
}

.btln-footer-social span:last-child:hover {
    border-color: #FF0000;
    background: #FF0000;
}

.absolute-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== Sidebar shop/product — card sạch, tiêu đề gọn (bỏ thanh cam chói) ===== */
.widget:has(> .widget-title.shop-sidebar),
.widget:has(> .widget-title.product-sidebar) {
    margin-bottom: 22px;
    padding: 0 20px 14px;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    background: #FFFFFF;
    box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
}

.widget > span.widget-title.shop-sidebar,
.widget > span.widget-title.product-sidebar {
    display: block;
    position: relative;
    height: auto !important;
    margin: 0 -20px 8px !important;
    padding: 15px 20px !important;
    overflow: visible !important;
    border: 0;
    border-bottom: 1px solid var(--btln-border);
    background: none !important;
    background-color: transparent !important;
    color: var(--btln-ink) !important;
    font-size:16px !important;
    font-weight: 700;
    line-height: 1.3 !important;
    letter-spacing: 0.01em;
    text-transform: none;
}

.widget-title.shop-sidebar::before,
.widget-title.product-sidebar::before {
    position: absolute;
    left: 20px;
    bottom: -1px;
    width: 40px;
    height: 3px;
    border-radius:var(--r-1,4px);
    background: var(--btln-primary);
    content: "" !important;
}

.widget-title.shop-sidebar::after,
.widget-title.product-sidebar::after {
    display: none !important;
}

/* Widget "Sản phẩm bạn vừa xem" (mini product list) */
.product_list_widget li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #EDF1F4;
}

.product_list_widget li:last-child {
    border-bottom: 0;
}

.product_list_widget li img {
    width: 50px;
    height: 50px;
    margin: 0;
    flex: 0 0 50px;
    border: 1px solid var(--btln-border);
    border-radius:var(--r-1,4px);
    object-fit: contain;
    background: #FFFFFF;
}

.product_list_widget li a {
    color: #33454F;
    font-size:14px;
    font-weight:600;
    line-height: 1.4;
    transition: color 0.18s ease;
}

.product_list_widget li a:hover {
    color: var(--btln-primary-dark);
}

@media (max-width: 849px) {
    .header-bottom .header-bottom-nav {
        justify-content: flex-start;
    }

    .btln-cat-subs p {
        justify-content: flex-start;
    }

    .btln-cat-subs a {
        min-height: 44px;
    }

    .btln-about-panel {
        margin-top: 10px;
    }

    .btln-page-card,
    .btln-policy-aside,
    .btln-contact-form {
        margin-top: 18px;
    }

    .btln-product-side,
    .btln-product-latest {
        margin-top: 22px;
    }

    .btln-footer-col {
        margin-bottom: 12px;
    }

    .btln-value-card p,
    .btln-contact-address p,
    .btln-footer-address-item p,
    .btln-footer-menu .ux-menu-link__link {
        font-size:16px;
        line-height: 1.55;
    }

    .btln-footer-social span {
        font-size:14px;
    }
}

@media (max-width: 549px) {
    .btln-hero-slider .flickity-prev-next-button {
        display: none;
    }

    .btln-hero-copy h1,
    .btln-hero-copy h2 {
        margin-bottom: 14px;
        font-size:28px;
    }

    .btln-page-hero h1 {
        font-size:28px;
    }

    .btln-page-lead p {
        font-size:16px;
        line-height: 1.58;
    }

    .btln-page-section h2 {
        font-size:28px;
    }

    .btln-news-empty > .col-inner {
        padding: 32px 20px;
    }

    .btln-news-empty .button {
        display: flex;
        width: 100%;
        margin: 8px 0 0;
        justify-content: center;
    }

    .btln-support-cta-actions .button {
        display: flex;
        width: 100%;
        margin: 7px 0 0;
        justify-content: center;
    }

    .btln-support-cta-actions {
        margin-top: 14px;
        text-align: left;
    }

    .btln-hero-copy .btln-hero-lead p {
        margin-bottom: 16px;
        font-size:16px;
        line-height: 1.55;
    }

    .btln-eyebrow {
        font-size:12px;
        letter-spacing: 0.09em;
    }

    .btln-hero-copy .button {
        display: flex;
        width: 100%;
        margin: 7px 0;
        justify-content: center;
    }

    .btln-cat-title {
        width: 100%;
        border-radius:4px 4px 0 0;
    }

    .btln-cat-head {
        margin-bottom: 16px;
    }

    .btln-product-grid .box-text {
        min-height: 136px;
        padding: 12px 10px 62px;
    }

    .btln-product-grid .product-title a {
        font-size:14px;
    }

    .btln-product-grid .btln-btn-quote {
        right: 8px;
        bottom: 8px;
    }

    .btln-request-cart .product-quantity {
        width: auto;
        text-align: right;
    }

    .btln-cart-next-step {
        padding: 20px;
    }

    .btln-usp-item {
        min-height: auto;
    }

    .btln-clients-slider {
        padding: 0 8px;
    }

    .btln-footer-hotline a {
        font-size:22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }

    .btln-product-grid .product-small.box:hover {
        transform: none;
    }
}

/* ===== Trang Giới thiệu (About) ===== */
.btln-about-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius:var(--r-1,4px);
    box-shadow: var(--btln-shadow);
}

.btln-about-figure-cap p {
    margin: 14px 0 0;
    color: var(--btln-muted);
    font-size:14px;
    line-height: 1.55;
}

.btln-about-values .btln-value-card {
    margin-bottom: 0;
}

.btln-vm-card > .col-inner {
    height: 100%;
    padding: 30px 32px;
    border: 1px solid var(--btln-border);
    border-left: 4px solid var(--btln-primary);
    border-radius:var(--r-1,4px);
    background: var(--btln-surface);
}

.btln-vm-card h3 {
    margin: 4px 0 12px;
    color: var(--btln-ink);
    font-size:22px;
    line-height: 1.32;
    letter-spacing: -0.01em;
}

.btln-vm-card p {
    margin: 0;
    color: #425460;
    font-size:16px;
    line-height: 1.7;
}

.btln-cta-band h2 {
    margin: 0 0 10px;
    color: #FFFFFF;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.btln-cta-band p {
    margin: 0;
    max-width: 620px;
    color: #DBE7EF;
    font-size:16px;
    line-height: 1.6;
}

.btln-cta-actions .button {
    margin: 0 0 12px 12px;
}

/* Đảm bảo tương phản WCAG AA cho nút primary trên hero & CTA band (#B9510A = 4.95:1) */
.btln-page-hero .button.primary:not(.is-outline),
.btln-cta-band .button.primary:not(.is-outline) {
    border-color: var(--btln-action);
    background-color: var(--btln-action);
    color: #FFFFFF;
}

.btln-page-hero .button.primary:not(.is-outline):hover,
.btln-page-hero .button.primary:not(.is-outline):focus-visible,
.btln-cta-band .button.primary:not(.is-outline):hover,
.btln-cta-band .button.primary:not(.is-outline):focus-visible {
    border-color: var(--btln-action-hover);
    background-color: var(--btln-action-hover);
    color: #FFFFFF;
}

@media (max-width: 849px) {
    .btln-about-figure {
        margin-top: 26px;
    }

    .btln-cta-actions {
        margin-top: 20px;
        text-align: left !important;
    }

    .btln-cta-actions .button {
        margin: 0 12px 12px 0;
    }
}

/* ─── Logo chữ: thu nhỏ trên mobile để không tràn dòng ─────────────── */
@media (max-width: 849px) {
    #logo a,
    #logo .logo-text {
        font-size:18px !important;
        line-height: 1.12;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }
    #logo img { max-height: 42px; }
}

/* ─── Tiêu đề section: theo đúng số đo web mẫu ────────────────────────
   Đo được: 28px, weight 700, màu #0A0A0A, KHÔNG có nền màu.
   Thiết kế cũ dùng hộp xanh đậm — sai so với mẫu, đã bỏ. */
.btln-cat-title {
    display: block;
    margin: 0;
    padding: 0;
    background: none !important;
    color: var(--btln-ink);
    font-size:28px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.btln-cat-head {
    padding-bottom: 12px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--btln-border);
}

.btln-cat-head .btln-cat-subs p { margin: 0; }

.btln-cat-head .btln-cat-subs a {
    margin-left: 18px;
    color: var(--btln-muted);
    font-size:14px;
}

.btln-cat-head .btln-cat-subs a:last-child {
    color: var(--btln-primary);
    font-weight: 700;
}

.btln-cat-head .btln-cat-subs a:hover { color: var(--btln-action); }

@media (max-width: 549px) {
    .btln-cat-title { font-size:22px; }
    .btln-cat-head .btln-cat-subs a { margin: 0 14px 0 0; font-size:12px; }
}

/* ─── Khối CAM KẾT — nền tối, chữ trắng (mẫu dùng #666) ───────────── */
.btln-cat-title--light { color: #FFFFFF !important; }

.btln-commit .btln-cat-title--light {
    margin-bottom: 26px;
    text-align: center;
}

.btln-commit-item .col-inner::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    border-radius:var(--r-1,4px);
    background: var(--btln-action);
    margin-bottom: 12px;
}

.btln-commit-item h3 {
    margin-bottom: 6px;
    color: #FFFFFF;
    font-size:16px;
    font-weight: 700;
}

.btln-commit-item p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size:14px;
    line-height: 1.55;
}

/* ─── Khối NHỮNG CON SỐ ─────────────────────────────────────────── */
.btln-stats .btln-cat-title { text-align: center; margin-bottom: 24px; }

.btln-stat h3 {
    margin-bottom: 2px;
    color: var(--btln-primary);
    font-size:38px;
    font-weight:700;
    line-height: 1.1;
}

.btln-stat p {
    margin: 0;
    color: var(--btln-muted);
    font-size:14px;
}

/* ─── Thẻ ngành ứng dụng ────────────────────────────────────────── */
.btln-use-card .col-inner {
    background: #FFFFFF;
    border-radius:var(--r-1,4px);
    overflow: hidden;
    height: 100%;
    transition: box-shadow .2s ease;
}

.btln-use-card:hover .col-inner { box-shadow: var(--btln-shadow); }

.btln-use-card .ux-text,
.btln-use-card .text { padding: 16px 18px 20px; }

.btln-use-card h3 {
    margin-bottom: 6px;
    color: var(--btln-ink);
    font-size:16px;
    font-weight: 700;
}

.btln-use-card p {
    margin: 0;
    color: var(--btln-muted);
    font-size:14px;
    line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════════
   SỬA VÙNG HEADER + MENU DỌC + BANNER
   Đo được 5 lỗi (xem _scripts/do-hero.mjs):
   ① 148px khoảng trắng chết dưới menu dọc
   ② logo chữ xuống 2 dòng
   ③ nút CTA ra màu xanh đậm thay vì đỏ cam
   ④ header 199px trong khi mẫu 150px
   ⑤ menu và banner lệch 37px
   ══════════════════════════════════════════════════════════════════ */

/* ① Menu dọc cao bằng banner — 5 mục × 62px + đệm ≈ 330px */
.header-vertical-menu__fly-out .ux-nav-vertical-menu > li > a,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > a.nav-top-link {
    /* Mẫu: 11 mục lấp vừa chiều cao banner (330 ÷ 11 = 30px/mục).
       20px trên+dưới làm mục cao 71px → menu dài 792px, lệch hẳn bố cục. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 29px;
    line-height: 29px;
    font-size: var(--fs-2, 14px);
    font-weight: 400;
    display: flex;
    align-items: center;
}

.header-vertical-menu__fly-out {
    padding: 6px 0;
}

/* ⑤ Kéo menu xuống thẳng hàng đỉnh banner */
.home .header-vertical-menu__fly-out--open {
    margin-top: 7px;
}

/* ② Logo chữ một dòng, cân với header */
#logo a,
#logo .logo-text {
    font-size:22px !important;
    line-height: 1.12;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* ③ Nút chính trong hero + dải CTA phải là màu hành động */
.btln-hero-copy a.button.primary:not(.is-outline),
.btln-hero-copy a.button.secondary:not(.is-outline),
.btln-cta-actions a.button.primary:not(.is-outline),
.btln-cta-actions a.button.secondary:not(.is-outline) {
    background-color: var(--btln-action);
    border-color: var(--btln-action);
    color: #FFFFFF;
}

.btln-hero-copy a.button.primary:not(.is-outline):hover,
.btln-hero-copy a.button.secondary:not(.is-outline):hover,
.btln-cta-actions a.button.primary:not(.is-outline):hover,
.btln-cta-actions a.button.secondary:not(.is-outline):hover {
    background-color: var(--btln-action-hover);
    border-color: var(--btln-action-hover);
}

/* ④ Header gọn lại — top bar mảnh như mẫu */
.header-top,
.header-top .flex-row,
.header-top .header-inner { min-height: 32px !important; height: 32px; }
.header-bottom,
.header-bottom .flex-row { min-height: 50px !important; height: 50px; }
.header-top,
.header-top a,
.header-top span { font-size:12px; line-height: 1.3; }

/* Hero sát header, không chừa khoảng thừa */
.btln-home-hero { padding-top: 0 !important; }
.btln-home-hero .btln-menu-space { min-height: 0; }

/* Chữ hero cân với banner 330px */
.btln-hero-copy h1 { font-size:38px; line-height: 1.18; margin-bottom: 10px; }
.btln-hero-copy .btln-eyebrow { font-size:12px; letter-spacing: 2px; margin-bottom: 8px; }
.btln-hero-copy .btln-hero-lead p { font-size:16px; margin-bottom: 16px; }

@media (max-width: 849px) {
    .btln-hero-copy h1 { font-size:28px; }
    #logo a, #logo .logo-text { font-size:18px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   SỬA THEO BÁO CÁO QC AGENT (6/10 thẩm mỹ · 5/10 đối chiếu mẫu)
   ══════════════════════════════════════════════════════════════════ */

/* ② MOBILE VỠ CONTAINER — chữ dính mép x=0, thẻ bị cắt mép phải */
@media (max-width: 849px) {
    .btln-home-hero .row,
    .btln-cat-section .row,
    .btln-cat-grid-section .row,
    .btln-page-section .row,
    .btln-commit .row,
    .btln-stats .row,
    .btln-cta-band .row { margin-left: 0 !important; margin-right: 0 !important; }

    .btln-home-hero,
    .btln-cat-section,
    .btln-cat-grid-section,
    .btln-page-section,
    .btln-commit,
    .btln-stats,
    .btln-cta-band { padding-left: 15px !important; padding-right: 15px !important; }

    .btln-hero-copy .text-box-content { padding-left: 4px; padding-right: 4px; }
    .btln-cat-head { flex-wrap: wrap; }
}

/* ③ NÚT CTA TRONG THẺ — 5 nút đỏ đặc liền kề thành mảng chói.
   Đổi sang viền, chỉ tô đặc khi rê chuột. */
.product-small a.button.btln-btn-quote {
    background-color: transparent;
    border: 1px solid var(--btln-action);
    color: var(--btln-action);
    font-weight: 600;
}

.product-small a.button.btln-btn-quote:hover {
    background-color: var(--btln-action);
    border-color: var(--btln-action);
    color: #FFFFFF;
}

/* ④ HERO — eyebrow đè vùng sáng của ảnh nền, phủ gradient tối từ trái */
.btln-hero .banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9,17,45,.82) 0%, rgba(9,17,45,.55) 46%, rgba(9,17,45,.12) 100%);
    pointer-events: none;
}

/* Hai nút hero cùng chiều cao, nút chính không nhỏ hơn nút phụ */
.btln-hero-copy .button { min-height: 48px; line-height: 46px; padding: 0 22px; }
.btln-hero-copy .btln-hero-primary { min-width: 180px; }

/* Chỉ báo slide xuống đáy, không đè nút */
.btln-hero-slider .flickity-page-dots { bottom: 14px; }

/* ⑤ MENU DỌC — Flatsome ĐÃ tự vẽ mũi tên cho mục có con (get_flatsome_icon).
   Thêm ::after nữa là ra 2 mũi tên/dòng. Chỉ chỉnh lại mũi tên sẵn có. */
.header-vertical-menu__fly-out .menu-item-has-children > a > .icon-angle-down{
    margin-left:auto; opacity:.5; transform:rotate(-90deg);
}

/* ⑥ NÚT NỔI DESKTOP — mẫu có, mình thiếu */
@media (min-width: 850px) {
    .btln-mobilebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 14px;
        bottom: 20px;
        right: auto;
        width: auto;
        gap: 8px;
        box-shadow: none;
        z-index: 999;
    }
    .btln-mobilebar__btn {
        min-height: 46px;
        min-width: 46px;
        padding: 0 16px;
        border-radius:var(--r-1,4px);
        font-size:14px;
        box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
    }
    body { padding-bottom: 0; }
}

/* Thanh mobile: bo góc trên, thấp hơn */
@media (max-width: 849px) {
    .btln-mobilebar { border-radius:4px 4px 0 0; overflow: hidden; }
    .btln-mobilebar__btn { min-height: 48px; }
    body { padding-bottom: 48px; }
}

/* Dải 3 ô cam kết ngay dưới banner — mẫu có, mình bổ sung */
/* Dải USP — khách nói xấu. Vấn đề: h3 và p CÙNG 14px nên không có phân cấp,
   không dấu hiệu thị giác nào, trông như một thanh chữ suông. */
.btln-strip { margin-top: var(--sp-2,16px); }
.btln-strip-row { background: var(--btln-primary); border-radius:var(--r-1,4px); overflow: hidden; }
.btln-strip-item + .btln-strip-item { border-left: 1px solid rgba(255,255,255,.16); }
.btln-strip-item .col-inner { display:flex; align-items:flex-start; gap: var(--sp-2,16px); }
/* dấu hiệu thị giác: ô vuông nhỏ màu nhấn, đánh số thứ tự bước làm việc */
.btln-strip-item .col-inner::before {
    counter-increment: btln-usp; content: counter(btln-usp,decimal-leading-zero);
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-1,4px);
    background: var(--btln-action); color:#fff; font-size: var(--fs-1,12px); font-weight: 700;
    display: flex; align-items: center; justify-content: center; letter-spacing: .5px;
}
.btln-strip-row { counter-reset: btln-usp; }
.btln-strip-item h3 { margin: 0 0 4px; color: #fff; font-size: var(--fs-3,16px);
    font-weight: 700; letter-spacing: -.2px; line-height: 1.3; }
.btln-strip-item p  { margin: 0; color: rgba(255,255,255,.76); font-size: var(--fs-2,14px);
    line-height: 1.45; font-weight: 400; }
@media (max-width: 849px) { .btln-strip-item .col-inner { gap: var(--sp-1,8px); } }
@media (max-width: 549px) {
    .btln-strip-item + .btln-strip-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
}

/* ══════════════════════════════════════════════════════════════════
   SỬA THEO QC VÒNG 2 (6,5/10 · 6/10)
   ══════════════════════════════════════════════════════════════════ */

/* ② Logo dính pill "Tất cả sản phẩm" — khoảng cách 0px */
#logo { margin-right: 28px; }

/* ③ Chữ hero không có padding trái, chữ V bị xẻ đôi ở mép banner */
.btln-hero-copy .text-box-content { padding-left: 40px; padding-right: 24px; }
@media (max-width: 849px) {
    .btln-hero-copy .text-box-content { padding-left: 18px; padding-right: 18px; }
}

/* ④ Tile danh mục: 5 tone màu lệch nhau, nhãn trắng không đọc được.
   Đồng bộ sắc độ + phủ navy cố định để nhãn luôn nổi. */
.btln-cats-grid .box-category .box-image img {
    filter: saturate(.72) contrast(1.05);
}
.btln-cats-grid .box-category .box-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,31,84,.20) 0%, rgba(11,31,84,.72) 100%);
    pointer-events: none;
}
.btln-cats-grid .box-category .box-text {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px;
    z-index: 2;
}
.btln-cats-grid .box-category .box-text .header-title {
    color: #fff;
    font-size:14px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ⑤ 22 nút đỏ đặc lấn át navy thương hiệu -> viền navy, đỏ chỉ dành cho hero + trang SP */
.product-small a.button.btln-btn-quote {
    background-color: transparent;
    border: 1px solid var(--btln-primary);
    color: var(--btln-primary);
}
.product-small a.button.btln-btn-quote:hover {
    background-color: var(--btln-primary);
    border-color: var(--btln-primary);
    color: #fff;
}

/* ⑥ Mobile hero: nút bị cắt đôi, chấm slider đè lên nút */
@media (max-width: 849px) {
    .btln-hero { min-height: 460px; }
    .btln-hero .banner-inner { overflow: visible; }
    .btln-hero-copy .button { display: block; width: 100%; margin: 0 0 10px; min-height: 46px; line-height: 44px; }
    .btln-hero-slider .flickity-page-dots { bottom: 6px; }
    .btln-hero-copy .btln-eyebrow { font-size:12px; letter-spacing: 1px; }
}

/* ⑦ Trang tin tức: badge ngày thò ra ngoài ảnh, lưới răng cưa */
.blog-archive .badge-inner,
.post-item .badge-inner { left: 12px; top: 12px; border-radius:var(--r-1,4px); }
.post-item .post-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.post-item .from_the_blog_excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ⑧ Chiều rộng container thống nhất — trang Ứng dụng đang lệch 31px */
.btln-page-hero .row,
.btln-page-section .row,
.btln-about .row { max-width: 1230px; margin-left: auto; margin-right: auto; }

/* ⑨ Menu dọc và banner cùng bo góc, cùng đáy */
.header-vertical-menu__fly-out { border-radius:var(--r-1,4px); }
.btln-hero { border-radius:var(--r-1,4px); overflow: hidden; }

/* ⑩ Trang chi tiết SP: 230px trắng dưới dòng "Danh mục:" */
.btln-product-summary { display: flex; flex-direction: column; }
.btln-product-summary .product_meta { margin-top: auto; padding-top: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   HỆ TOKEN THỐNG NHẤT — nạp CUỐI để đè mọi giá trị rời rạc phía trên.
   Lý do: đo được 11 bo góc · 24 cỡ chữ · 22 mức khoảng cách → "mỗi nơi một
   phong cách". Xem PRD § F9.
   Ngưỡng: 3 bo góc · 8 cỡ chữ · 6 khoảng cách · 3 kiểu nút · 2 kiểu thẻ.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Bo góc — CHỈ 3 giá trị */
    --r-0: 0;
    --r-1: 4px;
    --r-full: 999px;

    /* Cỡ chữ — CHỈ 8 giá trị */
    --fs-1: 12px;   /* nhãn nhỏ, chú thích */
    --fs-2: 14px;   /* phụ, meta */
    --fs-3: 16px;   /* thân bài */
    --fs-4: 18px;   /* thân nhấn, h4 */
    --fs-5: 22px;   /* h3 */
    --fs-6: 28px;   /* h2 — tiêu đề section */
    --fs-7: 38px;   /* h1 trang trong */
    --fs-8: 48px;   /* h1 hero desktop */

    /* Khoảng cách — bội số 8, CHỈ 6 giá trị */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 48px;
    --sp-6: 64px;

    /* Đổ bóng — CHỈ 2 */
    --sh-1: 0 2px 8px rgba(10, 10, 10, .06);
    --sh-2: 0 8px 24px rgba(10, 10, 10, .12);
}

/* ── ĐỒNG NHẤT BO GÓC ───────────────────────────────────────────────── */
.box, .box-image, .col-inner, .product-small, .post-item .box,
.btln-use-card .col-inner, .btln-strip-row, .btln-hero,
.header-vertical-menu__fly-out, .ux-image, img,
.btln-about-panel, .btln-commit-item .col-inner,
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    border-radius:var(--r-1,4px)!important;
}

.button, a.button, input[type="submit"] { border-radius:var(--r-1,4px)!important; }

/* ── ĐỒNG NHẤT KIỂU CHỮ ─────────────────────────────────────────────── */
body, p, li, td { font-size: var(--fs-3); line-height: 1.6; }
.btln-cat-title, h2 { font-size: var(--fs-6) !important; font-weight: 700; line-height: 1.25; }
h3 { font-size: var(--fs-5) !important; font-weight: 700; line-height: 1.3; }
h4, .product-title, .post-title { font-size: var(--fs-4) !important; font-weight: 600; line-height: 1.35; }
.btln-eyebrow, .btln-page-eyebrow { font-size: var(--fs-1) !important; font-weight: 700; letter-spacing: 1.6px; }
.btln-cat-subs a, .post-meta, .from_the_blog_excerpt, small { font-size: var(--fs-2) !important; }

.btln-hero-copy h1 { font-size: var(--fs-7) !important; line-height: 1.18; }
@media (min-width: 1200px) { .btln-hero-copy h1 { font-size: var(--fs-8) !important; } }
@media (max-width: 849px) {
    .btln-hero-copy h1 { font-size: var(--fs-6) !important; }
    .btln-cat-title, h2 { font-size: var(--fs-5) !important; }
}

/* ── ĐỒNG NHẤT KHOẢNG CÁCH SECTION — chỉ 2 nhịp ─────────────────────── */
.btln-cat-section, .btln-page-section, .btln-cat-grid-section,
.btln-about, .btln-stats { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }
.btln-commit, .btln-cta-band { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }
@media (max-width: 849px) {
    .btln-cat-section, .btln-page-section, .btln-cat-grid-section,
    .btln-about, .btln-stats, .btln-commit, .btln-cta-band {
        padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important;
    }
}

/* ── ĐỒNG NHẤT TIÊU ĐỀ SECTION — CHỈ MỘT KIỂU ───────────────────────── */
.btln-cat-head {
    padding-bottom: var(--sp-1);
    margin-bottom: var(--sp-3);
    border-bottom: 2px solid var(--btln-border);
}
.btln-cat-title { position: relative; padding-bottom: var(--sp-1); }
.btln-cat-title::after {
    content: ""; position: absolute; left: 0; bottom: -10px;
    width: 56px; height: 3px; background: var(--btln-action);
}
.btln-cat-title--light::after { background: #fff; }

/* ── ĐỒNG NHẤT NÚT — CHỈ 3 KIỂU ─────────────────────────────────────── */
.button, a.button, input[type="submit"] {
    min-height: 44px; line-height: 42px; padding: 0 var(--sp-3);
    font-size: var(--fs-2); font-weight: 600; letter-spacing: .2px;
    text-transform: none;
}
.button.is-large, a.button.is-large { min-height: 50px; line-height: 48px; padding: 0 var(--sp-4); font-size: var(--fs-3); }
.button.is-small, a.button.is-small { min-height: 38px; line-height: 36px; padding: 0 var(--sp-2); font-size: var(--fs-1); }

/* ── ĐỒNG NHẤT THẺ — CHỈ 2 KIỂU ─────────────────────────────────────── */
.product-small.box, .post-item .box, .btln-use-card .col-inner {
    background: #fff;
    border: 1px solid var(--btln-border);
    box-shadow: none;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.product-small.box:hover, .post-item .box:hover, .btln-use-card .col-inner:hover {
    border-color: transparent; box-shadow: var(--sh-2);
}
.product-small .box-text { padding: var(--sp-2); }

/* ── ĐỒNG NHẤT ẢNH — cùng sắc độ, không mỗi ảnh một tông ────────────── */
.product-small .box-image img,
.btln-cats-grid .box-image img,
.btln-use-card img { filter: saturate(.8) contrast(1.04); }

/* ═══════════════════════════════════════════════════════════════════
   LỚP THỐNG NHẤT — vòng 2. Nạp cuối cùng.
   Xử lý 4 điểm khách phản hồi 05/08/2026:
   ① topbar có nội dung  ② hotline nổi bật  ③ menu dọc dày
   ④ dẹp biến thể lẻ tẻ về đúng hệ token PRD § F9
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① TOPBAR ─────────────────────────────────────────────── */
#top-bar{background:var(--btln-catbar,#101C63)!important;border:0!important}
#top-bar,#top-bar a,#top-bar .btln-tb{color:rgba(255,255,255,.82)!important;
  font-size:var(--fs-1,12px)!important;font-weight:400!important;letter-spacing:.2px}
#top-bar a:hover{color:#fff!important}
#top-bar .flex-col{padding:0}

/* ── ② HOTLINE Ở HEADER CHÍNH ─────────────────────────────── */
.btln-hotline{display:flex;flex-direction:column;line-height:1.15;text-align:right;
  padding-left:var(--sp-2,16px);margin-left:var(--sp-1,8px);
  border-left:1px solid rgba(10,10,10,.10)}
.btln-hotline__lb{font-size:var(--fs-1,12px);font-weight:600;letter-spacing:.6px;
  color:#6B7480;text-transform:uppercase}
.btln-hotline__no{font-size:var(--fs-5,22px)!important;font-weight:700;
  color:var(--btln-action,#E8391D)!important;letter-spacing:-.3px;margin-top:2px}
.btln-hotline__no:hover{color:var(--btln-primary,#1230A8)!important}
@media(max-width:849px){.btln-hotline{display:none}}

/* ── ③ MENU DỌC: 23 mục, cần gọn và có cấp 2 ──────────────── */
.header-vertical-menu__fly-out{border-radius:0 0 var(--r-1,4px) var(--r-1,4px)!important;
  box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12))!important;border:1px solid #E4E6EA!important}
.header-vertical-menu__fly-out .nav-dropdown{border-radius:var(--r-1,4px)!important;
  box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12))!important;padding:var(--sp-1,8px) 0!important}
.header-vertical-menu__fly-out .nav-dropdown li a{font-size:var(--fs-2,14px)!important;
  padding:7px var(--sp-2,16px)!important;font-weight:400!important}

/* ── ④ KHỐI CON SỐ ────────────────────────────────────────── */
.btln-stats{background:var(--btln-primary,#1230A8)!important}
.btln-stats .btln-h2,.btln-stats .btln-sub{color:#fff!important}
.btln-stats .btln-sub{opacity:.72;font-size:var(--fs-2,14px)!important;margin-top:var(--sp-1,8px)}
.btln-stat__n{display:block;font-size:var(--fs-7,38px);font-weight:700;color:#fff;
  line-height:1.1;letter-spacing:-1px}
.btln-stat__t{display:block;font-size:var(--fs-2,14px);font-weight:400;
  color:rgba(255,255,255,.78);margin-top:var(--sp-1,8px);line-height:1.45}
.btln-stats .col{border-color:rgba(255,255,255,.16)!important}

/* ── DẸP BIẾN THỂ: một tiêu đề section duy nhất ───────────── */
.btln-h2,.btln-cat-title,section h2:not(.btln-stats h2){
  font-size:var(--fs-6,28px)!important;font-weight:700!important;
  letter-spacing:-.4px;line-height:1.25;margin:0!important}
@media(max-width:549px){.btln-h2,.btln-cat-title,section h2{font-size:var(--fs-5,22px)!important}}

/* Bo góc: ép về 0 / 4px / 999px */
.box-image,.box-text,.col-inner,.ux-menu,.slider,.banner,.icon-box,
.blog-post-inner,.post-item .box,.product-small .box,.badge-inner,
input,textarea,select,.searchform input{border-radius:var(--r-1,4px)!important}
.button,a.button,input[type=submit]{border-radius:var(--r-1,4px)!important}
.circle .box-image,.circle img,.avatar,.btln-mobilebar__btn{border-radius:var(--r-full,999px)!important}

/* Đổ bóng: chỉ 2 mức */
.box-shadow-1,.has-shadow,.product-small .box,.post-item .box,.icon-box,
.col-inner.box-shadow-1,.ux-box{box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))!important}
.box-shadow-2,.box-shadow-3,.box-shadow-4,.box-shadow-5,
.product-small .box:hover,.post-item .box:hover{box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12))!important}

/* Độ đậm: 400 / 600 / 700 */
b,strong,h1,h2,h3,h4,.button,.nav>li>a{font-weight:700}
.is-medium,.nav-dropdown li a,label,.widget-title{font-weight:600}
p,li,td,span:not([class*=btln-stat]),.from_the_blog_excerpt{font-weight:400}

/* ── DẸP RÒ TỪ FLATSOME CORE ───────────────────────────────
   Core dùng cỡ chữ theo em (0.7 · 0.8 · 0.9 · 1.15 em) → sinh 11.2 / 12.8 /
   14.4 / 18.4px. Ghim về thang 8 bậc. */
.is-xsmall,.is-small,small,.badge-inner,.breadcrumbs,.woocommerce-breadcrumb,
.product-info .sku_wrapper,.widget_recent_entries .post-date,.tagcloud a,
.nav-small>li>a,.copyright-footer,.footer-secondary{font-size:var(--fs-1,12px)!important}
.nav>li>a,.nav-dropdown li a,.product-title,.post-item .post-title,
.woocommerce-tabs .tabs li a,.button.is-small,label,input,textarea,select,
.widget>ul>li a,.entry-meta,.from_the_blog_excerpt{font-size:var(--fs-2,14px)!important}
p,li,td,th,.entry-content,.woocommerce-Tabs-panel{font-size:var(--fs-3,16px)!important}
h4,.box-text h5,.section-title span{font-size:var(--fs-4,18px)!important}
h3{font-size:var(--fs-5,22px)!important}
h2{font-size:var(--fs-6,28px)!important}
h1,.page-title,.entry-title{font-size:var(--fs-7,38px)!important}
@media(max-width:549px){h1,.page-title,.entry-title{font-size:var(--fs-6,28px)!important}}

/* Bóng: chỉ còn 2 mức, dẹp mọi bóng lạ của core */
.header-shadow,.header.has-shadow,#masthead,.nav-dropdown,.header-bottom,
.slider .flickity-button,.ux-menu,.dark .box-shadow-1{
  box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))!important}
.section-title-normal,.row-divided>.col+.col,.is-divider{box-shadow:none!important}

/* Nút: đúng 3 chiều cao — nhỏ 38 · thường 44 · lớn 50 */
a.button,button,input[type=submit],.button{min-height:44px;line-height:42px;
  padding-top:0!important;padding-bottom:0!important;font-size:var(--fs-2,14px)!important;
  font-weight:700!important;letter-spacing:.2px}
a.button.is-small,.button.is-small{min-height:38px!important;line-height:36px!important}
a.button.is-large,.button.is-large{min-height:50px!important;line-height:48px!important;
  font-size:var(--fs-3,16px)!important;padding-left:32px!important;padding-right:32px!important}

/* ── 3 chỗ rò cuối, đã truy đúng phần tử ──────────────────── */
.header-vertical-menu__title{font-size:var(--fs-2,14px)!important}
.ux-menu-title,.ux-menu-title.flex{font-size:var(--fs-1,12px)!important}
.header-wrapper{box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))!important}

/* Nút: box-sizing thống nhất để viền không cộng thêm chiều cao */
a.button,button,input[type=submit],.button{box-sizing:border-box!important}
button.ux-search-submit,a.button.is-normal{min-height:44px!important;height:44px!important;line-height:42px!important}
a.button.is-large,.button.is-large{height:50px!important}
a.button.is-small,.button.is-small{height:38px!important}
button.flickity-button{height:44px!important;width:44px!important;
  box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))!important}

/* ── Rò cuối cùng, đã truy đúng phần tử trên cả 6 trang ────── */
select.orderby,select{box-shadow:none!important;height:44px!important;
  border-radius:var(--r-1,4px)!important;font-size:var(--fs-2,14px)!important}
input.wpcf7-submit,.wpcf7-form-control.wpcf7-submit{height:44px!important;
  min-height:44px!important;line-height:42px!important}
button.toggle{min-height:38px!important;height:38px!important;width:38px!important}
a:not([class]){font-size:inherit!important}

/* Nút phụ trên hero: viền trắng, KHÔNG dùng màu nhấn (PRD § F9 quy tắc 3) */
.btln-hero-secondary,a.button.btln-hero-secondary{background:transparent!important;
  border:1px solid rgba(255,255,255,.75)!important;color:#fff!important}
.btln-hero-secondary:hover{background:#fff!important;color:var(--btln-primary,#1230A8)!important}
/* Zalo giữ màu thương hiệu Zalo */
a.button.alert,.button.alert{background-color:#0068FF!important;border-color:#0068FF!important;color:#fff!important}
/* Link danh mục trong trang sản phẩm — core để 0.8em */
.posted_in a,.tagged_as a,.product_meta a{font-size:var(--fs-2,14px)!important}

/* ── Sửa theo QC đóng vai khách hàng (06/08/2026) ───────────
   Nút nổi đang ở GÓC TRÁI, đè lên tiêu đề mục và đè nhãn bảng thông số. */
@media(min-width:850px){
  .btln-mobilebar{left:auto!important;right:20px!important;bottom:24px!important;
    align-items:flex-end}
}
/* Nút "Liên hệ báo giá" trên mobile bị tràn chữ ra ngoài khung */
@media(max-width:549px){
  .product-small a.button.btln-btn-quote{font-size:11px!important;letter-spacing:0;
    padding-left:6px!important;padding-right:6px!important;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  body{padding-bottom:56px}          /* chừa chỗ cho thanh gọi, không đè nội dung */
}
/* Hàng tab danh mục bị cắt cụt ở mép phải — cho vuốt ngang, có dấu hiệu còn nội dung */
.tabbed-content .nav-tabs,.ux-menu.ux-menu--horizontal{
  overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;mask-image:linear-gradient(to right,#000 92%,transparent)}
.tabbed-content .nav-tabs::-webkit-scrollbar{display:none}
.tabbed-content .nav-tabs>li{flex:0 0 auto}

/* Topbar + nút gọi trên mobile */
.btln-m-call{display:inline-flex;align-items:center;height:38px;padding:0 12px;
  border-radius:var(--r-1,4px);background:var(--btln-action,#E8391D);color:#fff!important;
  font-size:var(--fs-2,14px);font-weight:700;white-space:nowrap}
@media(max-width:849px){#top-bar{display:none}}   /* topbar 2 cột chật trên mobile */

/* ═══ SỬA THEO QC THẨM MỸ 06/08/2026 (5/10) ═══════════════════ */

/* ① Gạch đỏ dưới tiêu đề section đang position:absolute bottom:-10px
   → tràn ra ngoài, gạch ngang chữ đoạn sau và đè góc ảnh bản đồ.
   Cho nó chiếm chỗ THẬT trong luồng. */
.btln-cat-title,.btln-h2{position:static!important;padding-bottom:0!important}
.btln-cat-title::after,.btln-h2::after{
  content:"";position:static!important;display:block;
  width:56px;height:3px;background:var(--btln-action,#E8391D);
  margin:var(--sp-2,16px) 0 0!important;bottom:auto!important;left:auto!important}
.btln-cat-title--light::after{background:#fff}
[align="center"] .btln-cat-title::after,.text-center .btln-cat-title::after,
[align="center"] .btln-h2::after,.text-center .btln-h2::after{margin-left:auto!important;margin-right:auto!important}

/* ② Tên sản phẩm phải mạnh hơn nút — hiện nút lấn át tên hàng */
.product-small .product-title,.product-small .name a{
  font-size:var(--fs-4,18px)!important;font-weight:600!important;color:var(--btln-ink,#0A0A0A)!important;
  line-height:1.35;min-height:46px;display:block}
.product-small .box-text{text-align:left!important;padding:var(--sp-2,16px) var(--sp-2,16px) var(--sp-2,16px)!important}
.product-small .category{font-size:var(--fs-1,12px)!important;color:#8A929C!important;
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
/* nút trong thẻ nhạt hơn hẳn, không tranh chỗ với tên hàng */
.product-small a.button.btln-btn-quote{border-color:#D6DAE0!important;color:#5A6472!important;
  font-weight:600!important;font-size:var(--fs-1,12px)!important}
/* Rê chuột: nền chuyển navy thì CHỮ PHẢI TRẮNG.
   Rule cũ để chữ navy trên nền navy → tương phản 1:1, đọc không ra. */
.product-small .box:hover a.button.btln-btn-quote,
.product-small .box:hover a.button.btln-btn-quote:hover{
  background-color:var(--btln-primary,#1230A8)!important;
  border-color:var(--btln-primary,#1230A8)!important;
  color:#fff!important}

/* ③ Bảng thông số: nhãn và giá trị cách nhau 400px → kéo lại */
.shop_attributes th,.woocommerce-product-attributes-item__label{
  width:200px!important;max-width:200px!important;padding:10px var(--sp-2,16px)!important;
  font-size:var(--fs-2,14px)!important;font-weight:600!important;background:#FAFBFC}
.shop_attributes td,.woocommerce-product-attributes-item__value{
  padding:10px var(--sp-2,16px)!important;font-size:var(--fs-2,14px)!important}
.shop_attributes td p{margin:0!important;font-size:var(--fs-2,14px)!important}
.shop_attributes tr{border-bottom:1px solid #EDEFF2}

/* ④ Header dính: giữ lại logo + nút gọi, đừng chỉ còn thanh menu */
.stuck .header-main{display:block!important}
.stuck .header-main .flex-col.logo{display:flex!important}
.stuck .logo img,.stuck .logo a{max-height:34px!important}
.stuck .btln-hotline__lb{display:none}
.stuck .btln-hotline__no{font-size:var(--fs-4,18px)!important}

/* ⑤ Lưới thưa: mục có <4 sản phẩm thì căn giữa thay vì lệch trái bỏ trống phải */
.row.large-columns-4>.col:only-child,.row.large-columns-4>.col:nth-last-child(2):first-child{margin-left:auto;margin-right:auto}

/* ⑥ Sidebar trang sản phẩm: dính theo cuộn, bớt khoảng trắng chết dài 2000px */
@media(min-width:850px){
  /* CHỈ container mới được sticky. Trong Flatsome, TIÊU ĐỀ widget cũng mang class
     `shop-sidebar` (span.widget-title.shop-sidebar) → rule cũ bắt trúng cả tiêu đề,
     đẩy nó xuống 100px và đè lên danh sách danh mục. */
  #shop-sidebar,.widget-area,aside.sidebar-inner{
    position:sticky;top:100px;align-self:flex-start}
  span.widget-title.shop-sidebar,h3.widget-title,.widget-title{
    position:relative!important;top:auto!important}
}

/* Khối mở menu dọc: mẫu cho màu tương phản để nổi trên thanh nav */
.header-vertical-menu__opener{background-color:var(--btln-action,#E8391D)!important;
  font-weight:700!important}
.header-vertical-menu__opener .icon-menu{margin-right:var(--sp-1,8px)}
/* Menu dọc dán sát banner như mẫu, không phải card rời */
.header-vertical-menu__fly-out{border-radius:0 0 var(--r-1,4px) var(--r-1,4px)!important;margin:0!important}
/* Menu ngang đang dồn trái, nửa phải thanh nav trống */
.header-bottom .nav-left{flex:1}
.header-bottom .nav-left>li{flex:0 0 auto}
@media(min-width:850px){.header-bottom .nav-left{justify-content:space-between;padding-right:var(--sp-3,24px)}}

/* ═══ SỬA THEO QC NHẤT QUÁN 06/08/2026 (4/10) ═════════════════
   Agent đo pixel: hero 3 bộ thông số · tiêu đề section 5 kiểu ·
   nút cùng nhãn 3 thân · gạch đỏ đè chữ ở 3 nơi. */

/* ① HERO: một chuẩn duy nhất cho mọi trang trong */
.btln-page-hero .ux-banner,.btln-page-hero.ux-banner{min-height:380px!important}
@media(max-width:549px){.btln-page-hero .ux-banner,.btln-page-hero.ux-banner{min-height:320px!important}}
.btln-page-hero .banner-inner>.text{padding-left:0!important;padding-right:0!important}
.btln-page-hero__h1,.btln-page-hero h1{font-size:var(--fs-7,38px)!important;font-weight:700!important;
  color:#fff!important;margin:0 0 var(--sp-2,16px)!important;letter-spacing:-.5px;line-height:1.2}
.btln-page-hero__sub,.btln-page-hero h1+p{font-size:var(--fs-4,18px)!important;
  color:rgba(255,255,255,.82)!important;margin:0!important;max-width:60ch;line-height:1.55}
@media(max-width:549px){.btln-page-hero__h1,.btln-page-hero h1{font-size:var(--fs-6,28px)!important}
  .btln-page-hero__sub,.btln-page-hero h1+p{font-size:var(--fs-3,16px)!important}}

/* ② TIÊU ĐỀ SECTION: gộp 5 kiểu về 1 — hoa, 28px, 700, gạch đỏ 56×3 dưới, căn trái */
/* Mẫu dùng tiêu đề section CĂN GIỮA cho các khối danh mục, căn trái cho khối
   "Danh mục bán chạy" và "Cam kết". Ép tất cả về trái là làm lệch so với mẫu.
   Mặc định trái; khối nào muốn giữa thì thêm --center. */
.btln-cat-title,.btln-h2,.section-title,.section-title-normal,
.section-title-center,.section-title-bold-center{
  text-align:left;justify-content:flex-start;border:0!important}
.btln-cat-title--center{text-align:center!important}
.btln-cat-title--center::after{margin-left:auto!important;margin-right:auto!important}
.section-title b,.section-title-normal b,.section-title span+b{display:none!important}
.section-title span,.section-title-normal span{
  font-size:var(--fs-6,28px)!important;font-weight:700!important;text-transform:uppercase;
  letter-spacing:-.2px;padding:0!important;margin:0!important;border:0!important;color:inherit}
.section-title{margin-bottom:var(--sp-3,24px)!important;display:block!important}
.section-title::after{content:"";display:block;width:56px;height:3px;
  background:var(--btln-action,#E8391D);margin-top:var(--sp-2,16px)}
.dark .section-title::after,.btln-cat-title--light::after{background:#fff}
/* các gạch cột con 34px lệch màu lệch bề rộng → bỏ hẳn, chỉ giữ gạch của tiêu đề section */
.btln-commit .col .btln-cat-title::after,.btln-commit .col h3::after{display:none!important}

/* ③ Thanh chỉ báo slider lạc chỗ, lơ lửng cạnh nút hero */
.btln-home-hero .flickity-page-dots,.btln-hero-slider .flickity-page-dots{
  position:absolute!important;left:0!important;right:0!important;bottom:var(--sp-2,16px)!important;
  width:100%!important;text-align:center!important;margin:0!important}
.btln-home-hero .flickity-page-dots .dot{width:8px;height:8px;margin:0 4px}

/* ④ Header mobile: hamburger đặc 46px cạnh search viền 40px → cùng một kiểu */
@media(max-width:849px){
  .header-main .nav>li>a.icon,.mobile-nav .icon,.header-main .off-canvas-toggle,
  .header-main .ux-search-submit,.header-main button.toggle{
    width:40px!important;height:40px!important;min-height:40px!important;
    border-radius:var(--r-1,4px)!important;background:transparent!important;
    border:1px solid #DDE1E6!important;color:var(--btln-ink,#0A0A0A)!important}
}

/* ── KHỐI "DANH MỤC SẢN PHẨM BÁN CHẠY" — khách nói xấu ─────────
   Trước: 5 ô trong lưới 4 cột (1 ô mồ côi), chữ nhỏ chìm trong ảnh,
   không có lớp phủ nên chữ trắng đè lên vùng sáng. */
.btln-cats-grid .col{padding:0 var(--sp-1,8px)!important}
.btln-cats-grid .box-category{border-radius:var(--r-1,4px);overflow:hidden;
  box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06));transition:.25s ease}
.btln-cats-grid .box-category:hover{box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
  transform:translateY(-3px)}
.btln-cats-grid .box-image{position:relative}
/* lớp phủ chuyển sắc để chữ trắng luôn đọc được, bất kể ảnh sáng hay tối */
.btln-cats-grid .box-image::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,20,50,.88) 0%,rgba(10,20,50,.42) 42%,rgba(10,20,50,.06) 100%)}
.btln-cats-grid .box-image img{transition:transform .45s ease}
.btln-cats-grid .box-category:hover .box-image img{transform:scale(1.06)}
.btln-cats-grid .box-text{position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:var(--sp-2,16px)!important;text-align:left!important}
.btln-cats-grid .box-text .header-title,.btln-cats-grid .box-text a{
  font-size:var(--fs-4,18px)!important;font-weight:700!important;color:#fff!important;
  text-transform:uppercase;letter-spacing:-.2px;line-height:1.25;display:block}
.btln-cats-grid .box-text p{margin:6px 0 0!important;font-size:var(--fs-1,12px)!important;
  color:rgba(255,255,255,.78)!important;font-weight:400!important;letter-spacing:.3px}
/* mũi tên nhỏ báo bấm được */
.btln-cats-grid .box-text .header-title::after{content:" →";opacity:0;transition:.25s;
  display:inline-block;transform:translateX(-6px)}
.btln-cats-grid .box-category:hover .header-title::after{opacity:1;transform:translateX(0)}
@media(max-width:849px){
  .btln-cats-grid .box-text .header-title,.btln-cats-grid .box-text a{font-size:var(--fs-3,16px)!important}
}

/* Menu dọc: 11 mục lấp đúng chiều cao banner như mẫu (330 ÷ 11 = 30px/mục) */
.nav-vertical-fly-out>li>a{padding:0 var(--sp-2,16px)!important;min-height:29px!important;
  line-height:29px!important;font-size:var(--fs-2,14px)!important;font-weight:400!important;
  display:flex!important;align-items:center;justify-content:space-between;
  border-bottom:1px solid #F0F1F3;color:var(--btln-ink,#0A0A0A)!important}
.nav-vertical-fly-out>li:last-child>a{border-bottom:0}
.nav-vertical-fly-out>li>a:hover{background:#F6F7F9!important;color:var(--btln-primary,#1230A8)!important}
.nav-vertical-fly-out>li>a>i{margin-left:auto;opacity:.45;transform:rotate(-90deg);font-size:var(--fs-1,12px)}
.header-vertical-menu__fly-out{padding:0!important}

/* Menu dọc lấp ĐÚNG chiều cao banner: cho ul cao bằng banner rồi để các mục
   tự chia đều. Thêm/bớt mục sau này vẫn khớp, không phải tính tay. */
@media(min-width:850px){
  .home .header-vertical-menu__fly-out--open{height:330px;display:flex;flex-direction:column}
  .home .header-vertical-menu__fly-out--open>div,
  .home .header-vertical-menu__fly-out--open>div>ul{height:100%;display:flex;flex-direction:column}
  .home .header-vertical-menu__fly-out--open .nav-vertical-fly-out>li{flex:1 1 0;min-height:0}
  .home .header-vertical-menu__fly-out--open .nav-vertical-fly-out>li>a{
    height:100%;min-height:0!important;line-height:1.2!important}
}

/* ── KHỐI DỰ ÁN THỰC TẾ (Flatsome Portfolio) ──────────────────
   Trước: 6 cột UX Builder cứng, cả 6 trỏ về cùng một trang.
   Nay: CPT featured_item — mỗi dự án có trang riêng, khách tự thêm ở wp-admin. */
.btln-duan-grid .col-inner{height:100%}
/* KHÔNG dùng display:flex ở đây. Ảnh của Flatsome giữ tỉ lệ bằng .image-cover
   với padding-top:62% — làm flex item thì width co về 0 → ảnh biến mất hoàn toàn. */
.btln-duan-grid .portfolio-box{background:#fff;border-radius:var(--r-1,4px);overflow:hidden;
  box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06));height:100%;transition:.25s ease}
.btln-duan-grid .col:hover .portfolio-box{box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12));
  transform:translateY(-3px)}
.btln-duan-grid .box-text{padding:var(--sp-3,24px)!important;text-align:left!important}
.btln-duan-grid .portfolio-box-title{font-size:var(--fs-4,18px)!important;font-weight:700!important;
  color:var(--btln-ink,#0A0A0A)!important;text-transform:none!important;letter-spacing:-.2px;
  line-height:1.3;margin:0 0 var(--sp-1,8px)!important}
.btln-duan-desc{font-size:var(--fs-2,14px)!important;color:#56606B!important;
  line-height:1.55;margin:0!important;font-weight:400}
/* nhãn nhóm ngành: nhỏ, phía TRÊN tiêu đề như thẻ danh mục */
.btln-duan-grid .portfolio-box-category{font-size:var(--fs-1,12px)!important;
  color:#8A929C!important;letter-spacing:.4px;margin:0 0 4px!important;order:-1;opacity:1!important}
.btln-duan-grid .box-text-inner{display:flex;flex-direction:column}

/* Bộ lọc theo nhóm ngành ở trang Ứng dụng */
.filter-nav{margin-bottom:var(--sp-3,24px)!important}
.filter-nav li a{font-size:var(--fs-2,14px)!important;font-weight:600!important;
  text-transform:none!important;letter-spacing:0;padding:var(--sp-1,8px) 0!important}
.filter-nav li.active a{color:var(--btln-action,#E8391D)!important}


/* ── KHỐI CON SỐ — dựng lại theo góp ý 06/08/2026 ─────────────
   Lỗi cũ: tiêu đề trái + gạch đỏ giữa + phụ đề giữa = ba trục khác nhau,
   và 120px trống chết giữa phụ đề với hàng số. */
.btln-stats{background:var(--btln-primary,#1230A8)!important}
.btln-stats .btln-cat-title{color:#fff!important;margin-bottom:0!important}
.btln-stats .btln-cat-title::after{background:#fff!important;opacity:.5}
.btln-stats .btln-sub{color:rgba(255,255,255,.68)!important;font-size:var(--fs-2,14px)!important;
  margin:var(--sp-2,16px) 0 0!important;font-weight:400}
.btln-stats-row{margin-top:var(--sp-4,32px)!important}
.btln-stats .btln-stat{position:relative}
.btln-stats .btln-stat+.btln-stat::before{content:"";position:absolute;left:0;top:12%;bottom:12%;
  width:1px;background:rgba(255,255,255,.18)}
.btln-stat__n{display:block;font-size:var(--fs-8,48px);font-weight:700;color:#fff;
  line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";min-height:48px}
.btln-stat__t{display:block;font-size:var(--fs-2,14px);font-weight:400;
  color:rgba(255,255,255,.76);margin-top:var(--sp-2,16px);line-height:1.45;
  max-width:20ch;margin-left:auto;margin-right:auto}
@media(max-width:849px){
  .btln-stat__n{font-size:var(--fs-7,38px);min-height:38px}
  .btln-stats .btln-stat:nth-child(odd)::before{display:none}
  .btln-stats-row{margin-top:var(--sp-3,24px)!important}
  .btln-stat{margin-bottom:var(--sp-3,24px)}
}

/* Khoảng hở banner → dải USP đang là 60px (19,6px gutter cột + 16px margin + phần dư
   của section) — không nằm trên thang token nào. Nắn về đúng 32px. */
.btln-hero-col{padding-bottom:0!important}
/* Khe banner → dải USP: 32px là quá thoáng so với khe trên (nav→banner = 0).
   Giảm còn 16px cho cân. */
.btln-strip{margin-top:var(--sp-2,16px)!important}
.btln-home-hero{padding-bottom:0!important}

/* Menu dọc 8 mục ở 41px — cho chữ thoáng hơn, thêm mũi tên rõ cho mục có con */
.nav-vertical-fly-out>li>a{padding:0 var(--sp-2,16px)!important}
.home .header-vertical-menu__fly-out--open .nav-vertical-fly-out>li>a{
  font-size:var(--fs-2,14px)!important}

/* Trang chi tiết dự án */
.btln-duan-anh{margin:0 0 var(--sp-4,32px)!important}
.btln-duan-anh__img{width:100%;height:auto;border-radius:var(--r-1,4px);display:block}
.btln-duan-lienquan{margin-top:var(--sp-6,64px);padding-top:var(--sp-5,48px);
  border-top:1px solid #E8EAED}
.btln-duan-lienquan .btln-cat-title{margin-bottom:var(--sp-4,32px)!important}
.portfolio-single-page .entry-title{font-size:var(--fs-6,28px)!important;
  text-transform:none!important;letter-spacing:-.3px;line-height:1.25}
.portfolio-single-page .portfolio-inner ul{margin:0 0 var(--sp-3,24px) 20px}
.portfolio-single-page .portfolio-inner li{margin-bottom:6px}

/* ═══ MOBILE — sửa theo phản hồi 06/08/2026 ═══════════════════
   "heading dài quá, lớn quá làm nhảy chữ, nhìn khó chịu"
   Đo được: H1 28px trên khung 390 → 4 dòng, ~14 ký tự/dòng. Tiếng Việt có dấu,
   từ dài, 14 ký tự/dòng là gãy vụn. Thang chữ mobile phải là thang riêng. */
@media(max-width:549px){
  h1,.page-title,.entry-title,.btln-page-hero__h1,.btln-page-hero h1{
    font-size:var(--fs-5,22px)!important;line-height:1.3!important;letter-spacing:-.2px}
  /* Rule không-media ở trên dùng `section h2` (specificity 0,0,2) — selector `h2`
     trơn thua nó dù cùng !important. Phải bám ít nhất bằng độ cụ thể đó. */
  h2,section h2,.section h2,body .btln-h2,body .btln-cat-title,
  .section-title span,.section-title-normal span{
    font-size:var(--fs-4,18px)!important;line-height:1.35!important;letter-spacing:0}
  h3,section h3,.section h3{font-size:var(--fs-3,16px)!important;line-height:1.4!important}
  h4{font-size:var(--fs-2,14px)!important}
  /* cân dòng cho đều, tránh dòng cuối trơ trọi 1 từ */
  h1,h2,h3,.btln-hero-copy p{text-wrap:balance}
  /* gạch đỏ dưới tiêu đề: thu lại cho cân với chữ nhỏ hơn */
  .btln-cat-title::after,.btln-h2::after,.section-title::after{
    width:40px!important;margin-top:var(--sp-1,8px)!important}
  .btln-page-hero__sub,.btln-page-hero h1+p{font-size:var(--fs-2,14px)!important}
  .btln-sub{font-size:var(--fs-1,12px)!important}
}

/* Header mobile tràn 30px: logo 174 + số điện thoại 87 + tìm kiếm + hamburger > 390.
   Nút gọi rút còn biểu tượng, logo thu lại. */
@media(max-width:849px){
  /* (rule ::before "☎" đã GỠ — nay nút dùng <i class="icon-phone"> của Flatsome.
     Để cả hai thì hiện HAI icon điện thoại chồng lên nhau.) */
  #logo,#logo a{max-width:170px}
  #logo img{max-height:34px;width:auto}
  .header-main .flex-row{flex-wrap:nowrap}
  .header-main .flex-col{min-width:0}
}
@media(max-width:400px){
  #logo,#logo a{max-width:140px}
  #logo a{font-size:var(--fs-3,16px)!important}
}

/* Flatsome sinh cỡ chữ INLINE cho từng [text_box] (#text-xxxx h1) — không rule
   nào của mình khớp. Phải nâng độ ưu tiên bằng selector có nhiều lớp. */
@media(max-width:549px){
  .btln-hero-copy h1,.banner .text-box h1,.ux-banner .text-box h1,
  [class*="text-box"] h1,.banner-layer h1{
    font-size:var(--fs-5,22px)!important;line-height:1.3!important}
  .btln-hero-copy h2,.banner .text-box h2,[class*="text-box"] h2{
    font-size:var(--fs-4,18px)!important;line-height:1.35!important}
  /* khung chữ hero dùng gần hết bề ngang, đừng để 306/390 */
  .btln-hero-copy,.btln-hero-copy .text-box-content,
  .btln-page-hero .text-box{width:100%!important;max-width:100%!important}
  .btln-hero-copy .text-box-content{padding-left:16px!important;padding-right:16px!important}
  .btln-page-eyebrow,.btln-eyebrow{font-size:var(--fs-1,12px)!important;letter-spacing:.6px}
  /* hero trang trong: chừa lề hai bên.
     KHÔNG đụng left/right — Flatsome canh giữa bằng transform:translate(-50%,-50%),
     ép left:0 mà không gỡ transform thì cả khối lệch hẳn ra ngoài màn hình. */
  .btln-page-hero .text-box,.btln-page-hero .banner-layer{
    width:100%!important;max-width:100%!important}
  /* trang chi tiết sản phẩm: cột gallery/nội dung âm 5px do gutter */
  .single-product .row,.product-page .row{margin-left:0!important;margin-right:0!important}
}

/* Hàng link danh mục con cạnh tiêu đề khối: 440px trong khung 360 → tràn thật.
   Cho cuộn ngang trong chính nó, có vệt mờ báo còn nội dung phía sau. */
.btln-cat-subs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;max-width:100%}
.btln-cat-subs::-webkit-scrollbar{display:none}
.btln-cat-subs p{white-space:nowrap;margin:0!important;display:inline-flex;gap:var(--sp-2,16px)}
.btln-cat-subs a{flex:0 0 auto}
@media(max-width:849px){
  .btln-cat-subs{mask-image:linear-gradient(to right,#000 90%,transparent);
    -webkit-mask-image:linear-gradient(to right,#000 90%,transparent);
    padding-bottom:var(--sp-1,8px)}
  .btln-cat-head .col{padding-bottom:0!important}
  .btln-cat-subs a{font-size:var(--fs-2,14px)!important}
}

/* Khung chữ hero trang trong bị bó: ở /ung-dung/ container chỉ 270px trên khung 360
   → H1 rơi 4 dòng, 12 ký tự/dòng. Cho container dùng hết bề ngang, chừa lề 16px. */
@media(max-width:849px){
  .btln-page-hero .banner-layers.container,
  .btln-page-hero .container{
    width:100%!important;max-width:100%!important;
    padding-left:var(--sp-2,16px)!important;padding-right:var(--sp-2,16px)!important}
  .btln-page-hero .text-box-content,.btln-page-hero .text-inner{
    width:100%!important;max-width:100%!important;padding-left:0!important;padding-right:0!important}
}

/* ═══ MOBILE — VÒNG 2, sửa đúng gốc specificity ════════════════
   Vòng 1 thất bại vì hai chỗ:
   ① `section h2:not(.btln-stats h2)` — pseudo-class :not() CỘNG specificity của
      selector bên trong → (0,1,3), thắng `body .btln-cat-title` (0,1,1).
      Cách chắc ăn: dùng LẠI ĐÚNG selector đó trong media query → bằng điểm,
      nằm sau nên thắng.
   ② Nút gọi thua `.nav>li>a` (0,1,2) !important của chính mình. */
@media(max-width:549px){
  .btln-h2,.btln-cat-title,section h2:not(.btln-stats h2){
    font-size:var(--fs-4,18px)!important;line-height:1.35!important;letter-spacing:0}
  .btln-stats .btln-cat-title{font-size:var(--fs-5,22px)!important}
  .portfolio-single-page .entry-title,.single-featured_item .entry-title{
    font-size:var(--fs-5,22px)!important}
  .entry-content h3,.woocommerce-Tabs-panel h3,.portfolio-inner h3{
    font-size:var(--fs-3,16px)!important}
}
@media(max-width:849px){
  .nav>li>a.btln-m-call,li.html .btln-m-call,a.btln-m-call{
    font-size:0!important;width:44px!important;height:44px!important;
    min-height:44px!important;padding:0!important;justify-content:center;
    overflow:hidden;line-height:44px!important}
  /* icon lấy từ bộ icon font của Flatsome (i.icon-phone), KHÔNG dùng ký tự ☎
     vì hệ điều hành render nó thành emoji màu, lệch hẳn hamburger và kính lúp */
  .nav>li>a.btln-m-call i,a.btln-m-call i{
    font-size:18px!important;line-height:1!important;color:#fff!important;display:block}
  /* vùng chạm tối thiểu 44px cho mọi nút biểu tượng ở header */
  .header-main .ux-search-submit,.header-main .off-canvas-toggle,
  .header-main a.icon,.header-main button.toggle{
    min-width:44px!important;min-height:44px!important}
}

/* Lề trái đang có 8 mốc khác nhau (0 · 15 · 25 · 26 · 34 · 41 · 42 · 56px).
   Ép MỘT mốc duy nhất 16px cho mọi khối chữ ở mobile. */
@media(max-width:849px){
  /* MỘT gutter duy nhất, làm THEO mô hình lưới của Flatsome thay vì chống lại nó:
     row 8px + col 8px = mép 16px, và khe giữa hai cột cũng đúng 16px.
     Cách cũ (zero hết padding cột) làm khe giữa cột về 0 và lưới dính liền. */
  .section{padding-left:0!important;padding-right:0!important}
  .container,.page-wrapper,
  .section-content>.row,.section>.row,.container>.row,
  .portfolio-page-wrapper .row,.portfolio-top .row,.portfolio-bottom .row,
  .shop-container>.row,.woocommerce .row{
    padding-left:8px!important;padding-right:8px!important;
    margin-left:0!important;margin-right:0!important;max-width:100%!important}
  .row .col{padding-left:8px!important;padding-right:8px!important}
  .row .col-inner{padding-left:0!important;padding-right:0!important}
  /* row lồng trong col: kéo âm lại để không cộng dồn thành 24px */
  .col .row,.col-inner .row{margin-left:-8px!important;margin-right:-8px!important;
    padding-left:0!important;padding-right:0!important}
  /* hero là ảnh tràn viền — không thụt vào */
  .btln-page-hero .row,.btln-home-hero .row{padding-left:0!important;padding-right:0!important}
  .btln-page-hero .row>.col,.btln-home-hero .row>.col{padding-left:0!important;padding-right:0!important}
}

/* Lưới danh mục mobile: khe ngang 18px, khe dọc 1,5px → hai hàng dính liền.
   Và ô thứ 5 đứng một mình bị căn giữa, lệch trục 98px so với hàng trên. */
@media(max-width:849px){
  .btln-cats-grid .col{padding-bottom:var(--sp-2,16px)!important}
  .btln-cats-grid{justify-content:flex-start!important}
  .btln-cats-grid .col:last-child:nth-child(odd){margin-right:auto!important;margin-left:0!important}
}

/* Nút CTA nền màu nhấn: chữ phải trắng. Trang liên hệ đang để chữ xanh
   trên nền đỏ cam — tương phản ~2,8:1, đọc không ra. */
a.button.secondary,a.button.secondary:visited,a.button.alert,
.button.secondary,input[type=submit].secondary{color:#fff!important}
a.button.secondary:hover{color:#fff!important}

/* Bảng rỗng trong nội dung dự án tạo ~300px khoảng trắng chết */
.entry-content table:empty,.portfolio-inner table:empty,
.entry-content figure:empty,.portfolio-inner p:empty{display:none!important}

/* Tên sản phẩm rớt một từ trơ trọi ở dòng cuối */
.product-small .product-title,.product-small .name a{text-wrap:balance}

/* Thanh nổi đáy: 2 viên pill chạm sát mép, khe giữa 0,5px */
@media(max-width:849px){
  .btln-mobilebar{gap:0}
  .btln-mobilebar__btn+.btln-mobilebar__btn{border-left:1px solid rgba(255,255,255,.25)}
}

/* Lề trái mobile — chốt về đúng 16px cho mọi khối chữ.
   Đo được 8 mốc: 0 · 16 · 31 · 40 · 48 · 52 · 63 · 72px. Nguồn:
   ① hero text-box mất padding  ② .row>.col không khớp (Flatsome lồng thêm cấp)
   ③ link "Xem tất cả" căn phải  ④ ô số USP đẩy chữ sang 72px */
@media(max-width:849px){
  /* ① chữ trong hero */
  .btln-page-hero .text-inner,.btln-hero-copy .text-inner,
  .banner-layers .text-inner{padding-left:var(--sp-2,16px)!important;
    padding-right:var(--sp-2,16px)!important}
  .btln-page-hero .text-box-content,.btln-hero-copy .text-box-content{
    padding-left:0!important;padding-right:0!important}

  /* (rule zero padding cột ở đây đã GỠ — nó đè mất gutter 8+8 ở khối trên,
     làm khe giữa hai cột về 0 và chữ trong thẻ dán mép) */

  /* ③ link "Xem tất cả" trên mobile xuống dòng, bám trái như tiêu đề */
  .btln-cat-head [align="right"],.btln-cat-head .text-right{text-align:left!important}
  .btln-cat-subs{margin-top:var(--sp-1,8px)}

  /* ④ ô số của dải USP: thu lại để chữ không bị đẩy tới 72px */
  .btln-strip-item .col-inner{flex-direction:column!important;gap:var(--sp-1,8px)!important;
    padding:var(--sp-2,16px) 0!important}
  .btln-strip-item .col-inner::before{width:28px!important;height:28px!important}
}

/* Nhãn "Mới" trên thẻ bài viết bị lệch -5px ra ngoài do gutter cột đã bị gỡ ở mobile */
@media(max-width:849px){
  .badge.absolute,.post-item .badge{left:0!important;margin-left:0!important}
  .badge-inner{border-radius:0 var(--r-1,4px) var(--r-1,4px) 0}
}

/* ═══ MOBILE VÒNG 3 — theo ảnh chụp thật ═══════════════════════ */

/* ① Ba nút ở header phải CÙNG một hình dạng. Hamburger đang là
   `button round is-small` của Flatsome, nút gọi là ô vuông đặc → lệch bộ. */
@media(max-width:849px){
  .header-main .header-button .button.icon,
  .header-main a.icon.button,
  .header-main .ux-search-submit,
  .nav>li>a.btln-m-call{
    width:44px!important;height:44px!important;min-height:44px!important;
    border-radius:var(--r-1,4px)!important;padding:0!important;
    display:flex!important;align-items:center;justify-content:center;box-shadow:none!important}
  /* hai nút phụ: nền trắng viền nhạt, icon navy */
  .header-main .header-button .button.icon,
  .header-main a.icon.button:not(.btln-m-call),
  .header-main .ux-search-submit{
    background:#fff!important;border:1px solid #DDE1E6!important;color:var(--btln-ink,#0A0A0A)!important}
  .header-main .header-button .button.icon i,
  .header-main a.icon.button:not(.btln-m-call) i,
  .header-main .ux-search-submit i{color:var(--btln-primary,#1230A8)!important;font-size:18px!important}
  /* nút gọi: hành động chính, tô đặc màu nhấn */
  .nav>li>a.btln-m-call{background:var(--btln-action,#E8391D)!important;border:0!important}
  /* logo có chỗ thở giữa hai bên */
  #logo{margin:0 var(--sp-2,16px)!important}
  /* KHÔNG dùng gap ở đây: header có sẵn vài .flex-col rỗng (width 0), gap vẫn tính
     khoảng cách cho chúng → cột đầu bị đẩy thêm 8px, lề trái thành 24 thay vì 16. */
  .header-main .flex-row>.flex-col:empty{display:none}
}

/* ② Menu trượt đang TRONG SUỐT — nhìn xuyên thấy banner phía sau, chữ xám nhạt */
.off-canvas-left .mfp-content,.off-canvas-right .mfp-content,
.off-canvas .mfp-content,#main-menu.mobile-sidebar{
  background-color:#fff!important;opacity:1!important;backdrop-filter:none!important}
.off-canvas-left .mfp-content{--drawer-width:320px;box-shadow:var(--sh-2,0 8px 24px rgba(10,10,10,.12))}
.mfp-bg.main-menu-overlay{background:rgba(10,20,50,.55)!important;opacity:1!important}
#main-menu .nav-sidebar>li>a,.mobile-sidebar .nav>li>a{
  color:var(--btln-ink,#0A0A0A)!important;font-size:var(--fs-3,16px)!important;
  font-weight:600!important;padding:14px var(--sp-3,24px)!important;
  border-bottom:1px solid #EEF0F2}
#main-menu .nav-sidebar>li>a:hover,#main-menu .nav-sidebar>li.current-menu-item>a{
  color:var(--btln-primary,#1230A8)!important;background:#F6F7F9!important}
/* ô tìm kiếm trong menu: chữ đang chui xuống dưới kính lúp */
#main-menu .searchform,#main-menu .search-form{padding:var(--sp-3,24px) var(--sp-3,24px) var(--sp-2,16px)}
#main-menu .searchform input[type=search],#main-menu .searchform input[type=text]{
  padding-right:46px!important;height:44px!important;border-radius:var(--r-1,4px)!important;
  font-size:var(--fs-2,14px)!important}
#main-menu .searchform .ux-search-submit{position:absolute;right:26px;width:40px!important;
  height:40px!important;background:transparent!important;border:0!important}
/* dòng liên hệ cuối menu */
#main-menu .html.custom,#main-menu li.html{padding:var(--sp-3,24px)!important;
  font-size:var(--fs-2,14px)!important;line-height:1.7;border-top:1px solid #EEF0F2}

/* ③ Khối kêu gọi liên hệ: 2 nút đang căn phải, lề trái lởm chởm.
   Trên mobile cho full-width, xếp dọc. */
@media(max-width:849px){
  .btln-cta .button,.btln-cta a.button,
  section[class*="cta"] .button,.btln-lienhe-cta .button{
    display:flex!important;width:100%!important;margin:0 0 var(--sp-2,16px) 0!important;
    justify-content:center}
  .btln-cta [align="right"],.btln-cta .text-right{text-align:left!important}
}

/* ④ Ô danh mục hai cột lệch chiều cao nhau */
.btln-cats-grid{align-items:stretch}
.btln-cats-grid .col{display:flex}
.btln-cats-grid .col-inner,.btln-cats-grid .box-category{width:100%}
@media(max-width:849px){
  .btln-cats-grid .box-image{position:relative}
  /* số sản phẩm hiện thường trực, không chỉ khi rê chuột */
  .btln-cats-grid .box-text p{opacity:1!important}
  .btln-cats-grid .box-text .header-title::after{display:none}
}

/* Ô tìm kiếm trong menu trượt chỉ còn 81px vì dropdown "Tất cả sản phẩm" chiếm chỗ
   trên panel rộng 300px → chữ chui xuống dưới kính lúp. Bỏ dropdown ở đây,
   trả toàn bộ bề ngang cho ô nhập. Lọc theo danh mục đã có ở trang Sản phẩm. */
#main-menu .searchform .search_categories,
#main-menu .searchform select,
.off-canvas-left .searchform select{display:none!important}
#main-menu .searchform,#main-menu .search-form,#main-menu form.searchform{
  position:relative;display:block!important;width:100%}
#main-menu .searchform .flex-row,#main-menu .searchform .flex-col{display:block!important;width:100%}
#main-menu .searchform input[type=search],#main-menu .searchform input[type=text]{
  width:100%!important;max-width:100%!important}

/* Panel menu rộng hơn cho dễ chạm — Flatsome mặc định 300px */
body .off-canvas-left .mfp-content,
body .off-canvas-right .mfp-content{--drawer-width:322px}

/* Trên màn cảm ứng, :hover BỊ KẸT sau khi chạm — ô vừa chạm cứ nhấc lên 3px và
   giữ nguyên, nhìn như lưới bị lệch hàng. Chỉ bật hiệu ứng cho thiết bị có chuột. */
@media (hover:none),(pointer:coarse){
  .btln-cats-grid .box-category:hover,
  .btln-duan-grid .col:hover .portfolio-box,
  .product-small .box:hover,.post-item .box:hover{
    transform:none!important;box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))!important}
  .btln-cats-grid .box-category:hover .box-image img{transform:none!important}
  .nav-vertical-fly-out>li>a:hover{padding-left:var(--sp-2,16px)!important}
}

/* Portfolio single dùng `.page-wrapper.row` — vừa là wrapper vừa là row.
   Và hero trang Liên hệ lệch trái 55px, tràn phải 23px. */
@media(max-width:849px){
  .page-wrapper.row{padding-left:8px!important;padding-right:8px!important}
  .page-wrapper.row>.col{padding-left:8px!important;padding-right:8px!important}
  /* hộp chữ hero: bám đúng khung, không lệch, không tràn */
  .btln-page-hero .text-box,.btln-page-hero .banner-layer{
    left:50%!important;transform:translateX(-50%)!important;
    width:100%!important;max-width:100%!important;padding:0!important}
  .btln-page-hero .text-box-content{padding:0 var(--sp-2,16px)!important;
    width:100%!important;max-width:100%!important}
  .btln-page-hero .text-inner{padding:0!important;width:100%!important}
  /* widget sidebar và thẻ nội dung: chừa lề trong */
  .widget-area .widget,.icon-box-text,.btln-product-support-card .col-inner{
    padding-left:var(--sp-1,8px)!important;padding-right:var(--sp-1,8px)!important}
}

/* Hero "phẳng" (nền màu, không ảnh) vẫn phải theo gutter — chỉ hero có ẢNH mới tràn viền */
@media(max-width:849px){
  .btln-page-hero--flat .row,.btln-page-hero--flat .row>.col{
    padding-left:8px!important;padding-right:8px!important}
}

/* Hero: chốt lề đúng 16px ở MỘT chỗ duy nhất, zero mọi cấp còn lại
   để không cộng dồn thành 24 hay 32px. */
@media(max-width:849px){
  /* Hai loại hero, hai đường đi khác nhau:
     — hero CÓ ẢNH: chữ nằm trong .text-box định vị tuyệt đối → padding của
       .container không với tới. Phải đặt lề ở .text-box-content.
     — hero PHẲNG (nền màu): chữ nằm trong row/col bình thường → đặt ở row. */
  .btln-page-hero .row,.btln-page-hero .row>.col,
  .btln-page-hero .text-box,.btln-page-hero .banner-layer,
  .btln-page-hero .banner-layers.container,
  .btln-page-hero .text-inner,.btln-page-hero__h1,.btln-page-hero .text{
    padding-left:0!important;padding-right:0!important}
  .btln-page-hero .text-box-content{
    padding-left:var(--sp-2,16px)!important;padding-right:var(--sp-2,16px)!important}
  /* Hero phẳng: khối cha đã thụt 16px sẵn → row và col phải về 0, không cộng thêm */
  .btln-page-hero--flat .row,.btln-page-hero--flat .row>.col{
    padding-left:0!important;padding-right:0!important;
    margin-left:0!important;margin-right:0!important}
  /* Hero có ảnh: ảnh tràn hết bề ngang, chữ bên trong thụt đúng 16px.
     Lề âm KHÔNG dùng được — có trang hero đã tràn sẵn, trang khác thì bị cha thụt 16px,
     dùng lề âm là trang này đúng thì trang kia lệch. Cách chắc: gỡ thụt của KHỐI CHA. */
  .page-description,.entry-content>.section:first-child{
    padding-left:0!important;padding-right:0!important}
  .btln-page-hero,.btln-page-hero .banner,.btln-page-hero.banner{
    margin-left:0!important;margin-right:0!important;width:100%!important;max-width:none!important}
}

/* Mỗi trang đặt tên class section hero một kiểu (btln-ung-dung-hero, btln-about-hero,
   btln-contact-page…) nên rule bám theo tên luôn sót. Bắt theo CẤU TRÚC: cột nào
   chứa banner hero thì bỏ hết thụt lề, để chữ bên trong luôn rơi đúng 16px. */
@media(max-width:849px){
  .row:has(> .col > .col-inner > .banner.btln-page-hero),
  .row:has(> .col > .col-inner > .banner.btln-page-hero) > .col,
  .col:has(> .col-inner > .banner.btln-page-hero),
  .col:has(> .col-inner > .banner.btln-page-hero) > .col-inner{
    padding-left:0!important;padding-right:0!important;
    margin-left:0!important;margin-right:0!important}
}

/* Trang Ứng dụng đặt hero BÊN TRONG khung nội dung (content-area.page-wrapper),
   nên hero bị thụt 16px rồi chữ bên trong thụt thêm 16 = 32px.
   Các trang khác đặt hero ngoài khung nên không dính. Cho hero thoát khung. */
@media(max-width:849px){
  .content-area.page-wrapper .banner.btln-page-hero{
    margin-left:calc(-1 * var(--sp-2,16px))!important;
    margin-right:calc(-1 * var(--sp-2,16px))!important;
    width:calc(100% + 2 * var(--sp-2,16px))!important}
}

/* ── Dọn nốt theo QC mobile vòng 2 ─────────────────────────── */
@media(max-width:849px){
  /* ① Trong thẻ SP: tên ở 33,5px còn nút ở 25px → lệch 8,5px. Cho cùng một lề. */
  .product-small .box-text{padding-left:var(--sp-2,16px)!important;
    padding-right:var(--sp-2,16px)!important;padding-bottom:var(--sp-2,16px)!important}
  .product-small a.button.btln-btn-quote{margin-left:0!important;margin-right:0!important;
    height:44px!important;min-height:44px!important;line-height:42px!important}
  /* thẻ đang nặng đáy: khe ảnh–tên 17px mà đáy dư 36,5px */
  .product-small .box-image{margin-bottom:0}
  .product-small .title-wrapper{padding-top:var(--sp-2,16px)}

  /* ② "LỌC" đang 26px, to hơn cả H1 22px của chính trang đó */
  .shop-page-title .filter-button,.shop-container .filter-button,
  a.filter-button,.category-filtering .filter-button{font-size:var(--fs-3,16px)!important}
  /* tên SP 18–19px bằng H2 → hạ xuống 16px để H1 > H2 > tên hàng */
  .product-small .product-title,.product-small .name a{font-size:var(--fs-3,16px)!important}

  /* ③ Số điện thoại bị tách dòng giữa chừng */
  a[href^="tel:"],.btln-hotline__no,.btln-product-support-contact{white-space:nowrap}
}

/* ④ Hàng rỗng còn sót cuối bảng thông số */
.shop_attributes tr:not(:has(td:not(:empty))),
.woocommerce-product-attributes tr:not(:has(td:not(:empty))){display:none!important}

/* ⑤ Gạch xám mồ côi dưới H1 trang chi tiết SP (dấu vết chỗ giá cũ) */
.product-info .is-divider,.product-page-price+.is-divider,
.product-title+.is-divider{display:none!important}

/* ── Header mobile: logo đè lên nút gọi ───────────────────────
   Hộp #logo rộng 140px nhưng CHỮ tràn tới 284px, còn nút gọi bắt đầu ở 277px
   → chữ "Ễ" chui xuống dưới nút đỏ. Cho logo co lại theo chỗ thật sự còn trống. */
@media(max-width:849px){
  .header-main .flex-col.logo{flex:1 1 auto;min-width:0;
    margin:0 var(--sp-1,8px)!important;overflow:hidden}
  #logo,#logo a{max-width:100%!important;width:auto!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  #logo a{font-size:15px!important;letter-spacing:-.2px}
}
@media(max-width:374px){#logo a{font-size:13px!important}}

/* ── Ô tìm kiếm bật ra từ header: nút kính lúp rơi xuống DƯỚI ô nhập ──
   Rule cũ chỉ nhắm #main-menu nên form trong lightbox không được xử lý. */
/* CHỈ áp cho ô tìm kiếm bật ra trong lightbox (.mfp-content).
   Bản trước bắt cả `.header-search-form` và `form.searchform` — hai selector đó
   trúng luôn ô tìm kiếm ở header DESKTOP, làm ô nhập rơi xuống dưới dropdown
   danh mục và đè lên thanh menu. Lỗi rò phạm vi. */
.mfp-content .searchform{position:relative}
.mfp-content .searchform .flex-row,.mfp-content .searchform form{display:block!important;width:100%}
.mfp-content .searchform input[type=search],
.mfp-content .searchform input[type=text]{
  width:100%!important;height:48px!important;padding-right:52px!important;
  border-radius:var(--r-1,4px)!important;font-size:var(--fs-3,16px)!important}
.mfp-content .searchform .ux-search-submit,
.mfp-content .searchform button[type=submit]{
  position:absolute!important;right:4px!important;top:50%!important;
  transform:translateY(-50%)!important;margin:0!important;
  width:44px!important;height:44px!important;min-height:44px!important;
  background:transparent!important;border:0!important;box-shadow:none!important}
.mfp-content .searchform .search_categories,
.mfp-content .searchform select{display:none!important}

/* ── Chữ trong nút dính mép trên ──────────────────────────────
   Nguyên nhân: canh giữa theo chiều dọc bằng `line-height:42px`, nhưng nút
   full-width trên mobile cao hơn 44px (do padding của khối cha) → chữ bị đẩy
   lên đỉnh. Dùng flex canh giữa, không phụ thuộc chiều cao. */
a.button,button.button,input[type=submit],.button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  line-height:1.25!important;text-align:center}
a.button.btln-btn-quote,.product-small a.button.btln-btn-quote{
  display:flex!important;line-height:1.25!important}
.btln-mobilebar__btn{line-height:1.25!important}
/* nút full-width trong khối kêu gọi liên hệ: cao cố định, chữ giữa */
@media(max-width:849px){
  .btln-cta-band .button,section[class*="cta"] .button{
    height:48px!important;min-height:48px!important;padding:0 var(--sp-3,24px)!important}
}
/* ô nhập/gửi của form giữ canh giữa gốc của trình duyệt */
input[type=submit]{display:inline-block!important}

/* Logo vẫn còn cách nút gọi 5px — nới thêm và giới hạn theo chỗ trống thật */
@media(max-width:849px){
  .header-main .flex-col.logo{margin:0 var(--sp-2,16px)!important;max-width:calc(100% - 160px)}
  #logo a{font-size:14px!important}
}
@media(max-width:374px){
  .header-main .flex-col.logo{max-width:calc(100% - 150px)}
  #logo a{font-size:12px!important}
}

/* ── Ba icon header phải CÙNG kích thước, CÙNG cách canh ──────
   Đo được: <i class="icon-menu"> rộng 44×44 (chiếm trọn nút) với line-height 21,6px
   → glyph rơi lệch trong ô. Còn <i class="icon-phone"> chỉ 18×18 nên nằm giữa.
   Ba icon đang ba kiểu. Ép cả ba về cùng một khuôn. */
@media(max-width:849px){
  .header-main .header-button .button.icon i,
  .header-main a.icon.button i,
  .header-main .ux-search-submit i,
  .nav>li>a.btln-m-call i,
  .mobile-nav a.icon i{
    /* display:block + width:auto = TRÀN HẾT bề ngang nút (44px) → glyph lệch góc.
       Phải là inline-flex để hộp co đúng bằng glyph. */
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:20px!important;height:20px!important;
    font-size:20px!important;line-height:1!important;
    margin:0!important;padding:0!important;flex:0 0 auto}
  /* Flatsome vẽ icon-menu bằng ba gạch qua ::before — cho nó cùng cỡ */
  .header-main .header-button .button.icon .icon-menu::before,
  .mobile-nav a.icon .icon-menu::before{font-size:20px!important;line-height:1!important}
  /* nút: bỏ line-height thừa kế làm lệch trục dọc */
  .header-main .header-button .button.icon,
  .header-main a.icon.button,
  .header-main .ux-search-submit,
  .nav>li>a.btln-m-call{line-height:1!important}
  /* lề hai đầu header bằng nhau */
  .header-main>.flex-row{padding-left:var(--sp-2,16px)!important;
    padding-right:var(--sp-2,16px)!important}
  .header-main .flex-col.show-for-medium.flex-left{padding-left:0!important}
  .header-main .flex-col.show-for-medium.flex-right{padding-right:0!important}
  .mobile-nav{margin:0!important}
  .mobile-nav>li{margin:0!important}
}

/* Lề hai đầu header lệch nhau: trái 26px, phải 18px. Cho bằng 16px cả hai. */
@media(max-width:849px){
  .header-main .flex-col.show-for-medium.flex-left .mobile-nav{padding-left:0!important}
  .header-main .flex-col.show-for-medium.flex-right .mobile-nav{padding-right:0!important}
  .header-main .mobile-nav>li>a{margin:0!important}
  .header-main>.flex-row>.flex-col:first-child{padding-left:0!important}
  .header-main>.flex-row>.flex-col:last-child{padding-right:0!important}
  .header-main .header-button{margin:0!important}
  /* glyph hamburger lệch 2px theo trục dọc do baseline của font icon */
  .mobile-nav a.icon i.icon-menu{position:relative;top:1px}
}

/* ── Tương phản chữ trắng trên nền màu nhấn ───────────────────
   #E8391D + chữ trắng = 4,17 — dưới chuẩn WCAG AA (4,5) cho chữ thường.
   Hạ 5% độ sáng thành #DC361C → 4,58. Mắt gần như không thấy khác,
   nhưng người đọc ngoài nắng hoặc màn kém thì thấy rõ hơn hẳn.
   Giữ #E8391D cho vạch nhấn, viền, ô số — chỗ không có chữ trắng đè lên. */
:root{--btln-action-text: #DC361C;}
a.button.secondary,a.button.secondary:visited,.button.secondary,
input[type=submit].secondary,.btln-hero-primary,
.btln-cta-band .button.secondary,
.btln-mobilebar__call,.btln-quote-actions a.button.btln-btn-quote{
  background-color:var(--btln-action-text,#DC361C)!important;
  border-color:var(--btln-action-text,#DC361C)!important;color:#fff!important}
a.button.secondary:hover,.button.secondary:hover,
.btln-mobilebar__call:hover,.btln-quote-actions a.button.btln-btn-quote:hover{
  background-color:#C42D14!important;border-color:#C42D14!important;color:#fff!important}
.nav>li>a.btln-m-call{background:var(--btln-action-text,#DC361C)!important}
.btln-strip-item .col-inner::before{background:var(--btln-action-text,#DC361C)}

/* Gộp nốt các nút còn dùng #E8391D về #DC361C — nút .primary của Flatsome,
   nút gửi của Contact Form 7, nút báo giá ở trang chi tiết sản phẩm.
   Để sót là sinh biến thể nút thứ 4, vi phạm PRD § F9. */
a.button.primary,.button.primary,a.button.primary:visited,
input.wpcf7-submit,.wpcf7-form-control.wpcf7-submit,
.btln-quote-actions a.button.btln-btn-quote,
a.button.primary.is-large,a.button.primary.is-larger{
  background-color:var(--btln-action-text,#DC361C)!important;
  border-color:var(--btln-action-text,#DC361C)!important;color:#fff!important}
a.button.primary:hover,.button.primary:hover,
input.wpcf7-submit:hover,.wpcf7-form-control.wpcf7-submit:hover{
  background-color:#C42D14!important;border-color:#C42D14!important;color:#fff!important}
/* nút trong thẻ sản phẩm giữ kiểu viền — không đụng */
.product-small a.button.primary.btln-btn-quote{
  background-color:transparent!important;border-color:#D6DAE0!important;color:#5A6472!important}
.product-small .box:hover a.button.primary.btln-btn-quote{
  background-color:var(--btln-primary,#1230A8)!important;
  border-color:var(--btln-primary,#1230A8)!important;color:#fff!important}