/*
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.4.5
*/

: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ủ) ===== */
/* 11 ô / 4 cột → hàng cuối 3 ô. Canh GIỮA sẽ làm hàng cuối lệch khỏi cột trên,
   nhìn lộn xộn (khách phản ánh 11/08). Canh TRÁI để mọi ô thẳng cột. */
.btln-cats-grid {
    justify-content: flex-start;
}

.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 — 11 mục × 38px + 12px đệm ≈ 430px
   10/08/2026: khách chốt 11 danh mục cha (trước là 5 danh mục demo).
   11/08/2026: 29px/mục quá bí, khách yêu cầu nới 30% → 38px.
   ĐỔI SỐ NÀY thì phải đổi luôn height của [ux_banner] hero trong trang chủ. */
.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: 38px;
    line-height: 38px;
    font-size: var(--fs-2, 14px);
    font-weight: 400;
    display: flex;
    align-items: center;
}

/* Nhãn dài: khách yêu cầu 11/08 "ghi dài tên xuống dòng luôn được k".
   Trước cắt bằng "…" cho gọn, nay cho xuống dòng hiển thị ĐỦ TÊN.
   Mục nào 2 dòng thì cao gấp đôi — chấp nhận, vì đọc đủ tên quan trọng hơn
   việc menu dọc cao đúng bằng banner. */
.header-vertical-menu__fly-out .ux-nav-vertical-menu > li > a > span,
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > a.nav-top-link > span {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.28;
    padding: 5px 0;
}
.header-vertical-menu__fly-out .nav-vertical-fly-out > li > a.nav-top-link {
    min-height: 38px !important;
    height: auto !important;
    line-height: 1.28 !important;
    align-items: center;
}
/* Menu dọc không còn khoá cao bằng banner — mục 2 dòng sẽ đội lên */
@media(min-width:850px){
  .home .header-vertical-menu__fly-out--open{height:auto!important}
  .home .header-vertical-menu__fly-out--open .nav-vertical-fly-out>li{flex:0 0 auto!important}
  .home .header-vertical-menu__fly-out--open .nav-vertical-fly-out>li>a{height:auto!important}
}

.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); }
}

/* Khối giới thiệu ngắn — thay dải 3 ô USP (khách chốt 10/08/2026).
   Vẫn nằm trong .btln-strip-row nền xanh, nên chữ BẮT BUỘC phải trắng:
   quy tắc .btln-strip-item ở trên không phủ tới class mới này. */
.btln-intro-item .btln-intro-lead {
    margin: 0 0 10px;
    color: #fff;
    font-size: var(--fs-3,16px);
    line-height: 1.5;
    font-weight: 400;
    max-width: 76ch;
    margin-left: auto;
    margin-right: auto;
}
.btln-intro-item .btln-intro-cam {
    margin: 0;
    color: #fff;
    font-size: var(--fs-3,16px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .2px;
}
@media (max-width: 549px) {
    .btln-intro-item .btln-intro-lead,
    .btln-intro-item .btln-intro-cam { font-size: var(--fs-2,14px); }
}

/* ══════════════════════════════════════════════════════════════════
   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);
}

/* Danh mục chưa có ảnh — khách chốt 11 nhóm 10/08/2026, mới có ảnh cho 3 nhóm.
   WooCommerce trám bằng placeholder.webp (icon ảnh vỡ) → nhìn như web lỗi.
   Giấu placeholder đi, để lộ nền chuyển sắc thương hiệu bên dưới: tile thành
   ô màu có chủ đích thay vì ô hỏng.
   Ảnh thật khách gửi sẽ tự phủ kín nền này — KHÔNG cần gỡ quy tắc. */
.btln-cats-grid .box-category .box-image {
    background: linear-gradient(158deg, #1B3EBF 0%, #0B1F54 100%);
}
.btln-cats-grid .box-category .box-image img[src*="/woocommerce/assets/images/placeholder"] {
    opacity: 0;
}

/* ⑤ 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 ─────────────────────────────────
   11/08/2026 — khách chỉ mẫu Hà Phong (ô A383): nhãn nhỏ "Hotline tư vấn 24/7"
   nằm TRÊN, số to màu đỏ nằm DƯỚI. Trước đó nhãn nhỏ + 2 số cùng một hàng ngang. */
.btln-hotline{display:flex;flex-direction:column;align-items:flex-end;
  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-2,14px);font-weight:600;letter-spacing:.01em;
  color:var(--btln-action,#E8391D);text-transform:none;margin-bottom:1px}
/* Hai số CÙNG cỡ, cùng độ đậm — chỉ khác màu. Số thứ hai không phải
   thông tin phụ: đó là đường dây kỹ thuật, khách gọi nhiều ngang số bán hàng. */
.btln-hotline__no,.btln-hotline__no--2{font-size:26px!important;font-weight:800;
  letter-spacing:-.4px;line-height:1.15}
.btln-hotline__no{color:var(--btln-action,#E8391D)!important}
.btln-hotline__no--2{color:var(--btln-primary,#1230A8)!important;margin-top:1px}
.btln-hotline__no:hover{color:var(--btln-primary,#1230A8)!important}
.btln-hotline__no--2:hover{color:var(--btln-action,#E8391D)!important}
.stuck .btln-hotline__lb{display:none}
.stuck .btln-hotline__no,.stuck .btln-hotline__no--2{font-size:19px!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 — NGUỒN DUY NHẤT của cỡ chữ và độ đậm.
   Anh Tính chốt 13/08/2026: về MỘT cỡ cho mọi màn hình, giảm độ đậm một mức.
   Trước: 18px desktop / 16px mobile (hai luật ở hai chỗ) · đậm 600.
   Nay  : 16px mọi kích thước · đậm 500.
   Kẹp 2 dòng + dấu ba chấm nằm ở khối "TÊN SẢN PHẨM TRONG THẺ" cuối file —
   ở đây KHÔNG đặt display/min-height nữa để hai khối không giẫm chân nhau. */
.product-small .product-title,.product-small .name a{
  font-size:var(--fs-3,16px)!important;font-weight:500!important;
  color:var(--btln-ink,#0A0A0A)!important;line-height:1.35}
.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 .header-main .flex-col.logo{display:flex!important}
/* ⚠️ Cỡ logo khi header dính do khối "LOGO STICKY" ở CUỐI FILE quyết định.
   Trước đây chỗ này kẹp cả <a> lẫn <img> ở 34px, rồi một đợt sửa sau lại cho
   <img> lên 46px — <a> vẫn 34px và overflow:hidden nên xén mất 12px chân logo.
   Để một chỗ duy nhất cầm con số này. */
.stuck .btln-hotline__lb{display:none}
/* ⚠️ Khai báo này nằm SAU khối hotline ở trên nên nó thắng — phải liệt kê
   cả hai số, không thì số 1 xuống 18px còn số 2 kẹt ở 19px, lại lệch cỡ. */
.stuck .btln-hotline__no,.stuck .btln-hotline__no--2{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 */
/* ⚠️ 13/08/2026: đầu trang giờ chỉ còn TIÊU ĐỀ (khách chốt), băng 380px thành
   trống hoác. Hạ xuống 240/190px — khớp height đặt trong shortcode [ux_banner].
   Đây là chỗ DUY NHẤT cầm chiều cao đầu trang; đừng đặt lại ở nơi khác. */
.btln-page-hero .ux-banner,.btln-page-hero.ux-banner{min-height:240px!important}
@media(max-width:549px){.btln-page-hero .ux-banner,.btln-page-hero.ux-banner{min-height:190px!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.
   11/08/2026 — khách yêu cầu nới 30%: 29px → 38px/mục (430 ÷ 11 ≈ 39px). */
.nav-vertical-fly-out>li>a{padding:0 var(--sp-2,16px)!important;min-height:38px!important;
  line-height:38px!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.
   ⚠️ CON SỐ NÀY PHẢI BẰNG height của [ux_banner] hero trong trang chủ.
   11/08/2026: 330 → 430px theo yêu cầu nới menu dọc 30%. */
@media(min-width:850px){
  /* 11/08/2026 — BỎ cơ chế chia đều 430px.
     Khách yêu cầu tên danh mục dài hiển thị ĐỦ (xuống dòng). Chia đều với
     min-height:0 làm mọi mục co còn 19–21px, chữ 2 dòng bị bóp nát.
     Nay để mục tự cao theo nội dung: 10 mục 1 dòng + 1 mục 2 dòng ≈ 444px,
     banner chỉnh theo con số đo được. */
  .home .header-vertical-menu__fly-out--open{height:auto}
  .home .header-vertical-menu__fly-out--open .nav-vertical-fly-out>li{flex:0 0 auto}
  .home .header-vertical-menu__fly-out--open .nav-vertical-fly-out>li>a{
    height:auto!important;min-height:38px!important;line-height:1.28!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}

/* (Đã gỡ `text-wrap:balance` cho tên sản phẩm — 13/08/2026 anh Tính chốt chỗ này
   không đặt quy tắc ngắt dòng, chỉ kẹp 2 dòng rồi cắt bằng "…". Cân dòng trên một
   danh sách dài chỉ làm mỗi thẻ hụt một kiểu.) */

/* 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}
  /* (Bỏ override cỡ chữ tên SP — nay 16px thống nhất mọi kích thước, xem luật gốc.) */

  /* ③ 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}

/* ═══ TRANG DỊCH VỤ · THƯ VIỆN · TÀI LIỆU (07/08/2026) ════════
   Menu dựng lại theo cấu trúc web mẫu: 7 mục cấp 1 + 6 mục con.
   Mọi giá trị dưới đây lấy từ hệ token PRD § F9 — không thêm biến thể mới. */

/* ── Thẻ dịch vụ ở trang cha ─────────────────────────────── */
.btln-dv-card .col-inner{background:#fff;border:1px solid #E8EAED;border-radius:var(--r-1,4px);
  padding:var(--sp-4,32px)!important;height:100%;transition:.25s ease}
.btln-dv-card__n{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-1,4px);background:var(--btln-action-text,#DC361C);
  color:#fff;font-size:var(--fs-1,12px);font-weight:700;letter-spacing:.5px;
  margin-bottom:var(--sp-2,16px)}
.btln-dv-card__t{font-size:var(--fs-4,18px)!important;font-weight:700!important;
  margin:0 0 var(--sp-1,8px)!important;line-height:1.3}
.btln-dv-card__t a{color:var(--btln-ink,#0A0A0A)!important}
.btln-dv-card__t a:hover{color:var(--btln-primary,#1230A8)!important}
.btln-dv-card__m{font-size:var(--fs-2,14px)!important;color:#56606B!important;
  line-height:1.6;margin:0 0 var(--sp-2,16px)!important}
.btln-dv-card__l{margin:0!important}
.btln-dv-card__l a{font-size:var(--fs-2,14px)!important;font-weight:600!important;
  color:var(--btln-primary,#1230A8)!important}
.btln-dv-card__l a::after{content:" →";display:inline-block;transition:transform .2s}
@media(hover:hover){
  .btln-dv-card:hover .col-inner{border-color:var(--btln-primary,#1230A8);
    box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))}
  .btln-dv-card:hover .btln-dv-card__l a::after{transform:translateX(4px)}
}

/* ── Bốn bước quy trình ──────────────────────────────────── */
.btln-buoc .col-inner{padding-right:var(--sp-3,24px)!important}
.btln-buoc__n{display:block;font-size:var(--fs-6,28px);font-weight:700;
  color:var(--btln-action-text,#DC361C);line-height:1;margin-bottom:var(--sp-2,16px);
  font-variant-numeric:tabular-nums}
.btln-buoc__t{font-size:var(--fs-4,18px)!important;font-weight:700!important;
  margin:0 0 var(--sp-1,8px)!important;line-height:1.3}
.btln-buoc__m{font-size:var(--fs-2,14px)!important;color:#56606B!important;
  line-height:1.6;margin:0!important}
@media(min-width:850px){
  .btln-buoc+.btln-buoc .col-inner{border-left:1px solid #E1E4E8;
    padding-left:var(--sp-3,24px)!important}
}

/* ── Hộp "thông tin cần cung cấp" ở trang dịch vụ con ────── */
.btln-info-box{background:var(--btln-surface,#F4F4F4);border-radius:var(--r-1,4px);
  padding:var(--sp-4,32px)!important;border-left:3px solid var(--btln-action-text,#DC361C)}
.btln-info-box h3{font-size:var(--fs-4,18px)!important;font-weight:700!important;
  margin:0 0 var(--sp-2,16px)!important}
.btln-info-box ul{margin:0!important;padding-left:20px}
.btln-info-box li{font-size:var(--fs-2,14px)!important;color:#3C444C!important;
  line-height:1.6;margin-bottom:var(--sp-1,8px)}
.btln-info-box li:last-child{margin-bottom:0}

/* ── Thẻ ở trang Thư viện ────────────────────────────────── */
.btln-tv-card .col-inner{background:#fff;border:1px solid #E8EAED;border-radius:var(--r-1,4px);
  padding:var(--sp-4,32px)!important;height:100%;transition:.25s ease}
.btln-tv-card__t{font-size:var(--fs-5,22px)!important;font-weight:700!important;
  margin:0 0 var(--sp-2,16px)!important;line-height:1.3}
.btln-tv-card__t a{color:var(--btln-ink,#0A0A0A)!important}
.btln-tv-card__t a:hover{color:var(--btln-primary,#1230A8)!important}
.btln-tv-card__m{font-size:var(--fs-3,16px)!important;color:#56606B!important;
  line-height:1.65;margin:0 0 var(--sp-3,24px)!important}
.btln-tv-card__l{margin:0!important}
.btln-tv-card__l a{font-size:var(--fs-2,14px)!important;font-weight:600!important;
  color:var(--btln-primary,#1230A8)!important}
.btln-tv-card__l a::after{content:" →"}
@media(hover:hover){
  .btln-tv-card:hover .col-inner{border-color:var(--btln-primary,#1230A8);
    box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))}
}

/* ── Bảng tra quy cách ───────────────────────────────────── */
.btln-bang-tra{margin-top:var(--sp-3,24px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.btln-bang-tra table{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid #E1E4E8;border-radius:var(--r-1,4px);overflow:hidden;min-width:640px}
.btln-bang-tra thead th{background:var(--btln-primary,#1230A8);color:#fff;
  font-size:var(--fs-2,14px)!important;font-weight:700;text-align:left;
  padding:var(--sp-2,16px)!important;white-space:nowrap}
.btln-bang-tra tbody td{font-size:var(--fs-2,14px)!important;color:#3C444C;
  padding:var(--sp-2,16px)!important;border-top:1px solid #EDEFF2;line-height:1.5}
.btln-bang-tra tbody tr:nth-child(even){background:#FAFBFC}
.btln-bang-tra tbody td:first-child{font-weight:600;color:var(--btln-ink,#0A0A0A)}
@media(max-width:849px){
  .btln-bang-tra{mask-image:linear-gradient(to right,#000 92%,transparent);
    -webkit-mask-image:linear-gradient(to right,#000 92%,transparent)}
  .btln-bang-tra thead th,.btln-bang-tra tbody td{padding:12px var(--sp-2,16px)!important}
}

/* ── Menu chính giờ có dropdown: chỉnh cho gọn ───────────── */
.header-bottom-nav .nav-dropdown{min-width:260px;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;padding:var(--sp-1,8px) 0!important}
.header-bottom-nav .nav-dropdown li a{font-size:var(--fs-2,14px)!important;
  padding:10px var(--sp-3,24px)!important;font-weight:400!important;
  color:var(--btln-ink,#0A0A0A)!important;text-transform:none!important;line-height:1.45}
.header-bottom-nav .nav-dropdown li a:hover{background:#F6F7F9!important;
  color:var(--btln-primary,#1230A8)!important}
.header-bottom-nav .nav-dropdown li+li{border-top:1px solid #F0F1F3}

/* ═══ SỬA THEO QC TRANG MỚI 07/08/2026 (6/10) ═════════════════ */

/* ① Dải CTA: tiêu đề canh giữa nhưng câu mô tả canh trái, lệch 277px.
   Canh giữa cho cả cột, không để dòng mô tả thừa hưởng canh trái. */
.btln-cta-band .col,.btln-cta-band .col-inner,
.btln-cta-band .text,.btln-cta-band p{text-align:center!important}
.btln-cta-band .btln-page-copy{max-width:62ch;margin-left:auto!important;margin-right:auto!important}
/* nút rộng 570px trông như ô nhập — giới hạn lại */
.btln-cta-band .button{max-width:280px!important;width:100%!important}
.btln-cta-band .col[align="right"]{text-align:right!important}
.btln-cta-band .col[align="right"] .button{margin-left:auto!important;margin-right:0!important}
.btln-cta-band .col[align="left"] .button{margin-right:auto!important;margin-left:0!important}
@media(max-width:849px){
  .btln-cta-band .button{max-width:100%!important;margin:0 auto!important}
  .btln-cta-band .col[align="right"],.btln-cta-band .col[align="left"]{text-align:center!important}
}

/* ② Mọi dải màu đang nặng đáy (49px trên / 94px dưới). Cho cân. */
.btln-cta-band,.btln-page-section,.btln-stats,.btln-commit{
  padding-top:var(--sp-5,48px)!important;padding-bottom:var(--sp-5,48px)!important}
@media(max-width:849px){
  .btln-cta-band,.btln-page-section,.btln-stats,.btln-commit{
    padding-top:var(--sp-4,32px)!important;padding-bottom:var(--sp-4,32px)!important}
}

/* ③ Mobile: chữ hero bị CẮT MẤT nội dung do hero cao cố định.
   Đổi sang min-height để khối chữ dài tự nới. */
@media(max-width:849px){
  .btln-page-hero .ux-banner,.btln-page-hero.ux-banner,.btln-page-hero .banner{
    height:auto!important;min-height:320px!important}
  .btln-page-hero .banner-inner{height:auto!important;min-height:320px!important;
    padding-top:var(--sp-4,32px);padding-bottom:var(--sp-4,32px)}
  .btln-page-hero .text-box{position:relative!important;top:auto!important;
    left:auto!important;transform:none!important}
  .btln-page-hero .banner-layers{position:relative!important;height:auto!important}
}

/* ④ Thẻ bài viết ở Thư viện: đáy trống 75px vì vùng trích dẫn rỗng */
.post-item .from_the_blog_excerpt:empty,
.post-item .is-divider:last-child{display:none!important}
.post-item .box-text{padding-bottom:var(--sp-3,24px)!important}

/* ⑤ Bảng tra: 4 bảng 4 lưới cột khác nhau → dùng chung một lưới cố định */
.btln-bang-tra table{table-layout:fixed}
.btln-bang-tra th:nth-child(1),.btln-bang-tra td:nth-child(1){width:24%}
.btln-bang-tra th:nth-child(2),.btln-bang-tra td:nth-child(2){width:17%}
.btln-bang-tra th:nth-child(3),.btln-bang-tra td:nth-child(3){width:17%}
.btln-bang-tra th:nth-child(4),.btln-bang-tra td:nth-child(4){width:18%}
.btln-bang-tra th:nth-child(5),.btln-bang-tra td:nth-child(5){width:24%}
.btln-bang-tra td,.btln-bang-tra th{vertical-align:top!important;word-break:break-word}
.btln-bang-tra td[colspan]{width:auto}
@media(max-width:849px){
  .btln-bang-tra table{table-layout:auto}
  .btln-bang-tra td:first-child,.btln-bang-tra th:first-child{white-space:nowrap}
  .btln-bang-tra::after{content:"Vuốt ngang để xem đủ cột";display:block;
    font-size:var(--fs-1,12px);color:#8A929C;margin-top:var(--sp-1,8px);font-style:italic}
}

/* ⑥ Hộp "thông tin cần cung cấp" trùng màu nền dải — cho khác hẳn */
.btln-info-box{background:#fff!important;border:1px solid #E1E4E8;
  border-left:3px solid var(--btln-action-text,#DC361C)!important;
  box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))}
.btln-info-box ul{padding-left:18px!important}
.btln-info-box li{padding-right:var(--sp-1,8px)}

/* ⑦ Mũi tên link: một kiểu duy nhất, có khoảng trắng */
.btln-dv-card__l a::after,.btln-tv-card__l a::after,
.btln-cat-subs a::after{content:" →";font-weight:400}
.btln-dv-card__l a::after{content:" →"}

/* ⑧ Link trong thẻ ghim đáy để 4 thẻ thẳng hàng */
.btln-dv-card .col-inner{display:flex;flex-direction:column}
.btln-dv-card__l{margin-top:auto!important;padding-top:var(--sp-2,16px)}
.btln-tv-card .col-inner{display:flex;flex-direction:column}
.btln-tv-card__l{margin-top:auto!important}

/* ⑨ Bốn bước: mobile 2 cột quá hẹp (144px) → một cột */
@media(max-width:549px){
  .btln-buoc{width:100%!important;max-width:100%!important;flex-basis:100%!important}
  .btln-buoc+.btln-buoc .col-inner{border-left:0!important;border-top:1px solid #E1E4E8;
    padding-left:0!important;padding-top:var(--sp-3,24px)!important}
  .btln-buoc .col-inner{padding-right:0!important}
}

/* ⑩ Khối mở menu dọc dùng #E8391D, lệch màu nhấn hệ thống */
.header-vertical-menu__opener{background-color:var(--btln-action-text,#DC361C)!important}

/* Ghi chú cảnh báo trong hộp thông tin */
.btln-info-box__note{font-size:var(--fs-2,14px)!important;color:#8A4B00!important;
  background:#FFF8E6;border-radius:var(--r-1,4px);padding:var(--sp-2,16px)!important;
  margin:var(--sp-3,24px) 0 0!important;line-height:1.55}

/* ── Banner trang chủ: chữ phải gọn để nút luôn thấy ──────────
   Đo được: H1 48px × 3 dòng làm hộp chữ cao 319px trong banner 330px,
   nút chỉ còn hở 9px với đáy. Hạ H1 xuống 38px (vẫn trên thang token)
   và siết khoảng cách giữa các dòng trong hero. */
.btln-hero-copy h1,.btln-home-hero .text-box h1{
  font-size:var(--fs-7,38px)!important;line-height:1.2!important;
  margin:0 0 var(--sp-2,16px)!important;letter-spacing:-.6px}
.btln-hero-copy .btln-eyebrow,.btln-home-hero .btln-eyebrow{
  margin:0 0 var(--sp-1,8px)!important}
.btln-hero-copy .btln-hero-lead,.btln-home-hero .btln-hero-lead{
  margin:0 0 var(--sp-3,24px)!important}
.btln-hero-copy .btln-hero-lead p{font-size:var(--fs-3,16px)!important;
  line-height:1.5!important;margin:0!important;max-width:46ch}
.btln-hero-copy .button{margin-bottom:0!important}
/* chốt chặn: khối chữ không được cao quá 82% banner, để nút luôn nằm trong khung */
.btln-home-hero .text-box{max-height:82%;overflow:visible}

@media(max-width:1024px){
  .btln-hero-copy h1,.btln-home-hero .text-box h1{font-size:var(--fs-6,28px)!important}
}
@media(max-width:549px){
  .btln-hero-copy h1,.btln-home-hero .text-box h1{
    font-size:var(--fs-5,22px)!important;line-height:1.25!important}
  .btln-hero-copy .btln-hero-lead p{font-size:var(--fs-2,14px)!important}
  .btln-hero-copy .btln-hero-lead{margin-bottom:var(--sp-2,16px)!important}
  .btln-home-hero .text-box{max-height:none}
}

/* ═══ QC TRANG MỚI VÒNG 2 (7/10) — sửa 8 mục còn lại ══════════ */

/* ① CHỮ ĐÈ CHỮ ở bảng Lưới thép: table-layout:fixed khoá cột 200px nhưng
      tiêu đề "Đường kính sợi / độ dày tấm" không xuống dòng → tràn đè cột bên. */
.btln-bang-tra th{white-space:normal!important;word-break:normal;hyphens:auto}

/* ② Section mở đầu trang Tài liệu: không cộng dồn padding với section kế */
.btln-mo-dau{padding-bottom:0!important}
@media(max-width:849px){.btln-mo-dau{padding-bottom:0!important}}

/* ③ Thẻ bài viết: ẩn CẢ hộp trích dẫn rỗng lẫn gạch phân cách của nó */
.post-item .from_the_blog_excerpt,
.post-item .box-text .is-divider,
.post-item .from_the_blog_excerpt+*:empty{display:none!important}
.post-item .box-text{padding-bottom:var(--sp-2,16px)!important}

/* ④ Đáy dải màu vẫn 94px: phần tử con CUỐI còn margin-bottom ~46px */
.btln-cta-band > .section-content > *:last-child,
.btln-page-section > .section-content > *:last-child,
.btln-stats > .section-content > *:last-child,
.btln-commit > .section-content > *:last-child{margin-bottom:0!important}
.btln-cta-band .row:last-child,.btln-page-section .row:last-child,
.btln-stats .row:last-child{margin-bottom:0!important}
.btln-cta-band .row:last-child > .col,.btln-page-section .row:last-child > .col{
  padding-bottom:0!important}

/* ⑤ Cụm nút CTA: đang là lưới 2 cột nên hai nút cách nhau 312px.
      Đổi sang flex, khe 24px, canh giữa cả cụm. */
/* CHỈ hàng chứa nút, KHÔNG phải mọi row cuối — có trang tiêu đề nằm chung row đó,
   zero padding làm tiêu đề lệch về 8px thay vì 16px. */
.btln-cta-band .row:has(a.button):not(:has(h2)):not(:has(h1)){
  display:flex!important;flex-wrap:wrap;justify-content:center;gap:var(--sp-3,24px);
  margin-left:0!important;margin-right:0!important}
.btln-cta-band .row:has(a.button):not(:has(h2)):not(:has(h1)) > .col{
  flex:0 0 auto!important;width:auto!important;max-width:280px!important;padding:0!important}
.btln-cta-band .row:has(a.button) .button{margin:0!important}
@media(max-width:549px){
  .btln-cta-band .row:last-child{flex-direction:column;gap:var(--sp-2,16px)}
  .btln-cta-band .row:last-child > .col{width:100%!important;max-width:100%!important}
}

/* ⑥ Mũi tên: MỘT kiểu duy nhất — có khoảng trắng, nét thường */
.btln-dv-card__l a::after,.btln-tv-card__l a::after,.btln-cat-subs a::after{
  content:"\00a0→"!important;font-weight:400!important}
/* link ghim đáy thẻ để các thẻ thẳng hàng */
.btln-dv-card .col-inner,.btln-tv-card .col-inner{display:flex!important;flex-direction:column!important}
.btln-dv-card__l,.btln-tv-card__l{margin-top:auto!important}

/* ⑦ Gợi ý cuộn bảng đặt TRÊN bảng — đọc được sau khi cuộn xong thì vô nghĩa */
@media(max-width:849px){
  .btln-bang-tra::after{content:none!important}
  .btln-bang-tra::before{content:"Vuốt ngang để xem đủ cột";display:block;
    font-size:var(--fs-1,12px);color:#8A929C;margin-bottom:var(--sp-1,8px);font-style:italic}
  /* bỏ lưới % của desktop, để cột tự co theo nội dung */
  .btln-bang-tra th,.btln-bang-tra td{width:auto!important}
}
/* dropdown menu chính: 260px làm 2/4 mục xuống dòng */
.header-bottom-nav .nav-dropdown{min-width:320px!important}
.header-bottom-nav .nav-dropdown li+li{margin-left:var(--sp-3,24px);margin-right:var(--sp-3,24px)}
.header-bottom-nav .nav-dropdown li a{padding-left:var(--sp-3,24px)!important;
  padding-right:var(--sp-3,24px)!important}
.header-bottom-nav .nav-dropdown li+li{border-top:1px solid #F0F1F3;margin:0}

/* ⑧ Nút nổi che chữ nội dung ở desktop */
@media(min-width:850px){
  .btln-mobilebar{z-index:98}
  body{--btln-float-w:150px}
  .btln-page-section .col-inner,.btln-bang-tra{padding-right:0}
  .btln-mobilebar__btn{opacity:.94}
  .btln-mobilebar:hover .btln-mobilebar__btn{opacity:1}
}

/* (Đã gỡ 3 liên kết không phải chuyên mục khỏi menu dọc — khối tên là
   "Danh mục sản phẩm" thì chỉ được chứa chuyên mục. Rule tách nhóm không còn cần.) */

/* ⑩ Hero: chữ desktop thụt 40px so với cột nội dung → cho thẳng lề */
@media(min-width:850px){
  .btln-page-hero .text-box-content{padding-left:0!important}
  .btln-page-hero .banner-layers.container{padding-left:0!important;padding-right:0!important}
}
/* mobile: chữ dính mép trên, chừa 150–200px ảnh trống dưới → canh giữa */
@media(max-width:849px){
  .btln-page-hero .banner-inner{display:flex;align-items:center}
  .btln-page-hero .banner-layers{width:100%}
}

/* ⑪ Đáy footer 105px vùng tối chết */
.absolute-footer{padding-top:var(--sp-2,16px)!important;padding-bottom:var(--sp-2,16px)!important}
#footer .footer-2,#footer .footer-1{padding-bottom:var(--sp-5,48px)!important}

/* ⑫ Mobile: dải CTA thụt 16px còn dải xám tràn mép → cùng một kiểu */
@media(max-width:849px){
  .btln-cta-band,.btln-page-section,.btln-stats,.btln-commit,.btln-strip{
    margin-left:0!important;margin-right:0!important;width:100%!important}
}

/* ═══ TRANG LIÊN HỆ — dựng gọn lại 07/08/2026 ═════════════════
   Trước: 5 khối, 2805px desktop / 4346px mobile, hotline lặp 4 lần.
   Nay: hero → 3 thẻ liên hệ → form + bản đồ. Mỗi thông tin đúng một lần. */
.btln-lh-row{margin-bottom:0!important}
.btln-lh-card .col-inner{background:#fff;border:1px solid #E8EAED;
  border-radius:var(--r-1,4px);padding:var(--sp-4,32px)!important;height:100%;
  display:flex;flex-direction:column;transition:.25s ease}
.btln-lh-card__nhan{display:block;font-size:var(--fs-1,12px);font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:#8A929C;margin-bottom:var(--sp-1,8px)}
.btln-lh-card__chinh{display:block;font-size:var(--fs-5,22px)!important;font-weight:700;
  color:var(--btln-primary,#1230A8)!important;line-height:1.25;letter-spacing:-.3px;
  margin-bottom:var(--sp-1,8px);word-break:break-word}
.btln-lh-card__chinh--nho{font-size:var(--fs-3,16px)!important;line-height:1.45}
a.btln-lh-card__chinh:hover{color:var(--btln-action-text,#DC361C)!important}
.btln-lh-card__phu{display:block;font-size:var(--fs-2,14px)!important;color:#56606B;
  line-height:1.55;margin-top:auto}
.btln-lh-card__phu a{color:var(--btln-primary,#1230A8)!important;font-weight:600}
@media(hover:hover){
  .btln-lh-card:hover .col-inner{border-color:var(--btln-primary,#1230A8);
    box-shadow:var(--sh-1,0 2px 8px rgba(10,10,10,.06))}
}

/* ═══ TRANG LIÊN HỆ — dựng lại theo mẫu khách gửi 10/08/2026 ═══════
   Ô F112 "Liên hệ để kiểu này" + ảnh bangtaiantienphat.com:
   bản đồ trái · khối thông tin phải · form bên dưới.
   3 thẻ ở trên đã bỏ — quy tắc "mỗi thông tin đúng một lần" vẫn giữ. */
.btln-lh-info .col-inner{background:#fff;border:1px solid #E8EAED;
  border-radius:var(--r-1,4px);padding:var(--sp-4,32px)!important;height:100%}
.btln-lh-ten{font-size:var(--fs-3,16px);font-weight:700;line-height:1.35;
  color:var(--btln-primary,#1230A8);margin:0 0 var(--sp-2,16px)}
.btln-lh-info-body p{margin:0 0 10px;font-size:var(--fs-2,14px);line-height:1.6;color:#3C444C}
.btln-lh-info-body p strong{color:#1B222A}
.btln-lh-info-body a{color:var(--btln-primary,#1230A8);font-weight:600}
.btln-lh-info-body a:hover{color:var(--btln-action-text,#DC361C)}
.btln-lh-goiy p{margin:var(--sp-2,16px) 0 0;padding-top:var(--sp-2,16px);
  border-top:1px solid #E8EAED;font-size:var(--fs-2,14px);line-height:1.6;color:#56606B}
.btln-lh-chiduong{margin:var(--sp-1,8px) 0 0;font-size:var(--fs-2,14px)}
.btln-lh-chiduong a{color:var(--btln-primary,#1230A8);font-weight:600}

/* Form báo giá canh giữa.
   Flatsome KHÔNG có tham số offset cho [col] — dùng class thay vì span__offset. */
.btln-lh-form-giua .col-inner{max-width:760px;margin-left:auto;margin-right:auto}

/* Bản đồ và khối thông tin phải cao bằng nhau, không so le */
@media(min-width:850px){
  .btln-contact-map iframe{height:420px}
}
@media(max-width:849px){
  .btln-contact-map iframe{height:300px}
  .btln-lh-info .col-inner{margin-top:var(--sp-3,24px)}
}
@media(max-width:849px){
  .btln-lh-card{margin-bottom:var(--sp-2,16px)}
  .btln-lh-card .col-inner{padding:var(--sp-3,24px)!important}
  .btln-lh-card__chinh{font-size:var(--fs-4,18px)!important}
}
/* form và bản đồ cao bằng nhau */
.btln-contact-map iframe{height:100%!important;min-height:420px}
@media(max-width:849px){.btln-contact-map iframe{min-height:280px}}
.btln-contact-form .wpcf7{margin-top:var(--sp-3,24px)}

/* ═══ TRANG CHUYÊN MỤC SẢN PHẨM ═══════════════════════════════
   Sidebar sang TRÁI như mẫu · đầu trang gọn · mô tả SEO xuống dưới. */

/* ── Đầu trang danh mục: xem khối "ĐẦU TRANG ĐỒNG BỘ" ở cuối file ──
   Bốn đợt sửa trước từng đặt bề rộng, đệm và cỡ chữ cho `.shop-page-title`
   ở bốn chỗ khác nhau; khối cuối ghim max-width 1170px trong khi site_width
   đã là 1290 → chữ lệch 30px so với trang tĩnh. Đã gộp về một chỗ duy nhất. */
h1.shop-page-title{padding:0!important;margin:0!important}
.shop-container>.row:first-child{padding-top:var(--sp-3,24px)!important}
.woocommerce-result-count,.woocommerce-ordering{margin-bottom:var(--sp-2,16px)!important}
.woocommerce-ordering select{height:40px!important;font-size:var(--fs-2,14px)!important}

/* ── Sidebar trái, rộng như mẫu (280px) ────────────────────── */
@media(min-width:850px){
  .shop-container .row>.large-3{width:23%!important}
  .shop-container .row>.large-9{width:77%!important}
}
#shop-sidebar .widget,.widget-area .widget{margin-bottom:var(--sp-3,24px)!important}
#shop-sidebar .widget-title,.widget-area .widget-title{
  font-size:var(--fs-3,16px)!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.3px}
#shop-sidebar .product-categories li a,.widget_product_categories li a{
  font-size:var(--fs-2,14px)!important;padding:9px 0!important;display:block;
  color:var(--btln-ink,#0A0A0A)!important;border-bottom:1px solid #F0F1F3}
#shop-sidebar .product-categories li a:hover{color:var(--btln-primary,#1230A8)!important}
#shop-sidebar .product-categories .children{padding-left:var(--sp-2,16px);margin:0}
#shop-sidebar .product-categories .children a{font-size:var(--fs-2,14px)!important;
  color:#56606B!important;padding:7px 0!important}
#shop-sidebar .product-categories .count{color:#8A929C;font-size:var(--fs-1,12px)}

/* ── Mô tả SEO dưới lưới sản phẩm, có nút Xem thêm ─────────── */
.btln-mota-seo{background:var(--btln-surface,#F4F4F4)!important;margin-top:var(--sp-5,48px)}
.btln-mota-seo__hop{position:relative;max-height:220px;overflow:hidden;
  transition:max-height .35s ease}
.btln-mota-seo__hop.mo{max-height:none}
.btln-mota-seo__hop.la-ngan{max-height:none}
.btln-mota-seo__hop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(to bottom,rgba(244,244,244,0),var(--btln-surface,#F4F4F4));
  pointer-events:none;transition:opacity .25s}
.btln-mota-seo__hop.mo::after,.btln-mota-seo__hop.la-ngan::after{opacity:0}
.btln-mota-seo__noi{font-size:var(--fs-3,16px);line-height:1.7;color:#3C444C}
.btln-mota-seo__noi p{margin:0 0 var(--sp-2,16px);font-size:var(--fs-3,16px)!important}
.btln-mota-seo__noi h2,.btln-mota-seo__noi h3{font-size:var(--fs-4,18px)!important;
  font-weight:700!important;margin:var(--sp-3,24px) 0 var(--sp-1,8px)!important;line-height:1.35}
.btln-mota-seo__noi ul,.btln-mota-seo__noi ol{margin:0 0 var(--sp-2,16px) 20px}
.btln-mota-seo__noi li{margin-bottom:6px;line-height:1.65}
.btln-mota-seo__noi table{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid #E1E4E8;border-radius:var(--r-1,4px);overflow:hidden;margin:var(--sp-2,16px) 0}
.btln-mota-seo__noi th{background:var(--btln-primary,#1230A8);color:#fff;text-align:left;
  padding:12px var(--sp-2,16px);font-size:var(--fs-2,14px)}
.btln-mota-seo__noi td{padding:12px var(--sp-2,16px);border-top:1px solid #EDEFF2;
  font-size:var(--fs-2,14px)}
.btln-mota-seo__nut{display:inline-flex;align-items:center;justify-content:center;
  margin-top:var(--sp-2,16px);height:44px;padding:0 var(--sp-3,24px);
  background:transparent;border:1px solid var(--btln-primary,#1230A8);
  border-radius:var(--r-1,4px);color:var(--btln-primary,#1230A8);
  font-size:var(--fs-2,14px);font-weight:700;cursor:pointer;transition:.2s}
.btln-mota-seo__nut:hover{background:var(--btln-primary,#1230A8);color:#fff}
.btln-mota-seo__nut::after{content:"";display:inline-block;margin-left:8px;
  border:5px solid transparent;border-top-color:currentColor;transform:translateY(3px)}
.btln-mota-seo__nut[aria-expanded="true"]::after{transform:translateY(-2px) rotate(180deg)}
@media(max-width:849px){
  .btln-mota-seo__hop{max-height:180px}
  .btln-mota-seo__noi,.btln-mota-seo__noi p{font-size:var(--fs-2,14px)!important}
  .btln-mota-seo__nut{width:100%}
}

/* ── Phân trang: Flatsome dùng 1.1em → 17,6px, lệch thang 8 bậc ─── */
.page-numbers li a,.page-numbers li span,
a.page-number,span.page-number,.woocommerce-pagination a,.woocommerce-pagination span{
  font-size:var(--fs-2,14px)!important;border-radius:var(--r-1,4px)!important;
  min-width:40px;height:40px;line-height:38px;display:inline-flex;
  align-items:center;justify-content:center}
.page-numbers li .current,.page-numbers li a:hover{
  background:var(--btln-primary,#1230A8)!important;color:#fff!important;
  border-color:var(--btln-primary,#1230A8)!important}
/* badge tròn của Flatsome dùng 99px và 100% — quy về thang bo góc */
.badge-circle .badge-inner,.count,.cart-icon strong,
[class*="round"]:not(.button){border-radius:var(--r-full,999px)!important}

.shop-page-title h1{white-space:normal;word-break:normal}

/* (Đã gỡ khối định vị `[ux_banner].btln-page-hero` — 13/08/2026 các trang
   chuyển sang [page_header] của Flatsome nên selector đó không còn phần tử nào.) */


h1.shop-page-title{padding:0!important;margin:0!important;
  font-size:var(--fs-6,28px)!important;line-height:1.25!important}
div.shop-page-title .breadcrumbs,div.shop-page-title .woocommerce-breadcrumb{
  margin:0 0 var(--sp-1,8px)!important;padding:0!important;
  font-size:var(--fs-1,12px)!important;color:#6B7480!important}
div.shop-page-title .breadcrumbs a{color:#6B7480!important}
div.shop-page-title .breadcrumbs a:hover{color:var(--btln-primary,#1230A8)!important}
/* ô sắp xếp + số kết quả cũng vào container */
.shop-container .woocommerce-ordering,.shop-container .woocommerce-result-count,
.shop-container .category-filtering{margin-bottom:var(--sp-3,24px)!important}
@media(max-width:849px){
  div.shop-page-title{padding:var(--sp-2,16px) 0!important;margin-bottom:var(--sp-3,24px)!important}
  h1.shop-page-title{font-size:var(--fs-5,22px)!important}
}

/* Đầu trang cho trang lưu trữ (Tin tức, chuyên mục bài viết) — dựng bằng hook
   vì WordPress bỏ qua nội dung của "trang bài viết". Đo bằng số cho khớp
   tuyệt đối với hero trang trong: cao 380px, chữ tại mép container. */
/* :not(--anh) — shorthand `background` kèm !important xoá luôn background-image
   của style inline, nên bản có ảnh phải được loại khỏi quy tắc này. */
.btln-archive-hero:not(.btln-archive-hero--anh){background:var(--btln-primary,#1230A8)!important;
  padding:0!important;margin-bottom:var(--sp-5,48px)}
.btln-archive-hero .section-content{display:flex;align-items:center;
  min-height:240px;max-width:100%!important;padding:0!important}
.btln-archive-hero__trong{max-width:1170px;width:100%;margin:0 auto;padding:0}
.btln-archive-hero .btln-eyebrow{color:rgba(255,255,255,.72)!important;
  font-size:var(--fs-1,12px)!important;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;margin:0 0 var(--sp-1,8px)!important}
.btln-archive-hero .btln-page-hero__h1{color:#fff!important;
  font-size:var(--fs-7,38px)!important;font-weight:700!important;
  margin:0!important;line-height:1.2;letter-spacing:-.5px}
.btln-archive-hero .btln-page-hero__sub{color:rgba(255,255,255,.82)!important;
  font-size:var(--fs-4,18px)!important;margin:0!important;max-width:60ch;line-height:1.55}
@media(max-width:1230px){
  .btln-archive-hero__trong{padding-left:var(--sp-2,16px);padding-right:var(--sp-2,16px)}
}
@media(max-width:849px){
  .btln-archive-hero .section-content{min-height:190px}
  .btln-archive-hero .btln-page-hero__h1{font-size:var(--fs-5,22px)!important}
  .btln-archive-hero .btln-page-hero__sub{font-size:var(--fs-2,14px)!important}
  .btln-archive-hero{margin-bottom:var(--sp-4,32px)}
}

/* ═══ TRANG GIỚI THIỆU — thư giới thiệu khách gửi 10/08/2026 ═══════
   Khách yêu cầu "dạng văn bản thông thường, đẹp gọn": chữ to hơn thân bài
   thường một nấc, dòng thoáng, câu chào và câu cảm ơn tách khỏi khối giữa. */
.btln-about-copy .btln-gt-chao{font-size:var(--fs-3,16px);line-height:1.75;color:#1B222A}
.btln-about-copy .btln-gt-cam-on{margin-top:var(--sp-3,24px);font-weight:600;
  color:var(--btln-primary,#1230A8)}
.btln-about-copy p{max-width:68ch}

/* ═══════════════════════════════════════════════════════════════════
   SỬA THEO FEEDBACK 11/08/2026
   ═══════════════════════════════════════════════════════════════════ */

/* ④ Sticky header: logo tràn khỏi khung, đè xuống thanh menu xanh.
   Flatsome sinh sẵn `.stuck #logo img{max-height:70px!important}` theo
   header_height_sticky — nhưng hàng trên khi dính chỉ còn ~70px nên ảnh
   70px tràn đúng 18px xuống dưới. Cap thấp hơn và canh giữa theo khung.
   Selector 2 class để thắng rule !important sinh inline ở wp_head. */
.header-wrapper.stuck #logo,
.header.stuck #logo {
    display: flex;
    align-items: center;
}
.header-wrapper.stuck #logo img,
.header.stuck #logo img {
    max-height: 46px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

/* ⑤a Hero cao thêm cho khớp menu dọc 430px.
   Banner cao hơn thì chữ phải giãn theo, không thì nhìn trống hoác ở giữa. */
.btln-home-hero .btln-hero-copy h1 { font-size: 44px; line-height: 1.12; }
.btln-home-hero .btln-hero-copy .btln-eyebrow { margin-bottom: 12px; }
.btln-home-hero .btln-hero-copy .btln-hero-lead p { font-size: 17px; margin-bottom: 22px; }
@media (max-width: 849px) {
    .btln-home-hero .btln-hero-copy h1 { font-size: 30px; }
    .btln-home-hero .btln-hero-copy .btln-hero-lead p { font-size: 15px; }
}

/* ⑤c Lưới danh mục — gọn lại: ô thấp hơn, nhãn 2 dòng không tràn,
   nền phủ đậm dần để nhãn trắng luôn đọc được kể cả ảnh sáng. */
.btln-cats-grid .box-category .box-text { padding: 12px 14px; }
.btln-cats-grid .box-category .box-text .header-title {
    font-size: 13.5px; line-height: 1.35; letter-spacing: -.1px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.btln-cats-grid .box-category .box-image::after {
    background: linear-gradient(180deg, rgba(11,31,84,.10) 38%, rgba(11,31,84,.82) 100%);
}

/* ⑤d 11 section sản phẩm — nhóm mới chỉ có 2 sản phẩm demo, hàng 4 cột sẽ
   hụt nửa bên phải. Canh giữa để hàng thiếu vẫn cân; hàng đủ 4 không đổi
   vì đã lấp kín chiều ngang. Khách thêm sản phẩm là tự đầy. */
.btln-product-grid.row { justify-content: center; }
/* Tiêu đề nhóm dài (BĂNG TẢI TRỨNG, VẬT TƯ CHĂN NUÔI) không được đè hàng link con */
.btln-cat-section .btln-cat-head .btln-cat-title { line-height: 1.25; }
@media (max-width: 849px) {
    .btln-cat-section .btln-cat-subs { margin-top: 6px; }
}

/* ② TRANG LIÊN HỆ — khu form bị lệch (feedback 11/08/2026) ────────
   Hai lỗi:
   a) `.btln-form-grid` bọc 4 trường đầu trong CF7 nhưng CHƯA TỪNG có CSS
      → 4 ô xếp dọc hết, form dài thượt, nhìn lệch hẳn so với khối bản đồ.
   b) margin-right:auto bị Flatsome đè về 0 → cột dồn sang phải thay vì canh giữa. */
.btln-lh-form-giua > .col-inner {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* Form thành thẻ trắng trên nền xám cho tách khối */
.btln-contact-form .wpcf7 {
    background: #FFFFFF;
    border: 1px solid var(--btln-border, #E8EAED);
    border-radius: var(--r-1, 4px);
    padding: 28px 28px 24px;
}

/* 4 trường ngắn xếp 2 cột, ô nội dung dài để nguyên full */
.btln-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}
.btln-form-grid > label { display: block; min-width: 0; }
.btln-contact-form .wpcf7-form > label { display: block; }
.btln-contact-form .wpcf7-form input:not([type="submit"]),
.btln-contact-form .wpcf7-form textarea { width: 100%; }

@media (max-width: 649px) {
    .btln-form-grid { grid-template-columns: 1fr; gap: 0; }
    .btln-contact-form .wpcf7 { padding: 20px 18px 18px; }
}

/* Câu cam kết ngắt dòng lệch ("…UY TÍN VỚI / GIÁ CẠNH TRANH").
   text-wrap:balance chia đều hai dòng; max-width hẹp lại để luôn 2 dòng cân. */


/* ⑤b KHỐI GIỚI THIỆU NGẮN — dựng lại 11/08/2026 (bản 2)
   Bản 1 dàn đều chữ giữa nền xám → khách chê thô.
   Mẫu "Trust & Authority": tách phần MÔ TẢ (để đọc) khỏi phần CAM KẾT (để nhớ).
   Cam kết thành thẻ navy có vạch đỏ — điểm dừng mắt duy nhất của khối. */
.btln-gt-row { align-items: stretch; }
.btln-gt-loi .col-inner {
    height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: 30px 38px 30px 26px !important;
    background: #FFFFFF;
    border: 1px solid var(--btln-border, #E8EAED);
    border-right: 0;
    border-radius: var(--r-1,4px) 0 0 var(--r-1,4px);
    position: relative;
}
/* Vạch navy dọc mép trái — dấu hiệu "khối thông tin công ty" */
.btln-gt-loi .col-inner::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--btln-primary, #1230A8);
    border-radius: var(--r-1,4px) 0 0 var(--r-1,4px);
}
.btln-gt-eyebrow {
    margin: 0 0 10px; font-size: var(--fs-1,12px); font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: #7A838F;
}
.btln-gt-mota {
    margin: 0; font-size: 17px; line-height: 1.66; color: #2A323B; max-width: 62ch;
}
.btln-gt-mota strong { color: var(--btln-primary, #1230A8); font-weight: 700; }

.btln-gt-camket .col-inner {
    height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: 30px 30px 30px 32px !important;
    background: linear-gradient(152deg, #1B3EBF 0%, #0F2A86 100%);
    border-radius: 0 var(--r-1,4px) var(--r-1,4px) 0;
    position: relative; overflow: hidden;
}
.btln-gt-camket__nhan {
    margin: 0 0 10px; padding-bottom: 9px; position: relative;
    font-size: var(--fs-1,12px); font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255,255,255,.72);
}
.btln-gt-camket__nhan::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px;
    border-radius: 2px; background: var(--btln-action, #E8391D);
}
.btln-gt-camket__noi {
    margin: 0; font-size: 19px; line-height: 1.45; font-weight: 600; color: #FFFFFF;
}
.btln-gt-camket__noi strong { color: #FFFFFF; font-weight: 800; }

@media (max-width: 849px) {
    .btln-gt-loi .col-inner {
        border-right: 1px solid var(--btln-border, #E8EAED);
        border-bottom: 0;
        border-radius: var(--r-1,4px) var(--r-1,4px) 0 0;
        padding: 24px 22px 22px !important;
    }
    .btln-gt-loi .col-inner::before { width: 100%; height: 4px; bottom: auto; border-radius: 4px 4px 0 0; }
    .btln-gt-camket .col-inner { border-radius: 0 0 var(--r-1,4px) var(--r-1,4px); padding: 24px 22px !important; }
    .btln-gt-mota { font-size: 15.5px; }
    .btln-gt-camket__noi { font-size: 17px; }
}

/* ═══ LƯỚI DANH MỤC — gọn trong 1 màn hình (feedback 11/08/2026) ═══════
   11 ô / 4 cột = 3 hàng ≈ 660px + tiêu đề → tràn màn hình.
   Nay 6 cột = 2 hàng (6+5). Ô nhỏ, có khe 14px, chữ nhỏ lại cho đỡ thô. */
/* Dùng gap thay margin âm: margin âm chồng với đệm container làm lưới lệch
   3px so với tiêu đề section. gap cho lề trùng khít container. */
.btln-cats-grid.row { display: flex; flex-wrap: wrap; gap: 14px;
    margin-left: 0 !important; margin-right: 0 !important; }
.btln-cats-grid.row > .col {
    padding: 0 !important; margin: 0 !important;
    flex: 0 0 calc((100% - 5 * 14px) / 6);
    max-width: calc((100% - 5 * 14px) / 6);
}
@media (max-width: 1099px) and (min-width: 850px) {
    .btln-cats-grid.row > .col { flex-basis: calc((100% - 3 * 14px) / 4); max-width: calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 849px) {
    .btln-cats-grid.row { gap: 10px; }
    .btln-cats-grid.row > .col { flex-basis: calc((100% - 10px) / 2); max-width: calc((100% - 10px) / 2); }
}

.btln-cats-grid .box-category { border-radius: var(--r-1,4px); overflow: hidden; }

/* Chữ nhỏ lại — 13.5px ở 4 cột trước đây là thô khi ô chỉ còn ~195px */
.btln-cats-grid .box-category .box-text { padding: 9px 10px 10px; }
.btln-cats-grid .box-category .box-text .header-title {
    font-size: 12px !important;
    line-height: 1.32;
    letter-spacing: 0;
    font-weight: 700;
    /* 3 dòng: tên "Lưới sàng, lưới nghiền, lưới hàn, dao nghiền" dài 43 ký tự,
       clamp 2 dòng sẽ cắt cụt giữa chữ. Nhãn nằm đáy ô nên nở lên trên, không đội ô. */
    -webkit-line-clamp: 3;
}

/* Phản hồi hover cho ô bấm được */
.btln-cats-grid .col .box-category { transition: transform .22s ease, box-shadow .22s ease; }
@media (hover: hover) {
    .btln-cats-grid .col:hover .box-category {
        transform: translateY(-3px);
        box-shadow: var(--sh-2, 0 8px 24px rgba(10,10,10,.14));
    }
}

@media (max-width: 1099px) and (min-width: 850px) {
    .btln-cats-grid .box-category .box-text .header-title { font-size: 12.5px !important; }
}
@media (max-width: 849px) {
    .btln-cats-grid.row { row-gap: 10px; }
    .btln-cats-grid .box-category .box-text .header-title { font-size: 13px !important; }
}

/* ═══ ĐẦU TRANG LƯU TRỮ (Tin tức, chuyên mục) — thêm ảnh nền 11/08/2026 ═══
   Trước: khối navy đặc, lệch hẳn 8 trang tĩnh vốn dùng [ux_banner] có ảnh.
   Nay gắn ảnh qua hook; phủ navy để chữ trắng vẫn đạt tương phản như các trang kia. */
.btln-archive-hero--anh {
    background-size: cover !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    position: relative;
}
.btln-archive-hero--anh::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(10, 20, 50, 0.68);
    pointer-events: none;
}
.btln-archive-hero--anh .section-content { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════
   CHỮ MỒ CÔI — dòng cuối chỉ còn một từ (11/08/2026)
   ═══════════════════════════════════════════════════════════════════
   Tiếng Việt nhiều từ ghép 2–3 âm tiết nên rất hay rơi một chữ xuống dòng:
   "…Công nghiệp Lê / Nguyễn", "…tuổi thọ thiết / bị.". Đo được 29 chỗ trên
   4 kích thước màn hình (_scripts/do-chu-mo-coi.mjs).

   Xử lý bằng thuộc tính chuẩn thay vì chèn &nbsp; hay chỉnh max-width từng chỗ:
     · text-wrap: balance — chia đều số từ mỗi dòng, dùng cho TIÊU ĐỀ (ngắn, ít dòng)
     · text-wrap: pretty  — trình duyệt tự tránh để dòng cuối một từ, dùng cho ĐOẠN VĂN
   Trình duyệt cũ không hiểu thì bỏ qua, chữ vẫn hiển thị bình thường — hỏng có kiểm soát.

   ⚠️ Thêm khối chữ mới thì thêm selector vào đây, đừng đi chỉnh max-width thủ công. */

/* ── Tiêu đề: chia đều các dòng ── */
h1, h2, h3, h4,
.btln-page-hero__h1,
.btln-cat-title,
.btln-gt-camket__noi,
.btln-dv-card__t,
.btln-buoc__t,
.btln-commit-item h3,
.btln-use-card h3,
.btln-lh-ten,
.btln-intro-cam2 {
    text-wrap: balance;
}

/* ── Đoạn văn và câu dẫn: tránh dòng cuối trơ một từ ── */
p,
.btln-page-hero__sub,
.btln-hero-lead p,
.btln-gt-mota,
.btln-intro-lead2,
.btln-about-copy p,
.btln-page-copy,
.btln-page-lead,
.btln-dv-card__m,
.btln-buoc__m,
.btln-commit-item p,
.btln-use-card p,
.btln-lh-info-body p,
.btln-stat__t,
.btln-cats-grid .header-title {
    text-wrap: pretty;
}

/* Nhãn ô danh mục đang bị clamp 3 dòng — pretty chỏi với line-clamp,
   trả về wrap thường để clamp hoạt động đúng. */
.btln-cats-grid .box-category .box-text .header-title { text-wrap: wrap; }

/* ═══ POPUP BÁO GIÁ (Popup Maker) — 11/08/2026 ═══════════════════════
   Nút "Liên hệ báo giá" trước dẫn sang /lien-he/ — trang đó có bản đồ,
   thông tin công ty và form, khách bị loãng. Nay mở popup chỉ có form. */
.pum-theme-default-theme .pum-container,
.pum-container {
    border-radius: var(--r-1, 4px);
    box-shadow: 0 24px 64px rgba(10, 16, 40, .28);
    padding: 28px 28px 22px;
    border-top: 3px solid var(--btln-primary, #1230A8);
}
.btln-popup-bao-gia .btln-popup-dan {
    margin: 0 0 18px; font-size: var(--fs-2, 14px); line-height: 1.6; color: #56606B;
}
.btln-popup-bao-gia .wpcf7 { background: transparent; border: 0; padding: 0; }
.btln-popup-bao-gia .btln-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.btln-popup-bao-gia .wpcf7-form label { display: block; }
.btln-popup-bao-gia .wpcf7-form input:not([type="submit"]),
.btln-popup-bao-gia .wpcf7-form textarea { width: 100%; }
.btln-popup-bao-gia .wpcf7-form textarea { min-height: 92px; }
.btln-popup-bao-gia .btln-popup-goi {
    margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--btln-border, #E8EAED);
    font-size: var(--fs-2, 14px); color: #56606B;
}
.btln-popup-bao-gia .btln-popup-goi a { color: var(--btln-primary, #1230A8); font-weight: 700; }

/* Ô "Sản phẩm quan tâm" đã điền sẵn — cho thấy rõ là chỉ đọc */
.btln-popup-bao-gia input[readonly] { background: #F4F6FA; cursor: default; }

/* Nút đóng: mặc định Popup Maker là nút xanh lơ chữ "CLOSE", đè lên câu dẫn.
   Đổi thành dấu × trung tính, đủ 44px để bấm bằng ngón tay (chuẩn tiếp cận). */
.pum-container .pum-close {
    top: 6px !important; right: 6px !important;
    width: 44px !important; height: 44px !important;
    padding: 0 !important; line-height: 44px !important;
    background: transparent !important;
    border: 0 !important; border-radius: 50% !important;
    box-shadow: none !important;
    color: #8A929C !important;
    font-size: 0 !important;
    transition: background .18s ease, color .18s ease;
}
.pum-container .pum-close::before {
    content: "×"; font-size: 30px; line-height: 44px; font-weight: 400;
}
.pum-container .pum-close:hover,
.pum-container .pum-close:focus-visible {
    background: #F0F2F6 !important; color: var(--btln-ink, #0A0A0A) !important;
}
/* Chừa chỗ cho nút đóng, không để đè lên câu dẫn */
.btln-popup-bao-gia .btln-popup-dan { padding-right: 40px; }
@media (max-width: 549px) {
    .pum-container { padding: 22px 18px 18px; }
    .btln-popup-bao-gia .btln-form-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Popup Maker đặt width cố định 560px bằng JS (thuộc tính inline) — trên màn 390px
   thì tràn ra ngoài, chữ bị cắt cả hai bên. Ép co lại theo bề ngang màn hình.
   Phải dùng !important vì đang chọi với style inline do JS ghi. */
.pum-container {
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .pum-container {
        width: calc(100vw - 32px) !important;
        left: 16px !important;
        right: 16px !important;
        margin-left: 0 !important;
        transform: none !important;
    }
}

/* ═══ KHỐI CTA DÙNG CHUNG (UX Block cta-lien-he-bao-gia) — 11/08/2026 ═══
   Trước: 12 trang mỗi trang tự dựng một khối, ra 3 kiểu bố cục khác nhau.
   Nay 1 block dùng chung → bố cục giống nhau tuyệt đối, sửa một chỗ đổi cả site.

   ⚠️ Nút nằm trong .col-inner, KHÔNG phải trong .col (.btln-cta-actions).
   Đặt display:flex lên .col là không ăn — nhắm sai một tầng, mất một vòng mới ra.
   Flatsome cho .button display:flex ở md trở xuống nên nút kéo full width 788px. */
.btln-cta-band .btln-cta-actions > .col-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}
.btln-cta-band .btln-cta-actions > .col-inner > .button {
    width: auto !important;
    flex: 0 0 auto;
    margin-bottom: 0 !important;
}

/* Tablet: cột về span 12, chữ trái — nút canh trái cho thẳng mạch đọc */
@media (max-width: 849px) {
    .btln-cta-band .btln-cta-actions > .col-inner {
        justify-content: flex-start;
        margin-top: var(--sp-3, 24px);
    }
    .btln-cta-band .btln-cta-actions > .col-inner > .button { min-width: 220px; }
}

/* Mobile: nút full width là đúng — ngón tay dễ bấm */
@media (max-width: 549px) {
    .btln-cta-band .btln-cta-actions > .col-inner {
        display: block;
        margin-top: var(--sp-2, 16px);
    }
    .btln-cta-band .btln-cta-actions > .col-inner > .button {
        width: 100% !important;
        min-width: 0;
    }
    .btln-cta-band .btln-cta-actions > .col-inner > .button + .button { margin-top: 10px !important; }
}

/* ═══ KHỐI GIỚI THIỆU NGẮN — bản 4 (11/08/2026) ═══════════════════════
   Bản 3 dùng nền xám trung tính #F5F7FA → chìm giữa hero tối phía trên và
   lưới sản phẩm trắng phía dưới, khách phản ánh "hơi chìm".

   Bản 4 giữ NGUYÊN bố cục bản 3 (dải liền mạch, ngăn bằng nét, con dấu tick)
   nhưng lật sang tông navy thương hiệu cho nổi khối.
   Lưu ý: bản 1 từng bị chê "thô" — cái thô đó là do BỐ CỤC dàn đều chữ giữa,
   không phải do màu. Nên lần này giữ bố cục tốt, chỉ đổi tông.

   Tương phản: trắng trên #1230A8 ≈ 8,6:1 · trắng 78% ≈ 6,7:1 — đều vượt AA. */
.btln-gt3 {
    background: linear-gradient(135deg, #16359F 0%, #102A80 52%, #0A1D5E 100%);
    border-radius: var(--r-1, 4px);
    margin-top: var(--sp-3, 24px) !important;
    margin-bottom: var(--sp-1, 8px) !important;
    box-shadow: 0 10px 30px rgba(14, 36, 120, .18);
    overflow: hidden;
    position: relative;
}
/* Vệt đỏ mảnh chạy dọc mép trái — nhắc lại màu nhấn thương hiệu */
.btln-gt3::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--btln-action, #E8391D);
}

.btln-gt3-chinh > .col-inner { padding: 30px 40px 30px 38px !important; }

/* ⚠️ font-size PHẢI có !important: theme có quy tắc
   `p, li, td, th { font-size: var(--fs-3,16px) !important }` từ đợt QC cũ,
   ép MỌI đoạn văn về 16px. Không có !important thì toàn bộ thứ bậc chữ
   dưới đây không áp dụng — tên công ty to bằng thân bài, khối mất trọng tâm.
   Đã dính đúng lỗi này ngày 11/08/2026. */
.btln-gt3-kicker {
    text-wrap: balance;
    margin: 0 0 14px;
    padding-bottom: 12px;
    position: relative;
    /* Tên công ty phải LỚN HƠN câu mô tả bên dưới (24 so với 17px).
       Bản trước để 15px chữ hoa + giãn chữ — nhìn ra nhãn phụ, không ra đầu khối,
       lại còn nhỏ hơn thân bài 18px. Bỏ chữ hoa: viết đúng như khách gõ,
       và ở 24px thì chữ hoa + giãn chữ sẽ dài lê thê, mobile vỡ 3 dòng. */
    font-size: 24px !important;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.3;
    text-transform: none;
    color: #FFFFFF;
}
/* Vạch đỏ ngắn dưới tên công ty — đánh dấu đây là đầu khối, không phải câu phụ */
.btln-gt3-kicker::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 44px; height: 3px; border-radius: 2px;
    background: var(--btln-action, #E8391D);
}
.btln-gt3-cau {
    margin: 0;
    font-size: 17px !important;
    line-height: 1.68;
    color: rgba(255, 255, 255, .94);
    max-width: 60ch;
    text-wrap: pretty;
}
/* Trên nền navy thì chữ nhấn phải SÁNG lên, không thể để navy */
/* Cụm từ ghép tiếng Việt KHÔNG được xé đôi giữa hai dòng.
   Ở 390px từng ngắt thành "gàu / tải", "xích công / nghiệp" — đọc gãy hẳn.
   Cụm dài nhất "khung sàng và phụ kiện" ≈ 150px, cột hẹp nhất ≈ 310px nên an toàn. */
.btln-gt3-cau strong { color: #FFFFFF; font-weight: 700; white-space: nowrap; }
.btln-nw { white-space: nowrap; }

.btln-gt3-camket > .col-inner {
    padding: 30px 34px 30px 34px !important;
    border-left: 1px solid rgba(255, 255, 255, .18);
}
.btln-gt3-nhan {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: var(--fs-1, 12px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px !important;
    color: rgba(255, 255, 255, .92);
}
/* Con dấu đảo màu: nền trắng, dấu tick navy — nổi bật trên nền tối */
.btln-gt3-tick {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    padding: 3px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--btln-primary, #1230A8);
}
.btln-gt3-noi {
    margin: 0;
    font-size: 17px !important;
    font-weight: 600;
    line-height: 1.55;
    color: #FFFFFF;
    text-wrap: balance;
}
/* Cụm nhấn không tách rời giữa hai dòng, và sáng hẳn để bật khỏi nền */
.btln-gt3-noi strong { color: #FFFFFF; font-weight: 800; white-space: nowrap; }

@media (max-width: 849px) {
    .btln-gt3-chinh > .col-inner { padding: 26px 26px 20px 30px !important; }
    .btln-gt3-camket > .col-inner {
        padding: 20px 26px 26px 30px !important;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }
    .btln-gt3-cau { font-size: 16.5px !important; max-width: none; }
    .btln-gt3-kicker { font-size: 22px !important; }
}
@media (max-width: 549px) {
    .btln-gt3-chinh > .col-inner { padding: 22px 20px 18px 24px !important; }
    .btln-gt3-camket > .col-inner { padding: 18px 20px 22px 24px !important; }
    /* Tên công ty dài, ở 390px sẽ ngắt giữa cụm "CÔNG NGHIỆP" — giảm giãn chữ
       và cho balance để hai dòng chia đều theo cụm từ. */
    .btln-gt3-kicker { font-size: 20px !important; letter-spacing: -.01em; }
    .btln-gt3-cau { font-size: 15.5px !important; line-height: 1.66; }
    .btln-gt3-noi { font-size: 16px !important; }
}

/* ── TÊN DANH MỤC DÀI: chạy đầy dòng rồi mới xuống ─────────────────────────
   ĐÃ THỬ `text-wrap: balance` và BỎ (13/08/2026): balance chia đều độ dài các
   dòng, nên dòng trên hụt hẳn ra giữa chừng —
       "Lưới sàng, lưới nghiền,        ⏎ lưới hàn, dao nghiền"
   nhìn khó chịu hơn cả lỗi nó đi sửa. Anh Tính bắt đúng chỗ này.

   Không cần balance nữa: bộ lọc `btln_giu_tu_ghep()` trong plugin đã nối các
   âm tiết của từ ghép bằng U+00A0, nên ngắt dòng TỰ NHIÊN vừa chạy đầy dòng
   vừa không bao giờ xé đôi từ —
       "Lưới sàng, lưới nghiền, lưới hàn, ⏎ dao nghiền"

   Giữ `wrap` tường minh để phòng luật `pretty`/`balance` ở nơi khác vói tới. */
.ux-nav-vertical-menu > li > a,
.product-categories li > a,
.widget_product_categories li > a { text-wrap: wrap; }

/* ═══ LƯỚI DANH MỤC TRANG CHỦ — tên tràn đúng 1 chữ thì thu về 1 hàng ═══
   13/08/2026. Trước: 6/11 nhãn xuống dòng chỉ để rơi một chữ ("…CHẤT ⏎ RẮN"),
   một nhãn còn 3 dòng. Nhìn lộn xộn dù nội dung ngắn.

   Hai đòn bẩy, đo bằng _scripts/do-luoi-danh-muc-chu.mjs:
     · nới ô chữ 161 → 177px (đệm ngang 16 → 8px)  ← ăn nhiều nhất
     · hạ chữ 12 → 11.5px + giãn chữ −0.2px
   Kết quả: 9/11 một hàng · 2 tên thật sự dài giữ 2 hàng · hết nhãn 3 dòng.

   ⚠️ Phải giữ đủ 4 lớp class như luật cũ ở trên, không thì !important cũng thua. */
.btln-cats-grid .box-category .box-text { padding: 9px 8px 10px !important; }
.btln-cats-grid .box-category .box-text .header-title {
    font-size: 11.5px !important;
    letter-spacing: -.2px !important;
    -webkit-line-clamp: 2;          /* không nhãn nào cần 3 dòng nữa */
}
@media (max-width: 1099px) and (min-width: 850px) {
    .btln-cats-grid .box-category .box-text .header-title { font-size: 12px !important; }
}
@media (max-width: 849px) {
    /* Mobile: ô hẹp hơn desktop nên chữ to lại cho dễ đọc.
       ⚠️ line-clamp phải trả về 3: ở bề rộng này tên dài nhất cần đúng 3 dòng,
       kẹp 2 là cắt cụt "…lưới hàn, dao" — đã dính khi sửa ngày 13/08/2026. */
    .btln-cats-grid .box-category .box-text { padding: 9px 12px 10px !important; }
    .btln-cats-grid .box-category .box-text .header-title {
        font-size: 13px !important;
        letter-spacing: 0 !important;
        -webkit-line-clamp: 3;
    }
}

/* ═══ FOOTER — tiêu đề cột phải LỚN hơn nội dung ═══════════════════════
   13/08/2026. Đo được: nhãn cột 12px/700 · link và đoạn văn 16px/400.
   Tiêu đề nhỏ hơn thân bài thì đọc ra chú thích, không ra đầu mục —
   đúng lỗi đã gặp ở khối giới thiệu trang chủ.

   Nay: nhãn 15px, nội dung 14.5px. Nhãn để trắng đặc, nội dung xám nhạt —
   chênh lệch đến từ cả cỡ chữ lẫn độ sáng, không chỉ mỗi cỡ. */
.btln-footer .ux-menu-title {
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: .04em;
    color: #FFFFFF;
    margin-bottom: 14px;
}
.btln-footer .ux-menu-link__link {
    font-size: 14.5px !important;
    min-height: 36px;
    padding: 5px 0;
    color: #C9D3DB;
}
.btln-footer .ux-menu-link__link:hover { color: #FFFFFF; }
.btln-footer p { font-size: 14.5px !important; line-height: 1.62; color: #C9D3DB; }
.btln-footer p strong { color: #FFFFFF; }
.btln-footer h3 { font-size: 22px !important; color: #FFFFFF; }

@media (max-width: 849px) {
    /* Gọn lại: bớt đệm khối, bớt khoảng cách giữa các đoạn.
       Giữ vùng bấm của link ở 44px — đây là đường điều hướng chính trên mobile,
       thu nhỏ nữa là khó bấm trúng. Chỗ tiết kiệm lấy từ đệm và lề đoạn văn. */
    .btln-footer { padding-top: 28px !important; padding-bottom: 12px !important; }
    .btln-footer h3 { font-size: 19px !important; margin-bottom: 8px; }
    /* Cỡ chữ tiêu đề/nội dung do khối "FOOTER: tiêu đề cột 1 dòng" ở cuối file
       quyết định — ở đây chỉ lo khoảng cách, để một chỗ duy nhất cầm cỡ chữ. */
    .btln-footer .ux-menu-title { margin-bottom: 8px; }
    .btln-footer .ux-menu-link__link { min-height: 44px; padding: 4px 0; }
    .btln-footer p { font-size: 14px !important; line-height: 1.55; margin-bottom: 8px !important; }
    .btln-footer .row > .col { padding-bottom: 16px !important; }
}

/* ═══ HAI CHỖ CHỮ BỊ CHÌM — 13/08/2026 ════════════════════════════════
   ① Khối giới thiệu, câu cam kết:
      "Đơn vị cung cấp <span class="btln-nw">vật tư công nghiệp</span>
       <strong>uy tín</strong> với <strong>giá cạnh tranh</strong>"
      Span kia sinh ra chỉ để chống ngắt dòng, nhưng nó rơi về weight 400
      trong khi câu nền là 600 và hai cụm bên cạnh là 800 — hoá ra từ khoá
      chính của công ty lại là chữ NHẸ NHẤT câu. Đo được: 17px/400.
   ② Dòng bản quyền: <strong> chứa tên pháp nhân mà lại mờ hơn chữ thường
      (rgba trắng .5 → chỉ 5.07:1). <strong> mờ đi là ngược nghĩa. */
.btln-gt3-noi .btln-nw { font-weight: 800; color: #FFFFFF; }
.copyright-footer strong { color: rgba(255,255,255,.88); font-weight: 700; }

/* ── FOOTER: tiêu đề cột phải nằm gọn 1 DÒNG ở mọi kích thước ─────────────
   13/08/2026. "Danh mục sản phẩm" cần 176px chữ ở cỡ 15px.

   Bề rộng ô chứa tiêu đề, ĐO Ở TRẠNG THÁI TỰ NHIÊN (bố cục 3·2·3·4):

        màn hình   1440  1280  1200  1100  1000   900   850
        Liên kết    155   153   140   123   107    90    82
        Danh mục    263   260   240   215   190   165   153

   Bốn cột nằm nguyên MỘT HÀNG suốt từ 1440 xuống 850 — Flatsome không có
   breakpoint nào ở giữa. Nên cột "Liên kết nhanh" (span 2) teo dần còn 82px,
   trong khi chữ cần 135px. Cỡ chữ vừa ô 82px là ~9px: bóp chữ không cứu được,
   phải nới CỘT.

   ⚠️ Lần sửa trước hỏng vì đoạn giải thích này nằm NGOÀI dấu chú thích —
   comment đã đóng rồi mà vẫn viết tiếp. Trình duyệt gặp rác liền nuốt luôn
   khối @media ngay sau, nên rule không chạy mà cũng không báo lỗi gì. */

/* ① 850–1279px: xếp 2 cột mỗi hàng cho rộng ra.
      Mốc trên là 1279 chứ không phải 1199: ở 1200px ô chỉ hơn chữ 5px,
      sát quá, chỉ cần đổi phông hay thêm một chữ là tràn. */
@media (min-width: 850px) and (max-width: 1279px) {
    .btln-footer .row > .col {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }
}

/* ② 550–849px: Flatsome cho mỗi cột nguyên hàng (span__md=12) nên ô rộng ~386px,
      thoải mái. Chỉ cần chỉnh lại thứ bậc: trước đây tiêu đề và nội dung
      BẰNG NHAU (14px/14px), đọc ra ngang hàng chứ không ra đầu mục. */
@media (max-width: 849px) {
    .btln-footer .ux-menu-title { font-size: 15px !important; }
    .btln-footer .ux-menu-link__link { font-size: 13.5px !important; }
}

/* ③ ≤549px: hai cột menu về nằm cạnh nhau (span__sm=6), ô còn ~156–191px.
      Hạ tiêu đề 13,5px và bỏ giãn chữ (được thêm ~4% bề rộng);
      hạ nội dung 12,5px để tiêu đề VẪN lớn hơn. */
@media (max-width: 549px) {
    .btln-footer .ux-menu-title { font-size: 13.5px !important; letter-spacing: 0; }
    .btln-footer .ux-menu-link__link { font-size: 12.5px !important; }
}

/* ④ ≤359px: ô còn 136px, cỡ tối đa 11,6px — nhỏ tới mức hết ra tiêu đề.
      Ở đây đành cho mỗi cột một hàng riêng: footer dài thêm nhưng đọc được. */
@media (max-width: 359px) {
    .btln-footer .row > .col {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* ═══ LOGO STICKY — một chỗ duy nhất cầm cỡ logo khi header dính ═══════
   13/08/2026. Triệu chứng: trên mobile, cuộn xuống thì logo bị cụt chân.
   Đo được: <img> cao 46px nhưng thẻ <a> bọc nó chỉ 34px và overflow:hidden
   → xén đúng 12px. Hai đợt sửa trước đặt hai con số khác nhau ở hai chỗ,
   cái sau chỉ thắng cho <img> mà không thắng cho <a>.

   Nay: khung bọc co theo ảnh, chỉ ẢNH mới bị giới hạn chiều cao. */
.stuck .logo,
.stuck .logo a,
.header-wrapper.stuck #logo,
.header.stuck #logo {
    display: flex !important;
    align-items: center;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}
.stuck .logo img,
.header-wrapper.stuck #logo img,
.header.stuck #logo img {
    max-height: 46px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
}

/* ═══ THẺ DANH MỤC: dòng "N Sản phẩm" bị cụt trên mobile ═══════════════
   Đây là lỗi của Flatsome, không phải cỡ chữ. Thẻ đếm mang class
   `count show-on-hover hover-reveal`: mặc định `max-height:0` + `opacity:0`,
   rê chuột mới bung ra. Trên thiết bị CHẠM không có hover, Flatsome bật
   `opacity:1` nhưng QUÊN gỡ `max-height:0` — chữ hiện ra mà bị kẹp chiều cao 0,
   nên dính sát viền và mất chân chữ. Đo được: box-text cần 48px, chỉ được 43px.

   Gỡ cả hai chốt cùng lúc, và nới khung chứa cho đủ chỗ. */
@media (hover: none), (max-width: 849px) {
    .btln-cats-grid .box-category .box-text .count.hover-reveal,
    .btln-cats-grid .box-category .box-text .count.show-on-hover {
        max-height: none !important;
        opacity: 1 !important;
        margin: 3px 0 0 !important;
        line-height: 1.35;
    }
    .btln-cats-grid .box-category .box-text { max-height: none !important; }
    /* Ảnh nền cao thêm để chỗ chữ không đè lấn lên hình */
    .btln-cats-grid .box-category .box-image { min-height: 168px; }
}

/* Máy rất hẹp (≤359px): thẻ danh mục còn 2 cột nên ô chữ chỉ 115px,
   hai tên dài nhất cần 4 dòng. Kẹp 3 là cắt cụt giữa chữ.
   Chỉ nới số dòng, KHÔNG hạ cỡ chữ — đo thấy 13px vẫn đủ chỗ ở 4 dòng. */
@media (max-width: 359px) {
    .btln-cats-grid .box-category .box-text .header-title { -webkit-line-clamp: 4; }
}

/* Header mobile/tablet khi dính: canh GIỮA logo cho khớp trạng thái chưa cuộn.
   13/08/2026. Đo được: chưa cuộn logo đúng tâm (lệch 0px), cuộn xuống lệch
   −46px (mobile) / −117px (tablet). Nguyên nhân là khối "LOGO STICKY" ở trên
   đặt `display:flex` cho khung logo mà không đặt `justify-content`, nên nó về
   mặc định dồn trái — ảnh 53px nằm nép mép trái của cột rộng 144px.

   Chỉ áp ≤849px: từ đây trở lên là header desktop, logo vốn canh trái. */
@media (max-width: 849px) {
    .stuck .logo,
    .stuck .logo a,
    .header-wrapper.stuck #logo,
    .header.stuck #logo {
        justify-content: center !important;
        text-align: center;
    }
}

/* ═══ ĐẦU TRANG DẠNG ĐƠN GIẢN — chỉ TIÊU ĐỀ (khách chốt 13/08/2026) ═══
   Nhãn nhỏ và câu mô tả đã được gỡ khỏi nội dung trang + khỏi hook đầu trang
   lưu trữ. Chốt thêm bằng CSS để phòng hai chuyện:
     · UX Builder lưu lại có thể làm shortcode mọc lại (đã dính vụ này 11/08)
     · bài viết đơn / trang mới sau này lỡ dùng lại mấy class đó
   Chiều cao do khối min-height ở trên cầm, không đặt lại ở đây. */
.btln-page-hero .btln-eyebrow,
.btln-page-hero .btln-page-eyebrow,
.btln-page-hero .btln-hero-lead,
.btln-page-hero .btln-page-lead,
.btln-page-hero .btln-page-hero__sub,
.btln-archive-hero .btln-eyebrow,
.btln-archive-hero .btln-page-hero__sub { display: none !important; }

/* Chỉ còn một dòng chữ thì canh giữa theo chiều dọc cho cân */
.btln-page-hero .btln-hero-copy,
.btln-archive-hero__trong { margin-top: 0; margin-bottom: 0; }

/* ═══ ĐẦU TRANG ĐỒNG BỘ — MỘT chỗ duy nhất cầm hình học thanh tiêu đề ═══
   13/08/2026. Khách chốt: mọi đầu trang chỉ hiện tiêu đề, canh lề phải khớp nhau.

   Đo được trước khi sửa (desktop 1440px):
     · 7 trang tĩnh  [page_header] → ô 1260px + đệm 15px → chữ ở x=105, H1 38px
     · trang Woo     category-title → ô 1170px + đệm 0    → chữ ở x=135, H1 28px
   Lệch đúng 30px. Thủ phạm là bốn khối `.shop-page-title` cộng dồn qua bốn đợt
   sửa, khối cuối ghim cứng 1170px từ hồi site_width còn 1170 — nay đã là 1290.

   Cách chữa KHÔNG phải thêm lớp thứ năm mà là GỠ hết rồi để `.container` gốc của
   Flatsome tự lo — thẻ `.page-title-inner` của Woo vốn đã mang class `container`.
   Ở đây chỉ còn phần dọn dáng cho hai bên giống nhau. */
div.shop-page-title,
.page-title.shop-page-title {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--sp-4, 32px) !important;
}
/* Tiêu đề viết HOA (khách chốt 13/08/2026). Đặt ở ĐÂY, một chỗ duy nhất, phủ cả
   3 nguồn sinh đầu trang: [page_header] trang tĩnh · hook trang lưu trữ · Woo.
   Không dùng thuộc tính `title_case="uppercase"` của shortcode vì nó chỉ tác dụng
   lên trang tĩnh — thành ra phải đặt thêm 2 chỗ nữa cho lưu trữ và Woo, đúng kiểu
   trùng lặp đã gây lệch 30px trước đó. */
.page-title h1,
.shop-page-title h1 { text-transform: uppercase; }

/* Cỡ chữ H1 bằng trang tĩnh. Flatsome gắn `.is-xlarge` cho H1 trang Woo,
   line-height của nó làm hộp cao gấp đôi nên phải ghi đè kèm. */
.shop-page-title h1,
.shop-page-title h1.is-xlarge {
    font-size: var(--fs-7, 38px) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
/* Mobile dùng ĐÚNG token của thang chữ mobile (--fs-5, 22px) như mọi H1 khác —
   xem khối "MOBILE — sửa theo phản hồi 06/08/2026". Đặt 28px ở đây thì trang Woo
   to hơn trang tĩnh 6px, đúng kiểu lệch mà khách bắt được. */
@media (max-width: 549px) {
    .shop-page-title h1,
    .shop-page-title h1.is-xlarge { font-size: var(--fs-5, 22px) !important; }
}

/* ═══ TÊN SẢN PHẨM TRONG THẺ — kẹp 2 dòng, thừa thì "…" ═══════════════
   Anh Tính chốt 13/08/2026: chỗ này KHÔNG áp quy tắc ngắt dòng như menu hay
   danh mục. Lý do: hàng trăm mã hàng, tên dài ngắn khác nhau, không thể lập
   từ điển từ ghép cho hết — và cũng không cần, vì thẻ sản phẩm chỉ cần đủ
   nhận diện. Kẹp cứng 2 dòng rồi cắt bằng dấu ba chấm là gọn và đều nhất.

   Vì vậy cũng KHÔNG dùng `text-wrap: balance/pretty` ở đây: cân dòng trên một
   danh sách dài chỉ làm mỗi thẻ một kiểu hụt khác nhau, nhìn còn rối hơn. */
/* ⚠️ Chỉ kẹp ĐÚNG MỘT tầng — thẻ <a> mang chữ. Bản đầu kẹp cả <p> lẫn <a>,
   lồng hai `-webkit-box` vào nhau: Chromium vẫn ra dấu ba chấm nhưng Safari
   hay nuốt mất, thành ra chữ cụt trơ không báo hiệu gì. */
.product-small .name a,
p.name.product-title a,
.woocommerce-loop-product__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: wrap;            /* chặn balance/pretty từ luật khác vói tới */
    word-break: normal;
    overflow-wrap: break-word;  /* chỉ bẻ khi mã hàng dài không có dấu cách */
}
/* Ô tên cao cố định 2 dòng để các thẻ trong cùng hàng không so le nhau */
.product-small .name,
p.name.product-title {
    min-height: calc(2 * 1.4em);
    overflow: hidden;
}

/* ═══ TRANG CHI TIẾT SẢN PHẨM — MOBILE (21/08/2026) ═══════════════════
   Anh Tính chốt 2 điểm ở khổ điện thoại:
   ① Tên sản phẩm nằm TRÊN ảnh + thư viện ảnh (trước đây ảnh chiếm trọn
      màn hình đầu, phải cuộn hết một màn mới thấy tên hàng).
   ② Hai nút "Liên hệ báo giá" + "Gọi ngay" về CÙNG MỘT HÀNG cho gọn.

   Vì sao phải làm bằng CSS chứ không sửa block: layout là UX Block #2661
   dựng bằng UX Builder, có 3 cột .btln-product-gallery / .btln-product-summary
   / .btln-product-side. Tên sản phẩm nằm sâu trong cột summary
   (.col-inner > .product-title-container) nên không đảo được bằng `order`
   ở cấp cột. Dùng display:contents để đôn các con của cột summary lên thành
   phần tử trực tiếp của .row, rồi mới xếp thứ tự được.
   → KHÔNG đụng vào block, khách vẫn kéo–thả sửa được như cũ (ràng buộc ①).

   Chỉ áp dưới 550px — mốc "small" của Flatsome. Từ 550px trở lên bố cục
   giữ nguyên: ảnh trái · tên+nút giữa · sidebar phải. */
@media (max-width:549px){
  .btln-product-layout .row{display:flex;flex-direction:column}

  .btln-product-layout .btln-product-summary,
  .btln-product-layout .btln-product-summary > .col-inner{display:contents}

  /* display:contents làm mất padding của .col → trả lại bằng tay.
     Thêm width:100% vì .row có .align-top (align-items:flex-start),
     phần tử được đôn lên sẽ co theo nội dung thay vì giãn hết hàng. */
  .btln-product-layout .btln-product-summary > .col-inner > *{
    order:3;width:100%;padding-left:10px;padding-right:10px}

  .btln-product-layout .btln-product-summary > .col-inner > .product-title-container{
    order:1;margin-bottom:4px}
  .btln-product-layout .btln-product-gallery{order:2}
  .btln-product-layout .btln-product-side{order:4}

  /* ② Hai nút một hàng. Cần đặc thù 2 lớp để thắng CSS của plugin
     btln-catalog-mode — plugin chèn ở wp_head ưu tiên 999, tức SAU file này.
     Dùng flex:1 1 auto chứ KHÔNG phải 1 1 0: chia đôi đều thì nút
     "Gọi ngay 0909 236 023" (chữ rộng 150px) bị cắt ở máy 320–375px. */
  .btln-product-layout .btln-quote-actions{flex-wrap:nowrap;gap:8px}
  .btln-product-layout .btln-quote-actions .button{
    flex:1 1 auto;min-width:0;white-space:nowrap;text-align:center;
    padding-left:8px!important;padding-right:8px!important}
}

/* Máy hẹp (iPhone SE 320px, Android 360px): siết padding chứ không giảm cỡ chữ,
   để không sinh biến thể nút mới ngoài hệ token PRD § F9. */
@media (max-width:374px){
  .btln-product-layout .btln-quote-actions{gap:6px}
  .btln-product-layout .btln-quote-actions .button{
    padding-left:4px!important;padding-right:4px!important}
}

/* ═══ PHẢN HỒI KHÁCH 27/08/2026 — TRANG CHI TIẾT SẢN PHẨM ═══════════════
   Mr Linh gửi ảnh: tên sản phẩm ngắt thành "Con lăn băng ⏎ tải thép mạ kẽm",
   dòng trên hụt hẳn một khoảng bên phải, nhìn như bị cắt cụt.

   Nguyên nhân: luật `h1,h2,h3,h4{text-wrap:balance}` của khối CHỮ MỒ CÔI
   (11/08/2026) CHIA ĐỀU độ dài hai dòng, nên nó cố ý bỏ trống bên phải dòng
   đầu. Hợp với tiêu đề trang (ngắn, ít dòng); không hợp với tên hàng công
   nghiệp — tên dài, người đọc quét từ trái sang, thấy dòng hụt là thấy lỗi.

   Chốt: tên sản phẩm ở TRANG CHI TIẾT không đặt quy tắc ngắt dòng nào,
   để chữ chảy hết dòng rồi mới xuống. Cùng hướng với quyết định 13/08/2026
   đã gỡ balance cho tên sản phẩm trong lưới. */
.single-product .btln-product-summary h1.product-title,
.single-product h1.product-title.entry-title { text-wrap: wrap; }

/* ── Cột phụ dính khi cuộn ──────────────────────────────────────────────
   Bật bằng chức năng Sticky sẵn có của Column trong UX Builder
   (`[col sticky="true"]`) — khách vẫn tắt/bật lại được bằng kéo–thả.
   Cột `.btln-product-side` dùng CSS native, cột "Sản phẩm mới nhất" cao hơn
   màn hình nên dùng `sticky_mode="javascript"` của Flatsome.

   Trên mobile hai cột này chiếm cả bề ngang, dính lại thì che nội dung
   chính → trả về static dưới 850px. */
@media (max-width: 849px) {
    .btln-product-side .is-sticky-column,
    .btln-product-latest .is-sticky-column { position: static; }
}

/* Nút báo giá nay nằm DƯỚI mô tả ngắn (đổi thứ tự trong UX Block 2661,
   27/08/2026): mô tả là đoạn văn nên cần khoảng thở lớn hơn phía trên nút,
   và bớt khoảng dưới vì kế tiếp chỉ còn dòng "Danh mục:". */
.btln-product-summary .btln-quote-actions { margin: 20px 0 18px; }

/* Cột "Tư vấn sản phẩm" chỉ dính được trong phạm vi chiều cao CỘT CHA.
   Hàng dùng `v_align="top"` nên cột chỉ cao bằng nội dung (632px) — sticky
   gần như không có chỗ chạy. Cho cột giãn hết chiều cao hàng (810px, bằng
   gallery) thì khối tư vấn mới bám theo mắt khi cuộn qua ảnh sản phẩm. */
.btln-product-layout .row > .btln-product-side { align-self: stretch; }
.btln-product-layout .btln-product-side > .is-sticky-column { align-self: flex-start; }

/* Cột dính phải nằm DƯỚI header dính, không chui vào gầm nó.
   Header khi dính cao 120px (logo 70 + thanh menu 50) — số này do §17 của
   plugin `btln-catalog-mode` đo tại chỗ và phát ra biến `--btln-header-stuck`;
   fallback 120px phòng khi JS chưa kịp chạy. +16px cho thoáng. */
.btln-product-layout .btln-product-side > .is-sticky-column {
    top: calc(var(--btln-header-stuck, 120px) + 16px);
}

/* ── Hàng thông tin sản phẩm: CẢ HAI cột phụ cùng dính ───────────────────
   Cột ảnh cao 810px, hai cột bên phải chỉ 372 và 613px → cuộn qua ảnh là
   tên hàng, nút báo giá và hotline trôi mất, để lại một mảng trắng lớn.
   Cho cả hai dính, cùng mốc dừng = chiều cao header dính + 16px thoáng.
   (Bật Sticky của Column trong UX Builder; ở đây chỉ đặt mốc dừng.) */
.btln-product-layout .row > .btln-product-summary,
.btln-product-layout .row > .btln-product-side { align-self: stretch; }

.btln-product-layout .btln-product-summary > .is-sticky-column,
.btln-product-layout .btln-product-side > .is-sticky-column {
    top: calc(var(--btln-header-stuck, 120px) + 16px);
    align-self: flex-start;
}

/* Mobile: ba cột xếp chồng, dính lại là che nhau → trả về static. */
@media (max-width: 849px) {
    .btln-product-summary .is-sticky-column { position: static; }
}

/* Cột "Sản phẩm mới nhất" chuyển sang Sticky CSS (native) — 27/08/2026 vòng 2.
   Chế độ JavaScript đẩy cột lên để lộ phần đuôi khi cuộn xuống, nên trên cửa
   sổ thấp (~700px) tiêu đề "SẢN PHẨM MỚI NHẤT" trôi lên gầm header. Anh Tính
   ưu tiên thấy tiêu đề → CSS thuần, dừng cố định dưới header.
   Đánh đổi: màn hình rất thấp thì mục cuối danh sách nằm ngoài khung khi đang
   dính — vì vậy danh sách đã rút từ 10 xuống 6 mục (cao 604px). */
.btln-product-details .btln-product-latest > .is-sticky-column {
    top: calc(var(--btln-header-stuck, 120px) + 16px);
}

/* ── MỌI CỘT DÍNH TOÀN SITE ĐỀU DỪNG DƯỚI HEADER ────────────────────────
   Flatsome đặt mốc dừng mặc định `top: calc(var(--flatsome-scroll-padding-top)
   + 30px)`, mà biến kia trên site này = 0 → mọi cột dính đứng ở 30px, chui
   vào gầm header dính (cao 120px). Bắt được ở sidebar bài viết ngày
   27/08/2026: tiêu đề "DANH MỤC SẢN PHẨM" bị header cắt ngang.

   Ghi đè một lần ở đây thay vì vá từng trang — luật này phủ cả sidebar blog,
   sidebar danh mục và mọi cột bật Sticky trong UX Builder về sau.
   Biến `--btln-header-stuck` do §17 của plugin `btln-catalog-mode` đo tại chỗ
   và phát ra; 120px chỉ là mức phòng hờ khi JS chưa chạy.
   (Cột chạy chế độ "JavaScript (enhanced)" không dùng luật này — JS tự tính
   theo `flatsomeVars.sticky_height`, cũng đã được §17 nắn lại cho đúng.) */
.is-sticky-column:not([data-sticky-mode]) {
    top: calc(var(--btln-header-stuck, 120px) + 16px);
}

/* Sidebar dính của trang sản phẩm và bài viết đang ghi cứng `top:100px`
   (luật ⑥ ở trên, đặt hồi chưa đo header). Header dính cao 120px nên tiêu đề
   widget "Danh mục sản phẩm" bị cắt ngang — khách bắt được 27/08/2026.
   Đưa về cùng một mốc dừng với các cột dính khác. */
@media (min-width: 850px) {
    #shop-sidebar,
    .widget-area,
    aside.sidebar-inner {
        top: calc(var(--btln-header-stuck, 120px) + 16px);
    }
}

/* ═══ HÀNG RÀO: khung chia cột lỡ dán vào nội dung thì không được bóp chữ ═══
   15/09/2026. Khách copy mô tả từ một trang sản phẩm khác và dán cả khung
   `col large-8 > large-10 col` vào bài, làm nửa cuối trang hẹp còn 345px
   trong khi nửa trên 675px (sản phẩm `bong-ve-sinh-luoi-sang`).
   WordPress KHÔNG lọc thẻ div dán vào — đã thử bằng chính tài khoản khách,
   markup lưu lại nguyên 352/352 byte. Nên lỗi chắc chắn tái diễn.

   Luật này ép mọi `.col`/`.row` NẰM TRONG nội dung bài về đủ chiều ngang.
   Đo ngày đặt luật: 42 trang sản phẩm + tin tức có ĐÚNG 0 phần tử như vậy
   → hiện không đụng gì hợp lệ, chỉ nổ khi có markup lạ lọt vào.
   Không thay thế việc dọn dữ liệu, chỉ để trang không vỡ trước mắt khách.
   Xem NHAT-KY-KY-THUAT.md § 15/09/2026. */
.single-product .panel.entry-content .col,
.single-product .panel.entry-content .row,
.single-post .entry-content .col,
.single-post .entry-content .row {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.single-product .panel.entry-content .col-inner,
.single-post .entry-content .col-inner {
    padding: 0 !important;
}