/*
Theme Name: Hoàng Tuyến Child
Description: Child theme Flatsome cho website HTX SX TM DV Hoàng Tuyến (quạt công nghiệp, hút lọc bụi, làm mát nhà xưởng).
Author: Webvina
Author URI: https://webvina.net
Template: flatsome
Version: 1.37.1
Text Domain: hoangtuyen
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/*************** TOKEN THIẾT KẾ (giai đoạn 3) ***************/
:root {
    --ht-blue: #0060aa;        /* màu chính theo logo; chữ trắng trên nền này đạt 6,45:1 */
    --ht-red: #c8161d;         /* đỏ cho chữ nhỏ ("Liên hệ", giá): 5,85:1 trên nền trắng (#ED1C24 cũ chỉ 4,38:1) */
    --ht-red-dark: #a9171d;    /* tiêu đề đỏ */
    --ht-yellow: #fff806;      /* nền mega menu */
    --ht-text: #111;
    --ht-border: #dedede;
    --ht-radius: 5px;
    --ht-space-1: 8px;
    --ht-space-2: 12px;
    --ht-space-3: 16px;
    --ht-space-4: 24px;
    --ht-space-5: 32px;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/

}

.button,
button,
input[type='submit'],
input[type='reset'],
input[type='button'] {
    font-weight: 700;
}

b,
strong {
    font-weight: 700;
}

#mega-menu-wrap {
    width: 100%;
    background: var(--ht-yellow);
    font-weight: normal;
}

#mega-menu-title {
    text-transform: uppercase;
    font-weight: 700;
    color: #111;
}

.section .section-title-normal {
    font-size: 20px;
    color: var(--ht-red-dark);
    font-weight: 700;
}

#wide-nav>.flex-row>.flex-left {
    min-width: 250px;
}

html,
body {
    line-height: 1.7em;
}

.box-text,
#footer {
    font-size: 0.95em;
}

.breadcrumbs {
    font-weight: 700;
    font-size: 15px;
    color: #111;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical>li>a {
    font-weight: 700;
}

.nav>li>a {
    text-transform: uppercase;
    font-weight: 400;
}

#header-contact li>a {
    font-size: 0.9em;
}

.header-bottom-nav>li>a {
    font-size: 15px;
}

.header-main .nav>li>a {
    font-size: 1em;
    font-weight: 700;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}

pre,
blockquote,
form,
figure,
p,
dl,
ul,
ol {
    margin-bottom: 5px;
}

.widget .is-divider {
    display: none;
}

#header-contact li>a {
    text-transform: none;
    padding: 0px;
}

span.amount {
    color: var(--ht-red);
    font-weight: bold;
}

.box-text-products span.amount {
    white-space: nowrap;
    color: var(--ht-red);
    font-size: 17px;
    font-weight: 700;
}

#product-sidebar {
    padding-right: 0px;
}

#product-sidebar .col-divided,
.page-left-sidebar .col-divided {
    border: none;
    padding-right: 10px;
}

.row-divided>.col+.col:not(.large-12) {
    border: none;
}
.box-blog-post .is-divider,
#product-sidebar .is-divider,
#secondary .is-divider,
#shop-sidebar .is-divider {
    display: none;
}

#top-bar .nav li a {
    color: #fff;
}

span.widget-title {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    color: var(--ht-blue);
}

.footer-widgets span.widget-title {
    font-size: 1.1em;
    font-weight: 700;
}

#product-sidebar span.widget-title,
#secondary span.widget-title,
#shop-sidebar span.widget-title {
    display: inline-block;
    width: 100%;
    padding: 15px;
    text-align: center;
    background: var(--ht-blue);
    color: #FFF;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    font-weight: normal;
    font-size: 16px;
}

.section-title-center span,
.section-title-bold-center span {
    color: var(--ht-blue);
    font-size: 22px;
    font-weight: 700;
}

#product-sidebar .body-widget,
#secondary .body-widget,
#shop-sidebar .body-widget {
    padding: 0px 15px;
}

#product-sidebar aside,
#shop-sidebar aside,
#secondary aside {
    padding: 0px;
    border-radius: 5px;
    border: 1px solid #DEDEDE;
    margin: 0px;
    margin-bottom: 20px;
}

.absolute-footer {
    padding: 5px 0 5px;
}

.box-text h1,
.box-text h2,
.box-text h3,
.box-text h4,
.box-text h5,
.box-text h6,
.box-text a:not(.button) {
    line-height: 1.5em;
    font-size: 15px;
    color: var(--ht-blue);
    text-transform: none;
    font-weight: 700;
}

th,
td {
    font-size: 1em;
    color: #333;
}

.tab-panels .entry-content table td,
.tab-panels .entry-content table th {
    border: none;
    padding: 10px;
}

.h3,
h3 {
    font-size: 1.8em;
}

.block_widget .post-item {
    padding: 0 15px 10px;
}

.block_widget .box-vertical .box-text {
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-left: 10px;
}
#secondary .box-text h5 a,
#secondary .box-text h5 {
    text-transform: inherit;
    font-size: 15px;
    font-weight: 400;
    color: #111;
}

.form-footer input:not([type="submit"]):not([type="checkbox"]) {
    width: 70%;
    float: left;
    margin-right: 10px;
}

/* Ô đồng ý xử lý dữ liệu cá nhân (CF7 [acceptance], F8): ô tích bên trái, chữ xuống dòng thẳng hàng, link có gạch chân. */
.wpcf7-acceptance {
    display: block;
    clear: both;
    margin-bottom: var(--ht-space-2);
    font-size: 14px;
    line-height: 1.5;
}
.wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}
.wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: var(--ht-space-1);
    font-weight: 400;
    cursor: pointer;
}
.wpcf7-acceptance input[type="checkbox"] {
    flex: none;
    margin: 3px 0 0;
}
.wpcf7-acceptance a,
.wvq-consent a {
    text-decoration: underline;
}
.form-footer .wpcf7-acceptance {
    padding-top: var(--ht-space-1);
    font-size: 13px;
}

.form-footer input[type='email'] {
    height: auto;
    padding: 5px 20px;
}

.header-search-form-wrapper input:not([type="submit"]) {
    height: auto;
    padding: 5px 20px;
    font-size: 16px;
    color: #333 !important;
}

.header-search-form-wrapper .button i {
    right: 10px;
}

.header-nav li.account-item a,
.header-main .header-cart-title {
    font-size: 16px;
    font-weight: 400;
}

.header-main .icon-shopping-bag {
    font-size: 24px;
    margin-left: 10px;
}

.footer-widgets .social-icons a {
    margin-right: 7px;
}

.footer-widgets #text-4 img {
    margin-bottom: 5px;
}

.absolute-footer {
    color: #333;
}

.tabbed-content .nav>li>a {
    font-size: 1em;
}

.home-banner {
    border-radius: 5px;
    overflow: hidden;
}

.home-products .product .col-inner {
    border-radius: 5px;
    border: .1rem solid #fff;
    background-color: #fff;
    box-shadow: 0 0px 2px 0 rgba(60, 64, 67, 0.1), 0 0px 6px 0px rgba(60, 64, 67, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease-out forwards;
    overflow: hidden;
}
.home-products .product .col-inner:hover{
	box-shadow: 0 0px 2px 0 var(--ht-blue), 0 0px 6px 0px var(--ht-blue);
}
.home-news .post-item .col-inner,
.category .blog-wrapper .post-item .col-inner,
.home-products-2 .col-inner {
    background: #fff;
    box-shadow: 0 0px 2px 0 rgba(60, 64, 67, 0.1), 0 0px 6px 0px rgba(60, 64, 67, 0.25);
    border-radius: 5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease-out forwards;
    overflow: hidden;
}

.post-sidebar .block_widget .col-inner {
    padding: 0px 15px;
}

.home-news .post-item .col-inner:hover,
.category .blog-wrapper .post-item .col-inner:hover,
.home-products-2 .col-inner:hover {
    box-shadow: 0 0px 2px 0 var(--ht-blue), 0 0px 6px 0px var(--ht-blue);
}
.home-news .post-item .box-text,
.blog-archive .box-text,
.home-products-2 .col-inner .box-text,
.home-products .col-inner .box-text {
    padding: 15px 15px;
}

.modal-overlay .img-inner {
    position: relative;
    border-radius: 5px;
}

.modal-overlay .img-inner:before {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    cursor: pointer;
}

.modal-overlay .img-inner:hover:before {
    -webkit-animation: shine 1.1s;
    animation: shine 1.1s;
}

.breadcrumbs a,
th,
td,
label,
legend,
form.checkout h3 {
    font-weight: normal;
}

.tab-panels h3 {
    padding: 20px 0px;
}

.tab-panels .entry-content table tr {
    background-color: #fff;
}

.tab-panels .entry-content table tr:nth-child(2n) {
    background-color: #e6e6e6;
}

.footer-1 .widget img {
    margin-bottom: 0;
}

.box-text-products .price-wrapper{
	margin-top: 10px;
    font-size: 17px;
    color: var(--ht-red);
    font-weight: 700;
}
.header-main ul.sub-menu{
	min-width:250px;
}
/*************** GIAI ĐOẠN 3: GIAO DIỆN ***************/

/* Viền focus rõ ràng khi dùng bàn phím (không hiện khi bấm chuột). */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.tabs a:focus-visible {
    outline: 2px solid var(--ht-red);
    outline-offset: 2px;
}

/* "Liên hệ" thay giá: đỏ đậm đạt tương phản AA. */
.wc-contact-text,
.box-text-products .price-wrapper .wc-contact-text {
    color: var(--ht-red);
}

/* Ảnh toàn site tỉ lệ 4:3 (chủ dự án chốt 21/10/2026).
   Lưới sản phẩm (trang chủ, cửa hàng, danh mục, sản phẩm liên quan): thumbnail WooCommerce cắt 4:3
   (woocommerce_thumbnail_cropping = custom 4:3, xem tools/giai-doan-3-db.php 6.3); ảnh chưa có bản 4:3 vẫn lấp đầy khung. */
.product-small .box-image {
    aspect-ratio: 4 / 3;
    background: #fff;
}
/* Chỉ khối chứa ảnh cao 100%; các khối .image-tools (đè lên ảnh, absolute) mà cao 100% thì chặn mất cú bấm vào ảnh. */
.product-small .box-image > div:not(.image-tools),
.product-small .box-image > div:not(.image-tools) > a {
    display: block;
    height: 100%;
}
.product-small .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Lưới bài viết (Tin tức, khối tin trang chủ): Flatsome in tỉ lệ 16:9 bằng style inline nên phải dùng !important. */
.box-blog-post .image-cover,
.post-item .image-cover {
    padding-top: 75% !important;
}
/* Ảnh chính trang chi tiết sản phẩm: lấp đầy khung 4:3 (ảnh gốc phần lớn là ảnh vuông, cắt bớt trên / dưới);
   bấm vào ảnh vẫn mở ảnh lớn đầy đủ (lightbox). */
.woocommerce-product-gallery__image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Tên sản phẩm / tiêu đề tin trong lưới: tối đa 2 dòng. */
.box-text .name a,
.box-text .product-title a,
.box-text .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*************** HEADER KIỂU TIMMGARDEN.COM (chủ dự án chốt 22/10/2026) ***************
   3 tầng (cài đặt Flatsome, xem tools/giai-doan-4-db.php mục "Header"):
   - Thanh trên (30px, nền --ht-blue): dòng giới thiệu bên trái, địa chỉ | email | điện thoại bên phải.
   - Thanh giữa (120px, nền trắng): logo, ô tìm kiếm viền màu + nút "Tìm", 2 hộp thông tin (hotline, danh sách báo giá).
   - Thanh dưới (50px, nền --ht-blue): nút "Danh mục sản phẩm" (menu dọc) bên trái, menu chính chữ trắng ở giữa.
   Khi cuộn chỉ giữ thanh dưới. Timmgarden dùng màu đỏ thương hiệu của họ; ở đây dùng xanh thương hiệu Hoàng Tuyến. */

/* Thanh trên: chữ trắng 14,4px, không in hoa. */
.header-top {
    font-size: 0.9em;
}
.header-top .nav > li > a,
.header-top .html {
    text-transform: none;
    letter-spacing: .02em;
}
/* Flatsome để chữ HTML ở thanh trên 0,75em (.nav-small.nav > li.html): selector cùng độ ưu tiên + nạp sau. */
.header-top .nav-small.nav > li.html_topbar_left {
    font-size: 14px;
}

/* Ô tìm kiếm ở thanh giữa: rộng tới 500px, viền 1px màu chính, bo 5px, nút "Tìm" chữ in hoa. */
.header-main .header-search-form {
    flex: 1 1 500px;
    max-width: 500px;
}
.header-main .searchform {
    border: 1px solid var(--ht-blue);
    border-radius: var(--ht-radius);
    /* Không overflow: hidden: danh sách gợi ý (.live-search-results) nằm trong form, sẽ bị cắt mất. Bo góc ở ô nhập + nút. */
}
.header-main .searchform .search-field {
    border-radius: var(--ht-radius) 0 0 var(--ht-radius);
}
.header-main .searchform .search-field {
    height: 38px;
    border: 0;
    box-shadow: none;
    background: #fff;
    font-size: 15px;
    padding: 5px 12px;
}
.header-main .searchform .ux-search-submit {
    min-height: 38px;
    margin: 0;
    padding: 0 16px;
    border-radius: 0 calc(var(--ht-radius) - 1px) calc(var(--ht-radius) - 1px) 0;
    background: var(--ht-blue);
    color: #fff;
}
/* Chữ "Tìm" ở ::before (đặt sau biểu tượng bằng order): Flatsome dùng ::after của nút làm vòng xoay khi đang tải gợi ý
   (.loading::after { animation: spin }), để chữ ở ::after thì chữ xoay vòng. */
.header-main .searchform .ux-search-submit,
.header-bottom .searchform .ux-search-submit {
    display: inline-flex;
    align-items: center;
}
.header-main .searchform .ux-search-submit::before {
    content: "Tìm";
    order: 2;
    margin-left: 6px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

/* 2 hộp thông tin (shortcode [hoangtuyen_header_contact]): icon trong ô vuông bo góc nền nhạt, tiêu đề màu chính. */
.ht-header-contact {
    display: flex;
    align-items: center;
    gap: var(--ht-space-5);
    margin-left: var(--ht-space-4);
}
.ht-header-contact__item {
    display: flex;
    align-items: center;
    gap: var(--ht-space-2);
    color: var(--ht-text);
    line-height: 1.35;
    white-space: nowrap;
}
.ht-header-contact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #e8f1f9;
    color: var(--ht-blue);
}
.ht-header-contact__phone .ht-header-contact__icon {
    color: var(--ht-red);
    background: #fdecec;
}
.ht-header-contact__text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--ht-blue);
}
.ht-header-contact__phone .ht-header-contact__text strong {
    color: var(--ht-red);
}
.ht-header-contact__text small {
    display: block;
    font-size: 14px;
    color: #333;
}
.ht-header-contact__item:hover strong {
    text-decoration: underline;
}
/* Tablet ngang (850–1199px): bỏ dòng giới thiệu ở thanh trên, hộp hotline (số điện thoại vẫn ở thanh trên) và dòng phụ,
   để thanh trên, ô tìm và hộp báo giá còn vừa 1 dòng. */
@media (max-width: 1199px) {
    .header-top .html_topbar_left,
    .ht-header-contact__phone {
        display: none;
    }
    .ht-header-contact {
        margin-left: var(--ht-space-3);
    }
    .ht-header-contact__text small {
        display: none;
    }
}

/* Thanh dưới: menu chính chữ trắng 17,6px đậm, không in hoa (giãn đều: xem "Bố cục thanh dưới"). */
.header-bottom-nav > li > a.nav-top-link {
    font-size: 1.1em;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .02em;
    color: #fff;
}
.header-bottom-nav > li > a.nav-top-link:hover,
.header-bottom-nav > li.active > a.nav-top-link {
    color: #fff;
    opacity: .85;
}


/* Bố cục thanh dưới (sửa 23/10/2026): cột phải không có phần tử nhưng Flatsome vẫn cho giãn (flex-grow), chiếm ~200px nên
   menu dồn sang trái và mục "Trang chủ" dính sát nút "Danh mục sản phẩm". Cột giữa chiếm hết chỗ còn lại, các mục giãn
   đều từ sau nút danh mục tới mép phải; nút danh mục cao bằng thanh (50px). */
@media (min-width: 850px) {
    #wide-nav > .flex-row > .flex-left,
    #wide-nav > .flex-row > .flex-right {
        flex: 0 0 auto;
    }
    #wide-nav > .flex-row > .flex-right:not(:has(li)) {
        display: none;
    }
    #wide-nav > .flex-row > .flex-center {
        flex: 1 1 auto;
    }
    #wide-nav .flex-center .header-bottom-nav {
        justify-content: space-between;
        padding-left: 32px;
    }
    #wide-nav .flex-center .header-bottom-nav > li {
        margin: 0;
    }
    #wide-nav .header-vertical-menu__opener {
        height: 50px; /* bằng header_bottom_height (theme mod) */
    }
}

/* Chỉ người đăng nhập có quyền sửa trang mới thấy: hộp "Edit Block" của Flatsome nằm phía trên block (cách -15px), với
   block slider trang chủ thì đè lên thanh menu. Dời hộp vào trong mép trên của block. */
.logged-in .tooltipster-base:has(.edit-block-button) {
    margin-top: 84px;
}

/* Nút "Danh mục sản phẩm" (menu dọc của Flatsome) ở thanh dưới: nền đậm hơn một chút, chữ trắng không in hoa. */
.header-vertical-menu__opener {
    background: rgba(0, 0, 0, .12);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}
.header-vertical-menu__fly-out .nav > li > a {
    text-transform: none;
    font-weight: 400;
}

/* Mobile: ô tìm kiếm dưới header (phần tử "dưới" của header mobile), nền trắng thay cho màu thanh dưới. */
@media (max-width: 849px) {
    /* Flatsome in màu nền thanh dưới trong <style> ở <head> (sau style.css): tăng độ ưu tiên selector để thắng. */
    .header-wrapper .header-bottom {
        background-color: #fff;
    }
    .header-bottom .searchform {
        width: 100%;
        margin: 6px 0 10px;
        border: 1px solid var(--ht-blue);
        border-radius: var(--ht-radius); /* không overflow: hidden (cắt danh sách gợi ý) */
    }
    .header-bottom .searchform .search-field {
        border-radius: var(--ht-radius) 0 0 var(--ht-radius);
    }
    .header-bottom .searchform .search-field {
        height: 40px;
        border: 0;
        box-shadow: none;
        background: #fff;
    }
    .header-bottom .searchform .ux-search-submit {
        min-height: 40px;
        margin: 0;
        padding: 0 16px;
        border-radius: 0;
        background: var(--ht-blue);
        color: #fff;
    }
    .header-bottom .searchform .ux-search-submit::before { /* ::after là vòng xoay của Flatsome, xem thanh giữa */
        content: "Tìm";
        order: 2;
        margin-left: 6px;
        font-weight: 700;
        text-transform: uppercase;
    }
}

/* Header mobile bên phải: biểu tượng gọi + nút "Báo giá" (shortcode [hoangtuyen_header_mobile]). */
.ht-header-mobile {
    display: flex;
    align-items: center;
    gap: var(--ht-space-1);
}
.ht-header-mobile__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--ht-red);
}
.header-main .ht-header-mobile__quote {
    margin: 0;
    padding: 0 10px;
    min-height: 34px;
    line-height: 34px;
    font-size: 13px;
    border-radius: var(--ht-radius);
    white-space: nowrap;
}

/* Thư viện (F9): video "bấm mới tải" (shortcode [hoangtuyen_video]). */
.ht-video {
    max-width: 720px;
    margin: 0 auto var(--ht-space-4);
}
.ht-video__play,
.ht-video__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 0;
    border-radius: var(--ht-radius);
    background: #000;
}
.ht-video__play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ht-video__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    margin: -24px 0 0 -34px;
    border-radius: 12px;
    background: var(--ht-red);
    transition: transform .15s;
}
.ht-video__icon::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 27px;
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent #fff;
}
.ht-video__play:hover .ht-video__icon,
.ht-video__play:focus-visible .ht-video__icon {
    transform: scale(1.1);
}
.ht-video figcaption {
    margin-top: var(--ht-space-1);
    text-align: center;
    font-weight: 600;
}

/* Video trong gallery sản phẩm (RV6, inc/product-video.php): slide cùng khung 4:3 với ảnh, ô ▶ ở cột ảnh nhỏ. */
.ht-gallery-video {
    width: 100%;
}
.ht-video--gallery {
    max-width: none;
    margin: 0;
}
.ht-video--gallery .ht-video__play,
.ht-video--gallery .ht-video__frame {
    aspect-ratio: 4 / 3;
}
.ht-video__play img {
    background: #000;
}
.ht-video__play--tiktok img,
.ht-video__play--drive img,
.ht-video__play--file img {
    object-fit: contain;
    opacity: .85;
}
/* TikTok là video dọc: khung 9:16, cao tối đa gần bằng màn hình. */
.ht-video__frame--tiktok,
.ht-video--gallery .ht-video__frame--tiktok {
    width: auto;
    height: min(740px, 85vh);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
}
video.ht-video__frame {
    object-fit: contain;
}
.ht-video-active .image-tools {
    display: none;
}
.ht-gallery-video-thumb a {
    position: relative;
    display: block;
}
.ht-gallery-video-thumb img {
    background: #000;
    object-fit: cover;
}
.ht-gallery-video-thumb__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: var(--ht-red);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}
.ht-gallery-video-thumb__icon::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 13px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #fff;
}

/* Trang sản phẩm: khối hành động + thông tin. */
.ht-product-cta {
    margin: var(--ht-space-3) 0;
    padding: var(--ht-space-3);
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    background: #f7f9fc;
}
.ht-product-cta__note {
    margin-bottom: var(--ht-space-2);
    color: #444;
}
.ht-product-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-space-1);
}
.ht-product-cta__buttons .button {
    margin: 0;
    border-radius: var(--ht-radius);
}
.ht-product-cta .ht-cta-call {
    background: var(--ht-red);
    color: #fff;
}
.ht-product-cta .ht-cta-zalo {
    background: #0068ff;
    color: #fff;
}
.ht-product-trust {
    list-style: none;
    margin: 0 0 var(--ht-space-3);
    padding: 0;
}
.ht-product-trust li {
    display: flex;
    align-items: center;
    gap: var(--ht-space-1);
    margin: 0 0 6px;
}
.ht-product-trust i {
    color: var(--ht-blue);
}

/* Danh mục: chip danh mục con. */
.ht-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-space-1);
    margin-bottom: var(--ht-space-4);
}
.ht-cat-chip {
    padding: 6px 14px;
    border: 1px solid var(--ht-border);
    border-radius: 999px;
    color: var(--ht-text);
    background: #fff;
    font-size: 14px;
}
.ht-cat-chip:hover,
.ht-cat-chip.is-active {
    border-color: var(--ht-blue);
    background: var(--ht-blue);
    color: #fff;
}
.ht-cat-chip__count {
    opacity: 0.7;
    font-size: 12px;
}
/* Mobile: chip thành một hàng cuộn ngang, không đẩy lưới sản phẩm xuống (khối cuộn, trang không cuộn ngang). */
@media (max-width: 549px) {
    .ht-cat-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -15px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .ht-cat-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* H1 được nâng từ tiêu đề cũ (h2–h6): giữ cỡ chữ như trước. */
h1.ht-h1--h2 { font-size: 1.6em; }
h1.ht-h1--h3 { font-size: 1.25em; }
h1.ht-h1--h4 { font-size: 1.125em; }
h1.ht-h1--h5 { font-size: 1em; }
h1.ht-h1--h6 { font-size: 0.85em; }

/* Trang chủ: nhóm sản phẩm, khách hàng tiêu biểu. */
.ht-home-cats .box-text h5,
.ht-home-cats .box-text .header-title {
    color: var(--ht-blue);
    text-transform: none;
    font-size: 16px;
}
.ht-home-customers__title {
    font-size: 18px;
    color: var(--ht-blue);
}
.ht-home-customers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ht-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.col-inner .ht-home-customers li {
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--ht-border);
    border-radius: var(--ht-radius);
    background: #fff;
    color: #333;
    font-weight: 700;
}

/* Tiêu đề banner / slider: Flatsome đặt .banner h1–h3 { font-weight: 400 }. Trước đây chữ vẫn đậm nhờ file font
   SVN-GilroyBold; từ khi đổi sang Be Vietnam Pro phải đặt độ đậm. */
.banner h1,
.banner h2,
.banner h3 {
    font-weight: 700;
}

/* Slider: 2 nút cạnh nhau; lớp phủ tối hơn trên mobile để chữ trắng dễ đọc. */
.home-slider .text-box .button,
.slider .text-box .button {
    margin-right: var(--ht-space-1);
}
@media (max-width: 549px) {
    .slider .banner .overlay {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
    .slider .text-box p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Mobile: breadcrumb gọn (ẩn "Sản phẩm"), bỏ nút sản phẩm trước / sau. */
@media (max-width: 549px) {
    .single-product .breadcrumbs a[href$="/san-pham"],
    .single-product .breadcrumbs a[href$="/san-pham"] + .divider {
        display: none;
    }
    .single-product .product-info .next-prev-thumbs,
    .single-product .product-info .product-next-prev-nav {
        display: none;
    }
}

/* ==========================================================================
   TRANG CHỦ: KHỐI "GIỚI THIỆU" (23/10/2026)
   Ảnh xưởng có mảng màu lệch phía sau + thẻ "… năm kinh nghiệm"; bên phải: dòng nhỏ, tiêu đề, đoạn ngắn, 4 điểm mạnh
   (dấu ✓), 3 số liệu, 2 nút. Nội dung ở trang 71 (tools/giai-doan-4-db.php).
   ========================================================================== */
.ht-about {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
.ht-about__media {
    position: relative;
    margin: 0 28px 28px 0;
}
.ht-about__media::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 28px;
    right: -28px;
    bottom: -28px;
    border-radius: 10px;
    background: #e6f0f9;
}
.ht-about__media .ht-about__image {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 40, 80, .15);
}
.ht-about__badge {
    position: absolute;
    left: -12px;
    bottom: 32px;
    display: flex;
    flex-direction: column;
    padding: 14px 22px;
    border-radius: 10px;
    background: var(--ht-blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 60, 120, .3);
    line-height: 1.15;
}
.ht-about__badge strong {
    font-size: 40px;
    font-weight: 700;
}
.ht-about__badge span {
    font-size: 15px;
    opacity: .9;
}
.ht-about__content {
    padding-left: 40px !important;
}
.ht-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--ht-red);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ht-eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    background: currentColor;
}
.ht-about__title {
    margin-bottom: 14px;
    color: var(--ht-blue);
    font-size: 32px;
    line-height: 1.2;
}
.ht-about__lead {
    margin-bottom: 18px;
    color: #333;
    font-size: 17px;
    line-height: 1.6;
}
.ht-about .ht-about__points {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.ht-about .ht-about__points li {
    position: relative;
    margin: 0 0 10px; /* Flatsome thêm lề trái cho ul li */
    padding-left: 32px;
    color: var(--ht-text);
    line-height: 1.5;
}
.ht-about__points li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ht-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.6 5 12.1l1.4-1.4 3.1 3.1 8.1-8.1L19 7.1z'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.ht-about__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 26px;
    padding: 16px 0;
    border-top: 1px solid var(--ht-border);
    border-bottom: 1px solid var(--ht-border);
}
.ht-about__stat {
    padding: 0 12px;
    border-left: 1px solid var(--ht-border);
}
.ht-about__stat:first-child {
    padding-left: 0;
    border-left: 0;
}
.ht-about__stat strong {
    display: block;
    color: var(--ht-blue);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}
.ht-about__stat span {
    display: block;
    margin-top: 4px;
    color: #555;
    font-size: 14px;
    line-height: 1.35;
}
.ht-about__btn {
    margin: 0 10px 10px 0;
}
@media (max-width: 849px) {
    .ht-about {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .ht-about__media {
        margin: 0 16px 36px 0;
    }
    .ht-about__media::before {
        top: 16px;
        left: 16px;
        right: -16px;
        bottom: -16px;
    }
    .ht-about__badge {
        left: 12px;
        bottom: 12px;
        padding: 10px 16px;
    }
    .ht-about__badge strong {
        font-size: 30px;
    }
    .ht-about__content {
        padding-left: 15px !important;
    }
    .ht-about__title {
        font-size: 26px;
    }
    .ht-about__lead {
        font-size: 16px;
    }
    .ht-about__stat strong {
        font-size: 24px;
    }
}

/* ==========================================================================
   TRANG CHỦ: PHẦN ĐẦU KHỐI (dùng chung) + KHỐI "SẢN PHẨM" (23/10/2026)
   Phần đầu: dòng nhỏ (.ht-eyebrow, khối Giới thiệu) + tiêu đề + mô tả bên trái, link "Xem tất cả" bên phải.
   Lưới: 15 sản phẩm mới nhất, 5 cột (chủ dự án chọn), thẻ viền mảnh bo 10px, không in "Liên hệ"; dải báo
   giá cuối khối.
   ========================================================================== */
.ht-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 28px;
}
.ht-section-head__text {
    max-width: 760px;
}
.ht-section-title {
    margin-bottom: 8px;
    color: var(--ht-blue);
    font-size: 32px;
    line-height: 1.2;
}
.ht-section-desc {
    margin: 0;
    color: #444;
    font-size: 17px;
    line-height: 1.55;
}
.ht-section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding-bottom: 4px;
    border-bottom: 2px solid currentColor;
    color: var(--ht-blue);
    font-weight: 700;
    white-space: nowrap;
}
.ht-section-more::after {
    content: "→";
    transition: transform .2s ease;
}
.ht-section-more:hover {
    color: var(--ht-red);
}
.ht-section-more:hover::after {
    transform: translateX(4px);
}

.ht-products {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    background: #f5f8fb !important;
}
/* Thẻ sản phẩm (ghi đè kiểu thẻ chung .home-products ... .col-inner) */
.ht-products .ht-product-grid .product .col-inner {
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ht-products .ht-product-grid .product .col-inner:hover {
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(0, 50, 100, .14);
    transform: translateY(-4px);
}
.ht-product-grid .product-small .box-image img {
    transition: transform .5s ease;
}
.ht-product-grid .product-small:hover .box-image img {
    transform: scale(1.05);
}
.ht-products .ht-product-grid .col-inner .box-text {
    padding: 14px 16px 16px;
}
.ht-product-grid .box-text .name a {
    color: var(--ht-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.ht-product-grid .product-small:hover .box-text .name a {
    color: var(--ht-blue);
}
.ht-product-grid .price-wrapper {
    margin-top: 0;
}
.ht-product-grid .price-wrapper > .price {
    margin-bottom: 0; /* Giá hoặc "Liên hệ" (giá trống / 0, review lần 1 của HTX), nút "+ Báo giá" ngay dưới. */
}
.ht-product-grid .wvq-add-to-quote--loop {
    margin-top: 10px;
}
.ht-products__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 12px;
    padding: 20px 24px;
    border-radius: 10px;
    background: var(--ht-blue);
    color: #fff;
}
.ht-products__cta p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}
.ht-products__cta strong {
    display: block;
    font-size: 19px;
}
.ht-products__cta .button {
    flex: none;
    margin: 0;
    border-color: #fff;
    background: #fff;
    color: var(--ht-blue);
}
.ht-products__cta .button:hover {
    background: var(--ht-red);
    border-color: var(--ht-red);
    color: #fff;
    box-shadow: none;
}
@media (max-width: 849px) {
    .ht-products {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .ht-section-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .ht-section-title {
        font-size: 26px;
    }
    .ht-section-desc {
        font-size: 16px;
    }
    .ht-product-grid .box-text .name a {
        font-size: 15px;
    }
    .ht-products .ht-product-grid .col-inner .box-text {
        padding: 10px 10px 12px;
    }
    .ht-products__cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }
}

/* ==========================================================================
   TRANG CHỦ: "GIẢI PHÁP CHO NHÀ XƯỞNG" (4 thẻ danh mục ảnh phủ), DẢI KHÁCH HÀNG, "TIN TỨC" (23/10/2026)
   ========================================================================== */
.ht-groups {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
}
/* Thẻ danh mục: ảnh lấp đầy, chữ trắng trên lớp tối dần ở đáy, mũi tên tròn góc phải */
.ht-cat-tiles .box-category {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.ht-cat-tiles .box-category .box-image img {
    transition: transform .5s ease;
}
.ht-cat-tiles .box-category:hover .box-image img {
    transform: scale(1.06);
}
.ht-cat-tiles .box-category .box-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 72px 64px 18px 18px;
    background: linear-gradient(180deg, rgba(0, 25, 50, 0) 0%, rgba(0, 25, 50, .88) 100%);
    text-align: left;
}
.ht-cat-tiles .box-category .box-text-inner::after {
    content: "→";
    position: absolute;
    right: 18px;
    bottom: 20px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--ht-blue);
    font-weight: 700;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ht-cat-tiles .box-category:hover .box-text-inner::after {
    background: var(--ht-red);
    color: #fff;
    transform: translateX(3px);
}
.ht-cat-tiles .box-text h5,
.ht-cat-tiles .box-text .header-title {
    margin-bottom: 2px;
    color: #fff;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: 0; /* Flatsome giãn chữ cho h5.uppercase */
    text-transform: none;
}
.ht-cat-tiles .box-text .count {
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    letter-spacing: .04em;
    opacity: 1;
}

/* Dải khách hàng tiêu biểu: nền màu chính, tiêu đề trái, 8 ô tên doanh nghiệp phải */
.ht-customers {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    background: var(--ht-blue) !important;
}
.ht-customers__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 24px 48px;
}
.ht-customers .ht-eyebrow {
    color: rgba(255, 255, 255, .85);
}
.ht-customers__title {
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.3;
}
.ht-customers .ht-home-customers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.ht-customers .col-inner .ht-home-customers li {
    display: grid;
    place-items: center;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 15px;
    letter-spacing: .03em;
    text-align: center;
    transition: background .2s ease;
}
.ht-customers .col-inner .ht-home-customers li:hover {
    background: rgba(255, 255, 255, .18);
}

/* Tin tức: thẻ viền mảnh như thẻ sản phẩm, ngày đăng lên trên tiêu đề, tóm tắt 2 dòng, "Xem chi tiết →" */
.ht-news {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
.ht-news .post-item .col-inner {
    height: 100%;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ht-news .post-item .col-inner:hover {
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(0, 50, 100, .14);
    transform: translateY(-4px);
}
.ht-news .post-item .box-blog-post {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ht-news .post-item .box-blog-post > .box-image {
    flex: none;
    width: 100%; /* trong flex dọc, khung ảnh (cao theo padding-top %) không tự giãn ngang */
}
/* Thân thẻ giãn hết chiều cao còn lại để "Xem chi tiết" luôn nằm ở đáy, thẳng hàng giữa các thẻ */
.ht-news .post-item .box-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px 16px 16px;
}
.ht-news-grid .blog-post-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}
.ht-news-grid .post-meta {
    order: -1;
    margin-bottom: 6px;
    color: var(--ht-red);
    font-size: 13px;
    font-weight: 600;
    opacity: 1;
}
.ht-news-grid .post-title {
    margin-bottom: 8px;
    font-size: 16px; /* 4 thẻ / dòng */
    line-height: 1.35;
}
.ht-news-grid .post-title a {
    color: var(--ht-text);
}
.ht-news-grid .box-blog-post:hover .post-title a {
    color: var(--ht-blue);
}
.ht-news-grid .is-divider {
    display: none;
}
.ht-news-grid .from_the_blog_excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
    color: #555;
}
.ht-news-grid .button.is-outline {
    min-height: 0;
    margin: auto 0 0;
    letter-spacing: 0;
    text-transform: none;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
    background: none;
    color: var(--ht-blue);
    font-size: 14px;
    line-height: 1.6;
}
.ht-news-grid .button.is-outline::after {
    content: " →";
}
.ht-news-grid .button.is-outline:hover {
    background: none;
    color: var(--ht-red);
    box-shadow: none;
}
@media (max-width: 849px) {
    .ht-groups,
    .ht-news {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .ht-cat-tiles .box-category .box-text {
        padding: 48px 48px 12px 12px;
    }
    .ht-cat-tiles .box-text h5,
    .ht-cat-tiles .box-text .header-title {
        font-size: 15px;
    }
    .ht-cat-tiles .box-text .count {
        font-size: 12px;
    }
    .ht-cat-tiles .box-category .box-text-inner::after {
        right: 10px;
        bottom: 12px;
        width: 30px;
        height: 30px;
    }
    .ht-customers__inner {
        grid-template-columns: 1fr;
    }
    .ht-customers__title {
        font-size: 20px;
    }
    .ht-customers .ht-home-customers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   TRANG CHỦ: VIDEO & THƯ VIỆN, QUY TRÌNH LÀM VIỆC, KHÁCH HÀNG NÓI GÌ, ĐẶT LỊCH KHẢO SÁT (23/10/2026, theo trang chủ antoan)
   ========================================================================== */
.ht-media,
.ht-process,
.ht-booking-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
.ht-media {
    background: #f5f8fb !important;
}

/* Video + thư viện ảnh: video bên trái (khung 16:9 bo góc), lưới ảnh bên phải */
.ht-media__video .ht-video {
    margin: 0;
}
.ht-media__video .ht-video__play {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 16 / 9;
    background: #0b2238;
}
.ht-media__video .ht-video__play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.ht-media__video .ht-video__play:hover img {
    transform: scale(1.04);
}
.ht-media__video figcaption {
    margin-top: 12px;
    color: var(--ht-text);
    font-size: 18px;
    font-weight: 700;
}
/* Chú thích ảnh chỉ hiện trong lightbox (ô nhỏ không đủ chỗ) */
.ht-gallery .box-text {
    display: none;
}
.ht-gallery .gallery-col .col-inner,
.ht-gallery .gallery-box,
.ht-gallery .box-image {
    overflow: hidden;
    border-radius: 8px;
}

/* Quy trình: tab dọc có số bước, nội dung bước, cột phải ảnh + hộp tư vấn */
.ht-process-tabs > .nav {
    min-width: 260px;
}
.ht-process-tabs > .nav > li {
    margin: 0 0 10px;
    border: 0;
}
.ht-process-tabs > .nav > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    transition: border-color .2s, background .2s;
}
.ht-process-tabs > .nav > li > a::before {
    content: "";
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: 1px solid #d5dde5;
    border-radius: 50%;
    background: #fff;
    color: #667;
    font-size: 14px;
    font-weight: 700;
}
/* Flatsome ẩn ::before của tab không hover khi rê chuột trên thanh tab: giữ số luôn hiện */
.ht-process-tabs > .nav:hover > li > a::before {
    opacity: 1;
}
.ht-process-tabs > .nav > li:nth-child(1) > a::before { content: "01"; }
.ht-process-tabs > .nav > li:nth-child(2) > a::before { content: "02"; }
.ht-process-tabs > .nav > li:nth-child(3) > a::before { content: "03"; }
.ht-process-tabs > .nav > li:nth-child(4) > a::before { content: "04"; }
.ht-process-tabs > .nav > li > a:hover {
    border-color: var(--ht-blue);
}
.ht-process-tabs > .nav > li.active > a {
    border-color: var(--ht-blue);
    background: #e9f2fa;
    color: var(--ht-blue);
}
.ht-process-tabs > .nav > li.active > a::before {
    border-color: var(--ht-blue);
    background: var(--ht-blue);
    color: #fff;
}
.ht-process-tabs .tab-panels {
    padding: 4px 0 0 16px;
    border: 0;
}
.ht-step__kicker {
    margin: 0 0 2px;
    color: var(--ht-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ht-step__title {
    margin: 0 0 16px;
    color: var(--ht-blue);
    font-size: 24px;
    line-height: 1.3;
}
.ht-step__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ht-step;
}
.col-inner .ht-step__list > li {
    position: relative;
    margin: 0 0 16px;
    padding-left: 40px;
    line-height: 1.6;
    counter-increment: ht-step;
}
.ht-step__list > li::before {
    content: counter(ht-step);
    position: absolute;
    top: 1px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--ht-blue);
    border-radius: 50%;
    color: var(--ht-blue);
    font-size: 13px;
    font-weight: 700;
}
.ht-step__list > li > strong {
    display: block;
    color: var(--ht-text);
    font-size: 17px;
}
.ht-step__list > li > span {
    display: block;
    color: #555;
}
.ht-process__image {
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 10px;
}
.ht-process__cta {
    padding: 22px;
    border-radius: 10px;
    background: #0b2f55;
    color: rgba(255, 255, 255, .85);
}
.ht-process__cta-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
}
.ht-process__cta .button {
    margin: 8px 0 0;
    border-color: var(--ht-red);
    background: var(--ht-red);
    color: #fff;
}

/* Khách hàng nói gì: chỉ hiện khi có nhận xét thật ([hoangtuyen_testimonials] in ra .ht-testimonials) */
.ht-testimonials-section:not(:has(.ht-testimonials)) {
    display: none;
}
.ht-testimonials-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    background: #f5f8fb !important;
}
.ht-testimonials {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
}
.ht-testimonials__intro p:last-child {
    color: #444;
    font-size: 17px;
    line-height: 1.6;
}
.ht-testimonials__list {
    display: grid;
    gap: 16px;
}
.ht-quote {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 20px 22px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
}
.ht-quote__avatar {
    display: grid;
    flex: 0 0 56px;
    place-items: center;
    height: 56px;
    border-radius: 50%;
    background: var(--ht-blue);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}
.ht-quote blockquote {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: #333;
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
}
.ht-quote figcaption strong {
    display: block;
    color: var(--ht-text);
}
.ht-quote figcaption span {
    color: #666;
    font-size: 14px;
}

/* Đặt lịch khảo sát: 4 thẻ giá trị bên trái, form trong hộp màu chính bên phải */
.ht-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}
.ht-value {
    padding: 18px 18px 18px 74px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff 18px 18px / 40px no-repeat;
}
.ht-value h3,
.ht-value h4 {
    margin: 0 0 4px;
    color: var(--ht-blue);
    font-size: 17px;
}
.ht-value p {
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}
/* Biểu tượng (SVG nhúng): ghim vị trí, tin nhắn, tài liệu, nhà xưởng; vòng tròn nền xanh nhạt */
.ht-value--survey { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e6f0f9'/%3E%3Cpath fill='%230060aa' d='M20 9a7 7 0 0 0-7 7c0 5.2 7 14 7 14s7-8.8 7-14a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.ht-value--advice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e6f0f9'/%3E%3Cpath fill='%230060aa' d='M11 11h18a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H17l-5 4v-4h-1a2 2 0 0 1-2-2V13a2 2 0 0 1 2-2zm4 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E"); }
.ht-value--quote { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e6f0f9'/%3E%3Cpath fill='%230060aa' d='M14 9h9l6 6v14a2 2 0 0 1-2 2H14a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2zm8 1.5V16h5.5zM15 20v2h10v-2zm0 4v2h10v-2z'/%3E%3C/svg%3E"); }
.ht-value--factory { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e6f0f9'/%3E%3Cpath fill='%230060aa' d='M10 29V18l6 4v-4l6 4v-4l6 4V11h3v18zm4-3h3v-3h-3zm6 0h3v-3h-3zm6 0h2v-3h-2z'/%3E%3C/svg%3E"); }
.ht-booking > .col-inner {
    position: relative;
    padding: 28px;
    border-radius: 12px;
    background: var(--ht-blue);
    color: #fff;
}
.ht-anchor {
    position: absolute;
    top: -90px; /* chừa chỗ cho thanh menu dính khi nhảy tới #dat-lich-khao-sat */
}
.ht-booking__top {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ht-booking__title {
    margin: 2px 0 6px;
    color: #fff;
    font-size: 28px;
}
.ht-booking__desc {
    color: rgba(255, 255, 255, .9);
}
.ht-booking .wvq-booking label,
.ht-booking .wvq-booking legend,
.ht-booking .wvq-booking__hint,
.ht-booking .wvq-booking .wvq-consent,
.ht-booking .wvq-booking .wvq-consent a,
.ht-booking .wvq-booking__message {
    color: #fff;
}
.ht-booking .wvq-booking input:not([type="checkbox"]):not([type="radio"]),
.ht-booking .wvq-booking select,
.ht-booking .wvq-booking textarea {
    border-color: #fff;
    background: #fff;
    color: var(--ht-text);
}
.ht-booking .wvq-booking__field--address {
    grid-column: 1 / -1; /* ô địa chỉ cả hàng, không bỏ trống nửa phải */
}
.ht-booking .wvq-booking button.wvq-booking__submit {
    width: 100%;
    margin: 4px 0 0;
    border-color: #0b2f55;
    background: #0b2f55;
    color: #fff;
}
.ht-booking .wvq-booking button.wvq-booking__submit:hover {
    border-color: var(--ht-red);
    background: var(--ht-red);
}
@media (max-width: 849px) {
    .ht-media,
    .ht-process,
    .ht-booking-section,
    .ht-testimonials-section {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .ht-process-tabs > .nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        min-width: 0;
        margin-bottom: 16px;
    }
    .ht-process-tabs > .nav > li {
        display: flex;
        margin: 0;
        padding: 0;
    }
    .ht-process-tabs > .nav > li > a {
        gap: 8px;
        height: 100%;
        min-height: 60px;
        margin: 0;
        padding: 8px 10px;
        font-size: 14px;
    }
    .ht-process-tabs > .nav > li > a::before {
        flex-basis: 30px;
        height: 30px;
        font-size: 12px;
    }
    .ht-process-tabs .tab-panels {
        padding: 0;
    }
    .ht-step__title {
        font-size: 21px;
    }
    .ht-testimonials {
        grid-template-columns: 1fr;
    }
    .ht-values {
        grid-template-columns: 1fr;
    }
    .ht-booking > .col-inner {
        padding: 20px;
    }
}

/* ==========================================================================
   QUY TRÌNH + ĐẶT LỊCH: CÁC Ô CAO BẰNG NHAU (≥850px, giống trang chủ antoan; 23/10/2026)
   Quy trình: chiều cao hàng = bước dài nhất; 4 tab giãn đều; các bước chồng trong cùng một khung có viền (đổi tab không
   làm trang nhảy); cột phải ảnh lấp chỗ trống, hộp tư vấn sát đáy. Đặt lịch: cột thẻ giá trị cao bằng hộp form,
   4 thẻ giãn đều.
   ========================================================================== */
@media (min-width: 850px) {
    .ht-process__row > .col > .col-inner {
        height: 100%;
    }
    .ht-process-tabs {
        flex-wrap: nowrap;
        align-items: stretch;
        height: 100%;
    }
    .ht-process-tabs > .nav {
        display: flex;
        flex: 0 0 260px;
        flex-direction: column;
        margin: 0 20px 0 0;
        padding: 0;
    }
    .ht-process-tabs > .nav > li {
        display: flex;
        flex: 1 1 0;
        margin: 0 0 12px;
    }
    .ht-process-tabs > .nav > li:last-child {
        margin-bottom: 0;
    }
    .ht-process-tabs > .nav > li > a {
        height: 100%;
    }
    .ht-process-tabs .tab-panels {
        display: grid;
        flex: 1 1 0;
        min-width: 0;
        padding: 24px 26px 8px;
        border: 1px solid #e3e9ef;
        border-radius: 10px;
        background: #fff;
    }
    .ht-process-tabs .tab-panels > .panel {
        grid-area: 1 / 1;
        display: block !important;
        visibility: hidden;
        opacity: 0;
        height: auto !important;
        padding: 0;
        transition: opacity .2s;
    }
    .ht-process-tabs .tab-panels > .panel.active {
        visibility: visible;
        opacity: 1;
    }
    .ht-process__aside > .col-inner {
        display: flex;
        flex-direction: column;
    }
    .ht-process__aside .ht-process__image {
        position: relative;
        flex: 1 1 0;
        min-height: 200px;
        margin-bottom: 12px;
    }
    .ht-process__aside .ht-process__image .img-inner {
        position: absolute;
        inset: 0;
        padding-top: 0 !important;
        overflow: hidden;
        border-radius: 10px;
    }
    .ht-process__aside .ht-process__image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ht-process__aside .ht-process__cta {
        flex: 0 0 auto;
    }

    .ht-booking__row > .col > .col-inner {
        height: 100%;
    }
    .ht-booking-values > .col-inner {
        display: flex;
        flex-direction: column;
    }
    .ht-booking-values .ht-values {
        flex: 1 1 auto;
        grid-auto-rows: 1fr;
    }
    .ht-value {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-position: 18px center;
    }
}
@media (min-width: 850px) and (max-width: 1199px) {
    .ht-process-tabs > .nav {
        flex-basis: 220px;
        margin-right: 16px;
    }
    .ht-process-tabs .tab-panels {
        padding: 18px 20px 4px;
    }
}

/* Dải khách hàng: logo (23/10/2026). Mỗi logo là [ux_image] trong ô trắng bo góc; đang là LOGO DEMO, HTX thay ảnh thật
   trong UX Builder. Ảnh logo thật nền trong suốt hoặc trắng đều hợp, giữ tỉ lệ (contain). */
/* Bỏ khoảng đệm dưới của các cột Flatsome để trên / dưới dải cách đều */
.ht-customers .section-content > .row > .col,
.ht-customers__row > .col {
    padding-bottom: 0;
}
.ht-customers .ht-customers__row {
    margin-bottom: 0;
}
.ht-logos {
    margin-bottom: -12px !important;
}
.ht-logos > .col {
    padding-bottom: 12px !important;
}
.ht-logo {
    margin: 0;
}
.ht-logo .img-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ht-logo:hover .img-inner {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    transform: translateY(-2px);
}
.ht-logo .img-inner img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 68px;
    object-fit: contain;
}
@media (max-width: 849px) {
    .ht-logo .img-inner {
        height: 76px;
    }
    .ht-customers__head {
        margin-bottom: 16px;
    }
}

/* ==========================================================================
   TRANG GIỚI THIỆU (23/10/2026): banner đầu trang, câu chuyện (dùng lại .ht-about), dải số liệu, lĩnh vực (dùng lại
   .ht-cat-tiles), giá trị (dùng lại .ht-value), khách hàng tiêu biểu, hình ảnh, liên hệ. Template "Page - Full Width".
   ========================================================================== */
.ht-page-hero .ht-eyebrow {
    color: rgba(255, 255, 255, .85);
}
.ht-page-hero__title {
    margin: 4px 0 14px;
    color: #fff;
    font-size: 44px;
    line-height: 1.15;
}
.ht-page-hero__lead {
    max-width: 640px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, .92);
    font-size: 19px;
    line-height: 1.55;
}
.ht-page-hero .button {
    margin: 0 10px 10px 0;
}
.ht-story .ht-about__content p:not(.ht-eyebrow):not(.ht-about__lead) {
    color: #444;
    font-size: 16px;
    line-height: 1.65;
}

/* Dải số liệu nền màu chính */
.ht-stats-band {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    background: var(--ht-blue) !important;
}
.ht-stats-band .col {
    padding-bottom: 0;
}
.ht-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    text-align: center;
}
.ht-stats__item {
    padding: 6px 12px;
    border-left: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
}
.ht-stats__item:first-child {
    border-left: 0;
}
.ht-stats__item strong {
    display: block;
    font-size: 40px;
    line-height: 1.1;
}
.ht-stats__item span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
}

/* Giá trị: 4 thẻ một hàng (dùng lại .ht-value); biểu tượng huy chương cho "Được ghi nhận" */
.ht-why,
.ht-clients-section,
.ht-about-gallery,
.ht-contact-band {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
.ht-why,
.ht-about-gallery {
    background: #f5f8fb !important;
}
.ht-values--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    margin-top: 0;
}
.ht-values--4 .ht-value {
    padding: 72px 20px 20px;
    background-position: 20px 20px;
}
.ht-value--award { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e6f0f9'/%3E%3Cpath fill='%230060aa' d='M20 9a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm0 3.5-1.2 2.4-2.6.4 1.9 1.8-.5 2.6 2.4-1.2 2.4 1.2-.5-2.6 1.9-1.8-2.6-.4zM15 22.5l-2 8.5 4-2 2 3.5 1-6.5a9 9 0 0 1-5-3.5zm10 0a9 9 0 0 1-5 3.5l1 6.5 2-3.5 4 2z'/%3E%3C/svg%3E"); }

/* Khách hàng tiêu biểu: thẻ tên + ngành / KCN */
.ht-clients {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.col-inner .ht-clients li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 92px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #e3e9ef;
    border-left: 4px solid var(--ht-blue);
    border-radius: 8px;
    background: #fff;
}
.ht-clients strong {
    color: var(--ht-text);
    font-size: 16px;
    line-height: 1.3;
}
.ht-clients span {
    margin-top: 4px;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* Liên hệ: thông tin bên trái, hộp kêu gọi nền màu chính bên phải */
.ht-contact-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.col-inner .ht-contact-list li {
    position: relative;
    margin: 0;
    padding: 10px 0 10px 122px; /* nhãn đặt tuyệt đối bên trái; giá trị (chữ + link) chảy bình thường, không bị grid tách ô */
    border-bottom: 1px solid #e8edf2;
    color: var(--ht-text);
    line-height: 1.5;
}
.ht-contact-list li span {
    position: absolute;
    top: 10px;
    left: 0;
    color: #667;
    font-weight: 600;
}
.ht-contact-list a {
    color: var(--ht-blue);
}
.ht-contact-cta {
    padding: 30px;
    border-radius: 12px;
    background: var(--ht-blue);
    color: rgba(255, 255, 255, .9);
}
.ht-contact-cta h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 24px;
}
.ht-contact-cta .button {
    margin: 6px 10px 6px 0;
}
.ht-contact-cta .button.primary:not(.is-outline) {
    border-color: #fff;
    background: #fff;
    color: var(--ht-blue);
}
.ht-contact-cta__hotline {
    margin: 12px 0 0;
    font-size: 17px;
}
.ht-contact-cta__hotline a {
    color: #fff;
    font-weight: 700;
}
@media (max-width: 1199px) {
    .ht-clients {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 849px) {
    .ht-page-hero__title {
        font-size: 32px;
    }
    .ht-page-hero__lead {
        font-size: 17px;
    }
    .ht-why,
    .ht-clients-section,
    .ht-about-gallery,
    .ht-contact-band {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .ht-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 20px;
    }
    .ht-stats__item:nth-child(3) {
        border-left: 0;
    }
    .ht-stats__item strong {
        font-size: 32px;
    }
    .ht-values--4 {
        grid-template-columns: 1fr;
    }
    .ht-clients {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .col-inner .ht-contact-list li {
        padding-left: 96px;
    }
    .ht-contact-cta {
        padding: 22px;
    }
}

/* ==========================================================================
   FOOTER BỐ CỤC LẠI (23/10/2026)
   Nền xanh đậm (theme mod footer_*_bg_color #0b2f55, dòng bản quyền #082441), chữ trắng. Hàng 1: cột thông tin HTX rộng
   (giới thiệu, liên hệ có biểu tượng, mạng xã hội) + 3 menu không gạch ngăn. Hàng 2: dải đăng ký nhận tin (chữ trái, ô email
   + nút một hàng phải). Mobile: 2 menu ngắn cạnh nhau, chừa chỗ cho nút liên hệ nổi dưới dòng bản quyền.
   ========================================================================== */
#footer .footer-1 {
    padding: 56px 0 24px;
}
#footer .footer-widgets span.widget-title {
    color: #fff;
    font-size: 17px;
    letter-spacing: .04em;
}
#footer .footer-widgets .is-divider {
    max-width: 32px;
    height: 2px;
    margin: 10px 0 16px;
    background: var(--ht-red);
    opacity: 1;
}
/* Cột không đều: thông tin HTX rộng hơn */
@media (min-width: 850px) {
    #footer .footer-1 .row > .col {
        flex-basis: 20%;
        max-width: 20%;
    }
    #footer .footer-1 .row > #text-3 {
        flex-basis: 34%;
        max-width: 34%;
        padding-right: 40px;
    }
    #footer .footer-1 .row > #nav_menu-3 {
        flex-basis: 26%;
        max-width: 26%;
    }
}
.ht-footer-intro {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.6;
}
.ht-footer-contact {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
#footer .ht-footer-contact li {
    position: relative;
    margin: 0 0 8px;
    padding: 0 0 0 28px;
    border: 0;
    color: rgba(255, 255, 255, .88);
    line-height: 1.5;
}
#footer .ht-footer-contact li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 16px;
    height: 16px;
    background-position: center; /* không dùng "background:" rút gọn: sẽ xoá background-image của từng biểu tượng */
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .85;
}
.ht-footer-contact__addr::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.ht-footer-contact__phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M16 1H8a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm-4 21a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4-4H8V4h8z'/%3E%3C/svg%3E"); }
.ht-footer-contact__tel::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.ht-footer-contact__mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4 7.3V8l8 5 8-5v-.7z'/%3E%3C/svg%3E"); }
.ht-footer-contact__tax::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 2h9l5 5v15H6zm8 1.5V8h4.5zM8 12v2h10v-2zm0 4v2h10v-2z'/%3E%3C/svg%3E"); }
#footer .ht-footer-contact a {
    color: #fff;
}
#footer .ht-footer-contact a:hover {
    color: #ffd2d4;
}
#footer .footer-widgets .social-icons a {
    margin: 0 6px 0 0;
}
/* Menu: không gạch ngăn, chữ trắng nhạt, mũi tên nhỏ khi rê chuột */
#footer .widget_nav_menu ul.menu > li {
    margin: 0;
    padding: 0;
    border: 0;
}
#footer .widget_nav_menu ul.menu > li > a {
    display: inline-block;
    padding: 5px 0;
    color: rgba(255, 255, 255, .82);
    transition: color .2s, transform .2s;
}
#footer .widget_nav_menu ul.menu > li > a:hover {
    color: #fff;
    transform: translateX(3px);
}

/* Hàng 2: dải đăng ký nhận tin */
#footer .footer-2 {
    padding: 0 0 8px;
}
#footer .footer-2 .row > .col {
    flex-basis: 100%;
    max-width: 100%;
}
#footer #text-4 {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 6px 40px;
    padding: 24px 15px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
#footer #text-4 .widget-title {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
}
#footer #text-4 .is-divider {
    display: none;
}
#footer #text-4 .textwidget {
    display: contents;
}
#footer #text-4 .ht-footer-newsletter {
    grid-column: 1;
    margin: 0;
    color: rgba(255, 255, 255, .8);
}
#footer #text-4 .wpcf7 {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.ht-nl-row > p { /* CF7 tự bọc trường trong <p>: hàng flex là thẻ p này */
    display: flex;
    gap: 8px;
    margin: 0;
}
.ht-nl-row .wpcf7-form-control-wrap {
    flex: 1 1 auto;
}
.ht-nl-consent > p {
    margin: 0;
}
#footer .ht-nl .ht-nl-row input[type="email"] {
    float: none;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
    color: #fff;
}
#footer .ht-nl .ht-nl-row input[type="email"]::placeholder {
    color: rgba(255, 255, 255, .65);
}
#footer .ht-nl .ht-nl-row input[type="submit"] {
    flex: none;
    height: 46px;
    margin: 0;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--ht-red);
    color: #fff;
}
#footer .ht-nl .ht-nl-row input[type="submit"]:hover {
    background: #fff;
    color: var(--ht-blue);
}
#footer .ht-nl-consent .wpcf7-acceptance {
    padding-top: 8px;
    color: rgba(255, 255, 255, .75);
}
#footer .ht-nl-consent a,
#footer .ht-nl .wpcf7-response-output {
    color: #fff;
}

/* Dòng bản quyền */
#footer .absolute-footer {
    padding: 14px 0;
    color: rgba(255, 255, 255, .7);
}
#footer .absolute-footer a {
    color: #fff;
}
@media (max-width: 849px) {
    #footer .footer-1 {
        padding-top: 36px;
    }
    /* Thông tin HTX và "Hỗ trợ khách hàng" cả hàng; 2 menu ngắn cạnh nhau */
    #footer .footer-1 .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #footer .footer-1 .row > #text-3,
    #footer .footer-1 .row > #nav_menu-3 {
        grid-column: 1 / -1;
    }
    #footer .footer-1 .row > .col {
        max-width: none;
        padding-bottom: 18px;
    }
    #footer .footer-1 .row > #nav_menu-3 {
        order: 3;
    }
    #footer #text-4 {
        grid-template-columns: 1fr;
    }
    #footer #text-4 .wpcf7 {
        grid-column: 1;
        grid-row: auto;
    }
    #footer .absolute-footer {
        padding-bottom: 24px;
        text-align: left;
    }
    #footer .absolute-footer .container {
        padding-right: 84px; /* nút liên hệ nổi (góc phải dưới) không che dòng bản quyền */
    }
}

/* ==========================================================================
   TRANG SẢN PHẨM / DANH MỤC (23/10/2026): banner tiêu đề, chip danh mục, lưới 5 cột cùng kiểu thẻ trang chủ, dải kêu gọi
   ========================================================================== */
/* Banner tiêu đề: nền xanh đậm + ảnh xưởng mờ (đường dẫn tương đối theo thư mục theme, đúng cả khi đổi domain) */
.shop-page-title.category-page-title {
    position: relative;
    margin-bottom: 24px;
    padding: 40px 0;
    background: #0b2f55 url("../../uploads/2025/12/fwegwg.webp") center 40% / cover no-repeat;
    color: #fff;
}
.shop-page-title.category-page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 36, 65, .94) 0%, rgba(8, 36, 65, .78) 55%, rgba(8, 36, 65, .6) 100%);
}
.shop-page-title.category-page-title .page-title-inner {
    position: relative;
    align-items: flex-end;
    min-height: 0;
    padding-top: 0;
}
.shop-page-title.category-page-title h1.shop-page-title {
    margin-bottom: 6px;
    color: #fff;
    font-size: 38px;
    line-height: 1.2;
}
.shop-page-title .woocommerce-breadcrumb,
.shop-page-title .woocommerce-breadcrumb a,
.shop-page-title .woocommerce-breadcrumb .divider {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
}
.shop-page-title .woocommerce-breadcrumb a:hover {
    color: #fff;
}
.shop-page-title .woocommerce-result-count {
    color: rgba(255, 255, 255, .85);
}
.shop-page-title .woocommerce-ordering select {
    border-color: rgba(255, 255, 255, .35);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}
.shop-page-title .woocommerce-ordering select option {
    color: var(--ht-text);
}

/* Chip danh mục: viên thuốc viền mảnh, chip đang chọn nền màu chính */
.ht-cat-chips .ht-cat-chip {
    padding: 7px 16px;
    border: 1px solid #d5dfe8;
    border-radius: 999px;
    background: #fff;
    color: #334;
    font-size: 15px;
    font-weight: 600;
    transition: border-color .2s, color .2s, background .2s;
}
.ht-cat-chips .ht-cat-chip:hover {
    border-color: var(--ht-blue);
    color: var(--ht-blue);
}
.ht-cat-chips .ht-cat-chip.is-active {
    border-color: var(--ht-blue);
    background: var(--ht-blue);
    color: #fff;
}

/* Thẻ sản phẩm: như khối Sản phẩm trang chủ (.ht-product-grid) */
.shop-container .products .product-small .col-inner {
    overflow: hidden;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shop-container .products .product-small .col-inner:hover {
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(0, 50, 100, .14);
    transform: translateY(-4px);
}
.shop-container .products .product-small .box-image img {
    transition: transform .5s ease;
}
.shop-container .products .product-small:hover .box-image img {
    transform: scale(1.05);
}
.shop-container .products .product-small .box-text {
    padding: 14px 16px 16px;
}
.shop-container .products .box-text .name a {
    color: var(--ht-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.shop-container .products .product-small:hover .box-text .name a {
    color: var(--ht-blue);
}
.shop-container .products .price-wrapper {
    margin-top: 0;
}
.shop-container .products .price-wrapper > .price {
    margin-bottom: 0; /* Giá hoặc "Liên hệ" (giá trống / 0), nút "+ Báo giá" ngay dưới. */
}
.shop-container .products .wvq-add-to-quote--loop {
    margin-top: 10px;
}
.shop-container .woocommerce-pagination {
    margin-top: 8px;
}

/* Dải kêu gọi cuối lưới (dùng lại .ht-products__cta) */
.ht-shop-cta {
    margin: 20px 0 40px;
}
.ht-shop-cta p strong {
    display: block;
}
.ht-shop-cta__actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 10px;
}
.ht-shop-cta__actions .button {
    margin: 0;
    border-color: #fff;
    background: #fff;
    color: var(--ht-blue);
}
.ht-shop-cta__actions .button.is-outline {
    background: transparent;
    color: #fff;
}
.ht-shop-cta__actions .button:hover {
    border-color: var(--ht-red);
    background: var(--ht-red);
    color: #fff;
}
@media (max-width: 849px) {
    .shop-page-title.category-page-title {
        padding: 28px 0;
    }
    .shop-page-title.category-page-title h1.shop-page-title {
        font-size: 28px;
    }
    .shop-container .products .product-small .box-text {
        padding: 10px 10px 12px;
    }
    .shop-container .products .box-text .name a {
        font-size: 15px;
    }
}

/* Thẻ sản phẩm trong cùng hàng cao bằng nhau, nút "+ Báo giá" luôn ở đáy (tên 1 hay 2 dòng) — trang Sản phẩm / danh mục
   và khối Sản phẩm trang chủ. */
.shop-container .products .product-small > .col-inner,
.ht-product-grid .product-small > .col-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.shop-container .products .product-small .box,
.ht-product-grid .product-small .box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.shop-container .products .product-small .box-text,
.ht-product-grid .product-small .box-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.shop-container .products .product-small .price-wrapper,
.ht-product-grid .product-small .price-wrapper {
    margin-top: auto;
}

/* ==========================================================================
   TRANG CHI TIẾT SẢN PHẨM (23/10/2026): ảnh bo góc, bảng thông số ngắn, hộp báo giá, tab, tiêu đề khối như trang chủ,
   thẻ sản phẩm liên quan như lưới, dải kêu gọi cuối trang
   ========================================================================== */
.single-product .product-main {
    padding-top: 32px;
}
.single-product .product-gallery .woocommerce-product-gallery__image img,
.single-product .product-gallery .product-thumbnails img {
    border-radius: 10px;
}
.single-product .product-gallery .product-images {
    overflow: hidden;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
}
.single-product .product-thumbnails .col a {
    overflow: hidden;
    border-radius: 8px;
}
.single-product .product-info .product-title {
    margin-bottom: 14px;
    color: var(--ht-blue);
    font-size: 32px;
    line-height: 1.2;
}
.single-product .product-info .is-divider {
    display: none;
}
/* Bảng thông số ngắn (từ mô tả ngắn "• Nhãn: giá trị", hoangtuyen_short_description_specs) */
.ht-short-specs {
    margin: 0 0 18px;
    padding: 0;
    border-top: 1px solid #e8edf2;
    list-style: none;
}
.product-short-description .ht-short-specs li {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid #e8edf2;
    line-height: 1.5;
}
.ht-short-specs__label {
    color: #667;
    font-weight: 600;
}
.ht-short-specs__value {
    color: var(--ht-text);
}
.product-short-description .ht-short-specs li.ht-short-specs__full {
    display: block;
}
/* Hộp báo giá */
.single-product .ht-product-cta {
    padding: 18px 20px;
    border: 0;
    border-left: 4px solid var(--ht-blue);
    border-radius: 10px;
    background: #f1f6fb;
}
.single-product .ht-product-cta__buttons .button {
    border-radius: 6px;
}
.single-product .ht-product-trust {
    margin-top: 16px;
}
.single-product .product_meta {
    padding-top: 12px;
    border-top: 1px solid #e8edf2;
    font-size: 14px;
}
/* Tab: không in hoa, tab đang mở gạch dưới màu chính; nội dung trong khung bo góc */
.single-product .product-footer {
    padding-top: 16px;
}
.single-product .woocommerce-tabs .nav > li > a {
    padding: 12px 4px;
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
}
.single-product .woocommerce-tabs .tab-panels {
    padding: 24px 28px;
    border: 1px solid #e3e9ef;
    border-radius: 0 10px 10px 10px;
    background: #fff;
}
/* Tiêu đề khối (Phụ kiện đi kèm, Sản phẩm tương tự, Công trình đã lắp): như tiêu đề khối trang chủ */
.single-product .product-section {
    border-top: 0;
}
.single-product .product-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    color: var(--ht-blue);
    font-size: 26px;
    letter-spacing: 0;
    text-transform: none;
}
.single-product .product-section-title::before {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--ht-red);
}
/* Thẻ sản phẩm liên quan / đi kèm: như lưới trang Sản phẩm (khối "Sản phẩm tương tự" nằm ngoài .product-footer) */
.single-product .product-section .product-small .col-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.single-product .product-section .product-small .col-inner:hover {
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(0, 50, 100, .14);
    transform: translateY(-4px);
}
.single-product .product-section .product-small .box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.single-product .product-section .product-small .box-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 14px 16px 16px;
}
.single-product .product-section .box-text .name a {
    color: var(--ht-text);
    font-size: 16px;
    font-weight: 600;
}
.single-product .product-section .product-small:hover .box-text .name a {
    color: var(--ht-blue);
}
.single-product .product-section .price-wrapper {
    margin-top: auto;
}
.single-product .product-section .price-wrapper > .price {
    margin-bottom: 0;
}
/* Trang chi tiết: dòng giá dưới tên sản phẩm; "Liên hệ" chữ đỏ đậm (giá trống / 0). */
.single-product .product-info .product-page-price .wc-contact-text {
    font-size: 1.15em;
    font-weight: 700;
}
.single-product .ht-shop-cta {
    margin: 28px 0 48px;
}
@media (max-width: 849px) {
    .single-product .product-info .product-title {
        font-size: 26px;
    }
    .product-short-description .ht-short-specs li {
        grid-template-columns: 110px 1fr;
    }
    .single-product .woocommerce-tabs .tab-panels {
        padding: 18px 16px;
        border-radius: 10px;
    }
    .single-product .product-section-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   TRANG CÔNG TRÌNH (23/10/2026): banner (.ht-page-hero), lưới 4 cột [wvpj_projects columns="4"], dải kêu gọi.
   Chip lọc và thẻ công trình đồng bộ với chip danh mục / thẻ sản phẩm.
   ========================================================================== */
.ht-projects-list {
    padding-top: 56px !important;
    padding-bottom: 24px !important;
}
.ht-projects-cta-section {
    padding-top: 0 !important;
    padding-bottom: 40px !important;
}
.wvpj-projects .wvpj-filter {
    border-color: #d5dfe8;
    color: #334;
    font-size: 15px;
}
.wvpj-projects .wvpj-filter:hover,
.wvpj-projects .wvpj-filter:focus-visible {
    border-color: var(--ht-blue);
    background: #fff;
    color: var(--ht-blue);
}
.wvpj-projects .wvpj-filter.is-active {
    border-color: var(--ht-blue);
    background: var(--ht-blue);
    color: #fff;
}
.wvpj-projects .wvpj-project__link {
    border-color: #e3e9ef;
    border-radius: 10px;
}
.wvpj-projects .wvpj-project__link:hover {
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(0, 50, 100, .14);
    transform: translateY(-4px);
}
.wvpj-projects .wvpj-project__image img {
    transition: transform .5s ease;
}
.wvpj-projects .wvpj-project__link:hover .wvpj-project__image img {
    transform: scale(1.05);
}
.wvpj-projects .wvpj-project__cat {
    color: var(--ht-red);
}
.wvpj-projects .wvpj-project__link:hover .wvpj-project__title {
    color: var(--ht-blue);
}
@media (max-width: 849px) {
    .ht-projects-list {
        padding-top: 36px !important;
    }
}

/* ==========================================================================
   TRANG CHUYÊN MỤC BÀI VIẾT (Tin tức…) (23/10/2026): banner tiêu đề như trang Sản phẩm, lưới 4 cột (archive-4-col.php,
   dùng lại thẻ tin trang chủ .ht-news .ht-news-grid), 12 bài / trang
   ========================================================================== */
.archive .archive-page-header {
    position: relative;
    margin-bottom: 32px;
    padding: 44px 0;
    background: #0b2f55 url("../../uploads/2025/12/Cyclon-1-scaled-1-1024x768.webp") center 50% / cover no-repeat;
}
.archive .archive-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 36, 65, .94) 0%, rgba(8, 36, 65, .78) 55%, rgba(8, 36, 65, .6) 100%);
}
.archive .archive-page-header .row {
    position: relative;
}
.archive .archive-page-header .col {
    padding-bottom: 0;
    text-align: left;
}
.archive .archive-page-header .ht-eyebrow {
    color: rgba(255, 255, 255, .85);
}
.archive .archive-page-header .page-title {
    margin-bottom: 6px;
    color: #fff;
    font-size: 38px;
    letter-spacing: 0;
    text-transform: none;
}
.archive .archive-page-header .page-title span {
    color: #fff;
}
.archive .archive-page-header .taxonomy-description {
    max-width: 720px;
    margin: 0; /* Flatsome canh giữa (margin auto) */
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
}
.archive .archive-page-header .taxonomy-description p {
    margin: 0;
}
.blog-archive.page-wrapper {
    padding-top: 0; /* banner sát thanh menu (Flatsome đệm trên 30px) */
}
.ht-news--archive {
    padding-top: 0 !important;
    padding-bottom: 40px !important;
}
/* Thắng luật cũ ".category .blog-wrapper .post-item .col-inner" (bóng đổ, hiệu ứng fadeInUp): thẻ viền mảnh như trang chủ */
.blog-archive .ht-news--archive .post-item .col-inner {
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    box-shadow: none;
    animation: none;
}
.blog-archive .ht-news--archive .post-item .col-inner:hover {
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(0, 50, 100, .14);
    transform: translateY(-4px);
}
.ht-news--archive .page-numbers {
    margin-top: 8px;
}
@media (max-width: 849px) {
    .archive .archive-page-header {
        padding: 28px 0;
    }
    .archive .archive-page-header .page-title {
        font-size: 28px;
    }
}

/* ==========================================================================
   TRANG CHI TIẾT BÀI VIẾT (23/10/2026): tiêu đề, ảnh trong bài, sidebar phải (hộp tư vấn, tin mới, danh mục sản phẩm,
   dính khi cuộn), khối "Bài viết liên quan" dưới bài
   ========================================================================== */
.single-post .blog-wrapper.page-wrapper {
    padding-top: 36px;
}
.single-post .entry-header .entry-category a {
    color: var(--ht-red);
    font-weight: 700;
    letter-spacing: .06em;
}
.single-post .entry-header .entry-title {
    color: var(--ht-blue);
    font-size: 32px;
    line-height: 1.25;
}
.single-post .entry-header .is-divider {
    max-width: 48px;
    height: 3px;
    background: var(--ht-red);
}
.single-post .entry-content {
    font-size: 17px;
    line-height: 1.7;
}
/* Ảnh trong bài: không cao quá 640px (ảnh dọc chụp điện thoại cao gần 1.000px), giữ tỉ lệ, bo góc */
.single-post .entry-content img {
    width: auto;
    max-height: 640px;
    border-radius: 10px;
}
/* Sidebar: tiêu đề widget gạch đỏ (thay băng xanh cũ) */
.single-post #secondary .widget {
    margin-bottom: 24px;
    padding: 18px 18px 8px;
    border: 1px solid #e3e9ef; /* viền sẵn có của theme, thêm đệm + bo góc để nội dung không dính viền */
    border-radius: 10px;
    background: #fff;
}
.single-post #secondary .widget_custom_html {
    padding: 0;
    border: 0;
}
.single-post #secondary .widget_product_categories ul.product-categories > li:last-child {
    border-bottom: 0;
}
.single-post #secondary span.widget-title {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    color: var(--ht-blue);
    font-size: 18px;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}
.single-post #secondary span.widget-title::before {
    content: "";
    flex: none;
    width: 24px;
    height: 2px;
    background: var(--ht-red);
}
.single-post #secondary .is-divider {
    display: none;
}
/* Hộp tư vấn */
.ht-side-cta {
    padding: 22px 20px;
    border-radius: 12px;
    background: var(--ht-blue);
    color: rgba(255, 255, 255, .9);
}
.ht-side-cta__eyebrow {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ht-side-cta__title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.ht-side-cta p {
    font-size: 15px;
    line-height: 1.5;
}
.ht-side-cta__phone {
    display: block;
    margin: 4px 0 14px;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}
.ht-side-cta__phone:hover {
    color: #ffd2d4;
}
.ht-side-cta .ht-side-cta__btn {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    text-align: center;
}
.ht-side-cta .button.primary {
    border-color: #fff;
    background: #fff;
    color: var(--ht-blue);
}
.ht-side-cta .button.is-outline {
    border-color: #fff;
    color: #fff;
}
.ht-side-cta .button:hover {
    border-color: var(--ht-red);
    background: var(--ht-red);
    color: #fff;
}
/* Tin mới nhất (block "tin-tuc-moi-nhat": blog_posts dọc) */
.single-post #secondary .block_widget .post-item .col-inner {
    padding: 0;
    border: 0;
    box-shadow: none;
    animation: none;
}
.single-post #secondary .block_widget .post-item {
    padding-bottom: 12px;
}
.single-post #secondary .block_widget .box-image {
    overflow: hidden;
    border-radius: 6px;
}
.single-post #secondary .block_widget .box-text {
    padding: 0 0 0 12px;
}
.single-post #secondary .block_widget .post-title {
    font-size: 14px;
    line-height: 1.4;
}
.single-post #secondary .block_widget .post-title a {
    color: var(--ht-text);
}
.single-post #secondary .block_widget .post-item:hover .post-title a {
    color: var(--ht-blue);
}
/* Danh mục sản phẩm */
.single-post #secondary .widget_product_categories ul.product-categories > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid #e8edf2;
}
.single-post #secondary .widget_product_categories li a {
    color: var(--ht-text);
    font-weight: 600;
}
.single-post #secondary .widget_product_categories li a:hover {
    color: var(--ht-blue);
}
.single-post #secondary .widget_product_categories .count {
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef3f8;
    color: #556;
    font-size: 12px;
    opacity: 1;
}
/* Bài viết liên quan */
.ht-related-posts {
    margin-top: 16px;
    padding: 48px 0 40px;
    border-top: 1px solid #e8edf2;
    background: #f5f8fb;
}
.ht-related-posts .post-item .col-inner {
    height: 100%;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}
@media (max-width: 849px) {
    .single-post .entry-header .entry-title {
        font-size: 26px;
    }
    .single-post .entry-content {
        font-size: 16px;
    }
    .single-post .entry-content img {
        max-height: 520px;
    }
}

/* ==========================================================================
   CHUYÊN MỤC TUYỂN DỤNG KHI CHƯA CÓ TIN (23/10/2026): hộp thông báo + nút gửi hồ sơ, 3 thẻ môi trường làm việc
   (dùng lại .ht-value), các bước ứng tuyển (dùng lại .ht-step__list) + 2 ảnh xưởng
   ========================================================================== */
.ht-recruitment-empty {
    padding: 8px 0 48px;
}
.ht-recruit-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    margin-bottom: 48px;
    padding: 28px 32px;
    border: 1px solid #d9e6f2;
    border-left: 4px solid var(--ht-blue);
    border-radius: 12px;
    background: #f1f6fb;
}
.ht-recruit-notice__text p:last-child {
    margin: 0;
    color: #444;
    font-size: 17px;
}
.ht-recruit-notice__actions {
    flex: none;
    text-align: center;
}
.ht-recruit-notice__actions .button {
    display: block;
    min-width: 240px;
    margin: 0 0 10px;
}
.ht-recruit-notice__mail {
    margin: 0;
    color: #556;
    font-size: 14px;
}
.ht-values--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    margin: 0 0 48px;
}
.ht-values--3 .ht-value {
    padding: 72px 20px 20px;
    background-position: 20px 20px;
}
.ht-recruit-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 40px;
}
.ht-recruit-steps .ht-step__list > li {
    position: relative;
    margin: 0 0 18px;
    padding-left: 40px;
    line-height: 1.6;
    counter-increment: ht-step;
}
.ht-recruit-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ht-recruit-photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}
@media (max-width: 849px) {
    .ht-recruit-notice {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 20px;
    }
    .ht-recruit-notice__actions .button {
        min-width: 0;
    }
    .ht-values--3,
    .ht-recruit-bottom {
        grid-template-columns: 1fr;
    }
}
.ht-recruit-notice__actions .button.is-outline {
    border-color: var(--ht-blue);
    color: var(--ht-blue);
}
.ht-recruit-notice__actions .button.is-outline:hover {
    background: var(--ht-blue);
    color: #fff;
}

/* Bảng thông tin tuyển dụng trong bài (vị trí, số lượng, nơi làm việc, hình thức, mức lương) */
.entry-content .ht-job-info {
    width: 100%;
    margin: 8px 0 28px;
    overflow: hidden;
    border: 1px solid #d9e6f2;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    background: #f1f6fb;
}
.entry-content .ht-job-info th,
.entry-content .ht-job-info td {
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid #d9e6f2;
    background: transparent;
    font-size: 16px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}
.entry-content .ht-job-info tr:last-child th,
.entry-content .ht-job-info tr:last-child td {
    border-bottom: 0;
}
.entry-content .ht-job-info th {
    width: 180px;
    color: #556;
    font-weight: 600;
}
.entry-content .ht-job-info td {
    color: var(--ht-text);
    font-weight: 600;
}
.single-post .entry-content h2 {
    margin-top: 28px;
    color: var(--ht-blue);
    font-size: 22px;
}

/* ==========================================================================
   TRANG LIÊN HỆ (23/10/2026): banner (.ht-page-hero), 4 thẻ liên hệ có biểu tượng + lối tắt, form CF7 #120 trong thẻ trắng,
   bản đồ Google cuối trang
   ========================================================================== */
.ht-contact-main {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    background: #f5f8fb !important;
}
.ht-contact-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.ht-contact-card {
    padding: 16px 16px 16px 64px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff 16px 16px / 36px no-repeat;
    line-height: 1.5;
}
.ht-contact-card__label {
    display: block;
    margin-bottom: 2px;
    color: #667;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ht-contact-card__value {
    color: var(--ht-text);
    font-weight: 600;
}
.ht-contact-card__value a {
    color: var(--ht-blue);
}
.ht-contact-card--addr { grid-column: 1 / -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e6f0f9'/%3E%3Cpath fill='%230060aa' d='M20 9a7 7 0 0 0-7 7c0 5.2 7 14 7 14s7-8.8 7-14a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.ht-contact-card--mobile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23fde8e9'/%3E%3Cpath fill='%23c8161d' d='M14.6 18.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V28a1 1 0 0 1-1 1A17 17 0 0 1 11 12a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.ht-contact-card--tel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e6f0f9'/%3E%3Cpath fill='%230060aa' d='M11 15h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H11a2 2 0 0 1-2-2V17a2 2 0 0 1 2-2zm3-4h12v3H14zm1 8v2h3v-2zm5 0v2h3v-2zm-5 4v2h3v-2zm5 0v2h3v-2z'/%3E%3C/svg%3E"); }
.ht-contact-card--mail { grid-column: 1 / -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23e6f0f9'/%3E%3Cpath fill='%230060aa' d='M11 13h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1V14a1 1 0 0 1 1-1zm9 7.2-8-4.9v.7l8 5 8-5v-.7z'/%3E%3C/svg%3E"); }
.ht-contact-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ht-contact-quick .button {
    margin: 0;
}
.ht-contact-quick .button.is-outline {
    border-color: var(--ht-blue);
    color: var(--ht-blue);
}
.ht-contact-quick .button.is-outline:hover {
    background: var(--ht-blue);
    color: #fff;
}
/* Form */
.ht-contact-form {
    padding: 32px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 50, 100, .08);
}
.ht-contact-form .ht-section-desc {
    margin-bottom: 20px;
}
.ht-cf-row > p { /* CF7 bọc trường trong <p>: lưới là thẻ p này */
    display: grid;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ht-cf input:not([type="checkbox"]):not([type="submit"]),
.ht-cf textarea {
    width: 100%;
    height: 48px;
    margin-bottom: 12px;
    padding: 0 16px;
    border: 1px solid #d5dfe8;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: none;
}
.ht-cf textarea {
    height: 140px;
    padding-top: 12px;
}
.ht-cf input:focus,
.ht-cf textarea:focus {
    border-color: var(--ht-blue);
    background: #fff;
}
.ht-cf input[type="submit"] {
    width: 100%;
    height: 50px;
    margin: 8px 0 0;
    border-radius: 8px;
    font-size: 16px;
}
.ht-contact-map iframe {
    display: block;
    margin: 0;
}
.ht-contact-map > .section-content p {
    margin: 0;
}
@media (max-width: 849px) {
    .ht-contact-main {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .ht-contact-cards,
    .ht-cf-row > p {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ht-contact-cards {
        gap: 10px;
    }
    .ht-contact-form {
        padding: 22px 18px;
    }
}
.ht-contact-map {
    padding: 0 !important;
}
.ht-contact-map .section-content {
    line-height: 0; /* khe chữ dưới iframe */
}

/* TRANG ĐẶT LỊCH KHẢO SÁT (23/10/2026): dùng lại khối Đặt lịch trang chủ (.ht-booking-section / .ht-booking / .ht-values);
   thêm "Sau khi đặt lịch" (3 bước, .ht-step__list) dưới 4 thẻ giá trị. */
.ht-booking-steps {
    margin-top: 20px;
    padding: 20px 22px 6px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #f5f8fb;
}
.ht-booking-steps__title {
    margin: 0 0 12px;
    color: var(--ht-blue);
    font-size: 18px;
    font-weight: 700;
}
.ht-booking-steps .ht-step__list > li {
    position: relative;
    margin: 0 0 14px;
    padding-left: 40px;
    line-height: 1.55;
    counter-increment: ht-step;
}
.ht-booking-page + .ht-page-hero,
.ht-booking-page ~ .ht-booking-section {
    background: #fff;
}

/* Ô khung giờ trong hộp đặt lịch màu xanh (trang chủ, trang Đặt lịch): luật ".ht-booking .wvq-booking label { color:#fff }"
   làm chữ ô (label nền trắng) trắng trên trắng. Trả lại màu của Webvina Quote. */
.ht-booking .wvq-booking .wvq-slot {
    color: var(--ht-blue);
}
.ht-booking .wvq-booking .wvq-slot small {
    color: #556;
}
.ht-booking .wvq-booking .wvq-slot:has(input:checked) {
    border-color: #0b2f55;
    background: #0b2f55;
    color: #fff;
}
.ht-booking .wvq-booking .wvq-slot:has(input:checked) small {
    color: rgba(255, 255, 255, .85);
}
.ht-booking .wvq-booking .wvq-slot.is-full {
    color: #999;
}

/* ==========================================================================
   TRANG BÁO GIÁ (23/10/2026): banner, dải 3 bước, form Webvina Quote (danh sách + form) trong thẻ, cột phụ (hotline, đặt lịch,
   xem sản phẩm). Chỉ đổi giao diện ở trang này (.ht-quote-main), không đổi plugin.
   ========================================================================== */
.ht-quote-main {
    padding-top: 40px !important;
    padding-bottom: 56px !important;
    background: #f5f8fb !important;
}
.ht-quote-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    counter-reset: ht-qs;
}
.col-inner .ht-quote-steps li {
    position: relative;
    margin: 0;
    padding: 16px 16px 16px 66px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
    counter-increment: ht-qs;
    line-height: 1.45;
}
.ht-quote-steps li::before {
    content: counter(ht-qs);
    position: absolute;
    top: 50%;
    left: 16px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border-radius: 50%;
    background: var(--ht-blue);
    color: #fff;
    font-weight: 700;
}
.ht-quote-steps strong {
    display: block;
    color: var(--ht-text);
}
.ht-quote-steps span {
    color: #667;
    font-size: 14px;
}
/* Form: danh sách sản phẩm + form trong thẻ trắng */
.ht-quote-main .wvq-quote {
    padding: 28px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 50, 100, .08);
}
.ht-quote-main .wvq-quote__title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ht-blue);
    font-size: 22px;
}
.ht-quote-main .wvq-quote__title::before {
    content: "";
    flex: none;
    width: 24px;
    height: 2px;
    background: var(--ht-red);
}
.ht-quote-main .wvq-quote__items:empty + .wvq-quote__hint,
.ht-quote-main .wvq-quote__hint {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f1f6fb;
    color: #445;
}
.ht-quote-main .wvq-quote__form {
    margin-top: 24px;
    padding: 24px 0 0;
    border: 0;
    border-top: 1px solid #e8edf2;
    border-radius: 0;
}
.ht-quote-main .wvq-field label,
.ht-quote-main .wvq-field legend {
    color: #334;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.ht-quote-main .wvq-field input:not([type="checkbox"]):not([type="file"]),
.ht-quote-main .wvq-field select,
.ht-quote-main .wvq-field textarea {
    height: 46px;
    border: 1px solid #d5dfe8;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: none;
}
.ht-quote-main .wvq-field textarea {
    height: 130px;
}
.ht-quote-main .wvq-field input:focus,
.ht-quote-main .wvq-field select:focus,
.ht-quote-main .wvq-field textarea:focus {
    border-color: var(--ht-blue);
    background: #fff;
}
/* Hạng mục: ô chọn dạng viên thuốc */
.ht-quote-main .wvq-field--checkboxes fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
.ht-quote-main .wvq-field--checkboxes legend {
    margin-bottom: 8px;
}
.ht-quote-main .wvq-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px 8px 0;
    padding: 6px 14px;
    border: 1px solid #d5dfe8;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ht-quote-main .wvq-check input {
    margin: 0;
}
.ht-quote-main .wvq-check:has(input:checked) {
    border-color: var(--ht-blue);
    background: #e9f2fa;
    color: var(--ht-blue);
}
/* Ô đính kèm: khung nét đứt */
.ht-quote-main .wvq-field--file {
    padding: 16px;
    border: 2px dashed #c9d7e5;
    border-radius: 10px;
    background: #f8fafc;
}
.ht-quote-main .wvq-quote__submit {
    width: 100%;
    height: 50px;
    margin: 8px 0 0;
    border-radius: 8px;
    font-size: 16px;
}
/* Cột phụ */
.ht-quote-aside .ht-side-cta {
    margin-bottom: 16px;
}
.ht-quote-tip {
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
}
.ht-quote-tip__title {
    margin: 0 0 4px;
    color: var(--ht-blue);
    font-size: 17px;
    font-weight: 700;
}
.ht-quote-tip p:not(.ht-quote-tip__title) {
    margin-bottom: 10px;
    color: #555;
    font-size: 15px;
}
@media (min-width: 850px) {
    .ht-quote-aside > .col-inner {
        position: sticky;
        top: 80px;
    }
}
@media (max-width: 849px) {
    .ht-quote-steps {
        grid-template-columns: 1fr;
    }
    .ht-quote-main .wvq-quote {
        padding: 20px 16px;
    }
}

/* Gợi ý tìm kiếm (Flatsome live search) ở ô tìm kiếm header: nền trắng đặc (Flatsome để nền mờ, nhìn xuyên ra slider), có bóng,
   cao tối đa 420px cuộn được. Lúc đang tải: vòng xoay (::after) nằm đúng chỗ biểu tượng kính lúp, không đè chữ "Tìm". */
/* Khung ngoài .live-search-results luôn có trong trang (kể cả khi chưa gõ): để trong suốt, không viền / bóng, nếu không sẽ
   thành một vạch mỏng dưới ô tìm kiếm. Viền, bóng đặt ở hộp gợi ý (chỉ hiện khi có kết quả). */
.header-wrapper .searchform .live-search-results {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.header-wrapper .searchform .autocomplete-suggestions {
    max-height: 420px;
    margin-top: 4px;
    overflow-y: auto;
    border: 1px solid #e3e9ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(0, 40, 80, .18);
}
.header-wrapper .searchform .autocomplete-suggestion:hover,
.header-wrapper .searchform .autocomplete-suggestion.autocomplete-selected {
    background: #f1f6fb;
}
.header-wrapper .searchform .ux-search-submit {
    position: relative;
}
.header-wrapper .searchform .ux-search-submit.loading i {
    visibility: hidden;
}
.header-wrapper .searchform .ux-search-submit.loading::after {
    left: 24px; /* tâm biểu tượng kính lúp (đệm trái 16px + nửa biểu tượng) */
}

/* ==========================================================================
   TRANG THƯ VIỆN (23/10/2026): banner (.ht-page-hero), video + giới thiệu, ảnh chia 2 tab (Công trình thực tế / Xưởng &
   thiết bị) có chú thích trên ảnh, dải kêu gọi (dùng lại .ht-shop-cta).
   ========================================================================== */
.ht-library-video,
.ht-library-photos {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
.ht-library-photos {
    background: #f5f8fb !important;
}
.ht-library-photos + .ht-projects-cta-section {
    padding-top: 40px !important;
}
.ht-library-video .ht-section-title {
    margin-bottom: 12px;
}
.ht-library-points {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.ht-library-points li {
    position: relative;
    margin: 0 0 10px; /* Flatsome thêm lề trái cho ul li */
    padding-left: 32px;
    color: var(--ht-text);
    line-height: 1.5;
}
.ht-library-points li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ht-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.6 5 12.1l1.4-1.4 3.1 3.1 8.1-8.1L19 7.1z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Tab ảnh: kiểu chip như bộ lọc trang Công trình */
.ht-library-tabs > .nav {
    gap: 10px;
    margin-bottom: 24px;
}
.ht-library-tabs > .nav > li {
    margin: 0;
}
.ht-library-tabs > .nav > li > a {
    padding: 8px 20px;
    border: 1px solid #d5dfe8;
    border-radius: 999px;
    background: #fff;
    color: #334;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.ht-library-tabs > .nav > li > a:hover,
.ht-library-tabs > .nav > li > a:focus-visible {
    border-color: var(--ht-blue);
    color: var(--ht-blue);
}
.ht-library-tabs > .nav > li.active > a {
    border-color: var(--ht-blue);
    background: var(--ht-blue);
    color: #fff;
}

/* Ảnh: bo góc, chú thích 2 dòng trên nền tối dưới ảnh */
.ht-library-gallery .gallery-box,
.ht-library-gallery .box-image {
    overflow: hidden;
    border-radius: 8px;
}
.ht-library-gallery .box-text {
    padding: 28px 12px 10px !important;
    background: linear-gradient(transparent, rgba(4, 30, 56, .85));
    pointer-events: none;
}
.ht-library-gallery .box-text p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ht-library-gallery .shade {
    display: none; /* thay bằng nền chuyển màu ở .box-text */
}
@media (max-width: 849px) {
    .ht-library-video,
    .ht-library-photos {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .ht-library-video .ht-media__video {
        padding-bottom: 24px;
    }
}
@media (max-width: 549px) {
    .ht-library-gallery .box-text p {
        font-size: 12px;
    }
    .ht-library-tabs > .nav > li > a {
        padding: 7px 14px;
        font-size: 14px;
    }
}
.ht-library-video .ht-section-desc {
    margin-bottom: 18px;
}

/* ==========================================================================
   TÌM KIẾM VÀ TRANG 404 (23/10/2026, inc/search.php): bài viết / trang tìm thấy dưới lưới sản phẩm, hộp "không tìm thấy",
   bộ gợi ý [hoangtuyen_help_links] (từ khoá, danh mục, liên hệ), khối UX "Trang 404".
   ========================================================================== */
.ht-search-extra.ht-news {
    margin-top: 40px;
    padding: 32px 0 0 !important;
    border-top: 1px solid #e3e9ef;
}
.ht-search-pages {
    margin-top: 8px;
}
.ht-search-pages__label,
.ht-help__label {
    margin: 0 0 10px;
    color: var(--ht-blue);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ht-search-pages ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ht-search-pages li {
    margin: 0;
}
.ht-search-pages a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #d5dfe8;
    border-radius: 8px;
    background: #fff;
    color: var(--ht-text);
}
.ht-search-pages a::after {
    content: " →";
    color: var(--ht-blue);
}
.ht-search-pages a:hover {
    border-color: var(--ht-blue);
    color: var(--ht-blue);
}

/* Hộp "không tìm thấy" ở trang tìm sản phẩm */
.ht-not-found {
    padding: 32px;
    border: 1px solid #e3e9ef;
    border-radius: 12px;
    background: #f5f8fb;
}
.ht-not-found__title {
    margin-bottom: 8px;
    color: var(--ht-text);
    font-size: 24px;
}
.ht-not-found__text {
    max-width: 720px;
    margin-bottom: 24px;
    color: #444;
}

/* Bộ gợi ý */
.ht-help__keywords {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
}
.ht-help__keywords .ht-help__label {
    flex-basis: 100%;
}
.ht-help__cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.ht-help__cats li {
    margin: 0;
}
.ht-help__cats a {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    height: 100%;
    padding: 12px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
    color: var(--ht-text);
    transition: border-color .2s, box-shadow .2s;
}
.ht-help__cats a:hover {
    border-color: var(--ht-blue);
    box-shadow: 0 10px 24px rgba(0, 50, 100, .12);
}
.ht-help__cats img {
    grid-row: span 2;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}
.ht-help__cat-name {
    align-self: end;
    font-weight: 700;
    line-height: 1.3;
}
.ht-help__cat-count {
    align-self: start;
    color: #667;
    font-size: 13px;
}
.ht-help__cta {
    margin: 0;
}
.ht-help__phone {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

/* Trang 404 */
.ht-404 {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
}
.ht-404__head {
    max-width: 760px;
    margin: 0 auto 24px;
    text-align: center;
}
.ht-404__code {
    margin: 0;
    color: var(--ht-blue);
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    opacity: .14;
}
.ht-404__head .ht-eyebrow {
    justify-content: center;
    margin-top: -24px;
}
.ht-404__title {
    margin: 6px 0 12px;
    font-size: 34px;
    line-height: 1.2;
}
.ht-404__text {
    color: #444;
    font-size: 17px;
}
.ht-404__search {
    max-width: 640px;
    margin: 0 auto 40px;
}
.ht-404 .ht-help__keywords {
    justify-content: center;
}
.ht-404 .ht-help__keywords .ht-help__label,
.ht-404 .ht-help > .ht-help__label {
    text-align: center;
}
@media (max-width: 849px) {
    .ht-help__cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 549px) {
    .ht-help__cats {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .ht-not-found {
        padding: 20px 16px;
    }
    .ht-not-found__title {
        font-size: 20px;
    }
    .ht-404__code {
        font-size: 84px;
    }
    .ht-404__head .ht-eyebrow {
        margin-top: -16px;
    }
    .ht-404__title {
        font-size: 26px;
    }
}
.ht-404__search .searchform .button.icon {
    background-color: var(--ht-blue);
}
.ht-404__search .searchform .search-field {
    border-color: #c9d6e2;
}

/* ==========================================================================
   TRANG HỎI ĐÁP KỸ THUẬT, CHỌN QUẠT (23/10/2026, inc/help-pages.php): banner (.ht-page-hero), hỏi đáp mở / đóng
   (<details>), công cụ chọn quạt trong thẻ, cột phụ dính khi cuộn (dùng lại .ht-side-cta, .ht-quote-tip).
   ========================================================================== */
.ht-help-hero .ht-page-hero__lead p {
    margin: 0;
}
.ht-help-hero .ht-page-hero__lead a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ht-help-page {
    padding: 48px 0 56px;
    background: #f5f8fb;
}
.ht-help-page__aside .ht-side-cta {
    margin-bottom: 16px;
}
@media (min-width: 850px) {
    .ht-help-page__aside {
        position: sticky;
        top: 80px;
        align-self: flex-start;
    }
}

/* Hỏi đáp */
.ht-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ht-faq__item {
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.ht-faq__item[open] {
    border-color: #c9d9ea;
    box-shadow: 0 10px 24px rgba(0, 50, 100, .08);
}
.ht-faq__item summary {
    position: relative;
    padding: 18px 56px 18px 22px;
    cursor: pointer;
    list-style: none;
}
.ht-faq__item summary::-webkit-details-marker {
    display: none;
}
.ht-faq__item summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background: #eaf2fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230060aa' d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform .2s;
}
.ht-faq__item[open] summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230060aa' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
}
.ht-faq__item summary:hover .ht-faq__q,
.ht-faq__item summary:focus-visible .ht-faq__q {
    color: var(--ht-blue);
}
.ht-faq__q {
    margin: 0;
    color: var(--ht-text);
    font-size: 18px;
    line-height: 1.4;
}
.ht-faq__a {
    padding: 0 22px 6px;
    color: #444;
    font-size: 16px;
    line-height: 1.65;
}
.ht-faq__a > :first-child {
    padding-top: 14px;
    border-top: 1px solid #edf1f5;
}

/* Chọn quạt */
.ht-selector-card {
    padding: 28px;
    border: 1px solid #e3e9ef;
    border-radius: 12px;
    background: #fff;
}
.ht-selector-steps ol {
    margin: 8px 0 0 18px;
    color: #555;
    font-size: 15px;
}
.ht-selector-steps li {
    margin-bottom: 6px;
}
.ht-help-articles ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}
.ht-help-articles li {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f5;
}
.ht-help-articles li:last-child {
    border-bottom: 0;
}
.ht-help-articles a {
    color: var(--ht-text);
    font-weight: 600;
    line-height: 1.4;
}
.ht-help-articles a:hover {
    color: var(--ht-blue);
}
@media (max-width: 849px) {
    .ht-help-page {
        padding: 32px 0 40px;
    }
    .ht-help-page__aside {
        margin-top: 8px;
    }
}
@media (max-width: 549px) {
    .ht-faq__item summary {
        padding: 14px 48px 14px 16px;
    }
    .ht-faq__item summary::after {
        right: 14px;
    }
    .ht-faq__q {
        font-size: 16px;
    }
    .ht-faq__a {
        padding: 0 16px 4px;
        font-size: 15px;
    }
    .ht-selector-card {
        padding: 18px 16px;
    }
}

/* ==========================================================================
   TRANG CHÍNH SÁCH (23/10/2026, inc/policies.php + templates/single-policy.php): banner, cột trái danh sách chính sách
   + hộp liên hệ (dính khi cuộn), nội dung trong thẻ có mục lục, hộp "đang cập nhật", trang tổng hợp Trung tâm hỗ trợ.
   ========================================================================== */
.ht-policy {
    padding: 40px 0 56px;
    background: #f5f8fb;
}
@media (min-width: 850px) {
    .ht-policy__aside {
        position: sticky;
        top: 80px;
        align-self: flex-start;
    }
}
.ht-policy__nav {
    margin-bottom: 16px;
    padding: 8px 0;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    background: #fff;
}
.ht-policy__nav-title {
    margin: 8px 18px 6px;
    color: var(--ht-blue);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ht-policy__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ht-policy__nav li {
    margin: 0;
}
.ht-policy__nav a {
    display: block;
    padding: 9px 18px;
    border-left: 3px solid transparent;
    color: var(--ht-text);
    line-height: 1.4;
}
.ht-policy__nav a:hover {
    background: #f1f6fb;
    color: var(--ht-blue);
}
.ht-policy__nav a.is-active {
    border-left-color: var(--ht-blue);
    background: #eaf2fa;
    color: var(--ht-blue);
    font-weight: 700;
}
.ht-policy__email {
    margin: -4px 0 14px;
}
.ht-policy__email a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-all;
}
.ht-policy__card {
    padding: 32px 36px;
    border: 1px solid #e3e9ef;
    border-radius: 12px;
    background: #fff;
}
.ht-policy__content {
    color: #333;
    font-size: 16px;
    line-height: 1.7;
}
.ht-policy__content h2 {
    margin: 28px 0 10px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
    color: var(--ht-text);
    font-size: 22px;
    scroll-margin-top: 90px; /* thanh menu dính */
}
.ht-policy__content h2:first-child,
.ht-policy__content p:first-child + h2 {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}
.ht-policy__content a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ht-policy__toc {
    margin-bottom: 24px;
    padding: 18px 22px;
    border-radius: 10px;
    background: #f1f6fb;
}
.ht-policy__toc-title {
    margin: 0 0 8px;
    color: var(--ht-blue);
    font-weight: 700;
}
.ht-policy__toc ol {
    margin: 0 0 0 20px;
    columns: 2;
    column-gap: 32px;
}
.ht-policy__toc li {
    margin-bottom: 6px;
    break-inside: avoid;
}
.ht-policy__toc a {
    color: var(--ht-text);
}
.ht-policy__toc a:hover {
    color: var(--ht-blue);
}
.ht-policy-empty__title,
.ht-policy-hub__title {
    margin-bottom: 8px;
    font-size: 22px;
}
.ht-policy-empty p {
    max-width: 640px;
    color: #444;
}
.ht-policy__lead {
    margin-bottom: 20px;
    color: #444;
    font-size: 17px;
}
.ht-policy-hub__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.ht-policy-hub__list li {
    margin: 0;
}
.ht-policy-hub__list a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px 18px;
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    color: var(--ht-text);
    transition: border-color .2s, box-shadow .2s;
}
.ht-policy-hub__list a:hover {
    border-color: var(--ht-blue);
    box-shadow: 0 10px 24px rgba(0, 50, 100, .1);
}
.ht-policy-hub__name {
    font-size: 17px;
    font-weight: 700;
}
.ht-policy-hub__state {
    color: var(--ht-blue);
    font-size: 14px;
}
.ht-policy-hub__channels {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ht-policy-hub__channels li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
}
.ht-policy-hub__channels li:last-child {
    border-bottom: 0;
}
.ht-policy-hub__channels strong {
    color: #555;
    font-weight: 600;
}
@media (max-width: 849px) {
    .ht-policy {
        padding: 28px 0 40px;
    }
    .ht-policy__main {
        order: -1; /* nội dung trước, danh sách chính sách + liên hệ sau */
    }
    .ht-policy__card {
        padding: 24px 20px;
    }
}
@media (max-width: 549px) {
    .ht-policy__card {
        padding: 20px 16px;
    }
    .ht-policy__toc ol {
        columns: 1;
    }
    .ht-policy-hub__list {
        grid-template-columns: minmax(0, 1fr);
    }
    .ht-policy-hub__channels li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .ht-policy__content h2 {
        font-size: 19px;
    }
}
/* .page-wrapper của Flatsome đệm 30px trên / dưới: banner sát header, phần cuối sát footer như các trang Full Width. */
.ht-policy-page.page-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}
/* Nút của .ht-shop-cta__actions viết cho nền xanh; trong thẻ trắng dùng nút màu chính / viền xanh. */
.ht-policy-empty .ht-shop-cta__actions {
    justify-content: flex-start;
    margin-top: 16px;
}
.ht-policy-empty .ht-shop-cta__actions .button {
    border-color: var(--ht-blue);
    background: var(--ht-blue);
    color: #fff;
}
.ht-policy-empty .ht-shop-cta__actions .button.is-outline {
    background: transparent;
    color: var(--ht-blue);
}

/* ==========================================================================
   TRỢ NĂNG (23/10/2026, rà soát axe-core WCAG 2.1 A/AA): link nằm trong dòng chữ phải có gạch chân (không chỉ khác màu),
   tương phản chữ nhỏ ≥ 4,5:1, số "404" trang trí vẽ bằng ::before (không phải chữ của trang).
   ========================================================================== */
#footer .ht-footer-contact a,
#footer .absolute-footer a,
.ht-contact-list a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
/* Flatsome làm mờ khối chuyên mục (#c8161d thành #d3454a, 4,44:1 ở chữ 11px) */
.single-post .entry-header .entry-category {
    opacity: 1;
}
/* Số đếm trên chip đang chọn (chữ trắng mờ trên nền màu chính) */
.wvpj-projects .wvpj-filter.is-active span,
.ht-cat-chip.is-active .ht-cat-chip__count {
    opacity: .92;
}
.ht-404__code[data-code]::before {
    content: attr(data-code);
}
/* Tiêu đề thẻ của Flatsome đổi <h5> → <h3> (inc/a11y.php): giữ cỡ chữ / lề của <h5>. Độ ưu tiên thấp (:where) để các luật
   riêng (.ht-news-grid .post-title, .ht-cat-tiles .header-title…) vẫn thắng. */
:where(.box-text) h3.post-title,
:where(.box-text) h3.header-title {
    margin-top: .1em;
    margin-bottom: .1em;
    line-height: 1.3;
}
:where(.box-text) h3.header-title {
    font-size: 1em;
}
/* Viền focus khi dùng bàn phím (:focus-visible, chuột bấm không hiện). Flatsome đặt outline 0 cho menu, thanh trên cùng,
   ô nhập và slider. Nền tối (thanh trên, thanh menu, footer, hộp màu chính, banner) dùng viền trắng. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.button:focus-visible,
.slider:focus-visible,
[tabindex]:focus-visible,
.nav > li > a:focus-visible,
.header-top a:focus-visible {
    outline: 2px solid var(--ht-blue);
    outline-offset: 2px;
}
/* Flatsome: input[type=text]:focus { outline: 0 } (độ ưu tiên 0,2,1), nên dùng :not([type=hidden]) để ngang bằng và thắng nhờ
   nạp sau. */
input:not([type=hidden]):focus-visible,
select:not([multiple]):focus-visible,
textarea:not([hidden]):focus-visible {
    outline: 2px solid var(--ht-blue);
    outline-offset: 1px;
}
.header-top a:focus-visible,
.header-bottom .nav > li > a:focus-visible,
.header-bottom a:focus-visible,
#footer a:focus-visible,
#footer input:focus-visible,
#footer .button:focus-visible,
.ht-side-cta a:focus-visible,
.ht-products__cta a:focus-visible,
.ht-booking a:focus-visible,
.dark a:focus-visible,
.dark .button:focus-visible {
    outline-color: #fff;
}
/* Trung tâm hỗ trợ có nội dung: danh sách chính sách + kênh hỗ trợ ở thẻ thứ hai bên dưới */
.ht-policy-hub--after {
    margin-top: 16px;
}