/* =========================================================
   HongHa UI 2026 — Dành cho doanh nghiệp (TRANG DOANH NGHIỆP.html)
   ---------------------------------------------------------
   THIẾT KẾ LẠI phiên 40 (2026-09-15). Bản phiên 39 mượn khung và lớp .hh-service-*
   của trang Sửa chữa – Bảo hành nên người dùng nhận xét "gần như nhái lại trang sửa
   chữa". Từ bản này:
     - KHÔNG dùng lớp .hh-service-* và trang KHÔNG nạp CSS trang dịch vụ
       (script dựng trang gỡ cả 5 tệp hh-service-*.css khỏi <head>).
     - Ngôn ngữ riêng kiểu landing page khách hàng doanh nghiệp: nền mực xanh-than có
       lưới kẻ mờ + mảng đỏ thương hiệu #D71920 + điểm vàng (cùng dải màu nút
       "SĂN DEAL NGAY" ở trang chủ); thẻ sản phẩm NẰM NGANG có chip đặc điểm + ô số
       lượng; quy trình dạng mũi tên; phiếu yêu cầu báo giá có bảng thiết bị + tạm tính.
   Cỡ chữ trong thẻ sản phẩm theo thang chung hệ thống (tên 14px, giá 17px/700, giá
   cũ 12px, nhãn 11–12px, tab 14px) — ràng buộc người dùng đã chốt.
   Mọi lớp bọc trong .hh-biz; reset dùng :where() để độ ưu tiên chỉ (0,1,0) — quy tắc
   thành phần viết sau thắng được (bài học 14 trong CLAUDE.md).
========================================================= */

/* ---------- 0. KHUNG TRANG (thay phần toàn cục trước đây nằm trong CSS dịch vụ) ---------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: #f4f5f8;
}

#divallmaincontentv1 {
    width: 100%;
    max-width: none;
    padding: 0;
    background: transparent;
}

#divallmaincontentv1 > #maincontentbody,
.hh-hero,
[data-test-id="pinterest-save-button"] {
    display: none !important;
}

.hh-biz {
    --biz-muc: #0f1320;
    --biz-muc-2: #1b2133;
    --biz-do: #d71920;
    --biz-do-grad: linear-gradient(135deg, #e3232a 0%, #b3121a 100%);
    --biz-vang: #ffc61f;
    --biz-vang-grad: linear-gradient(180deg, #ffe56e 0%, #ffc61f 55%, #f5a900 100%);
    --biz-chu: #1b1f2a;
    --biz-xam: #667085;
    --biz-vien: #e4e7ee;
    --biz-nen: #f4f5f8;
    --biz-luoi:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px;
    color: var(--biz-chu);
    font-family: var(--hh-font, "Roboto", "Segoe UI", Arial, sans-serif);
    font-size: 14px;
    line-height: 1.55;
    overflow: hidden;
}

.hh-biz,
.hh-biz *,
.hh-biz *::before,
.hh-biz *::after {
    box-sizing: border-box;
}

.hh-biz :where(h1, h2, h3, p, ul, ol, figure, fieldset, legend) {
    margin: 0;
    padding: 0;
}

.hh-biz :where(ul, ol) {
    list-style: none;
}

.hh-biz :where(a) {
    text-decoration: none;
}

.hh-biz :where(button, input, select, textarea) {
    font-family: inherit;
}

.hh-biz-wrap {
    width: min(calc(100% - 40px), 1200px);
    margin-inline: auto;
}

/* nền tối dùng chung: mực xanh-than + lưới kẻ */
.hh-biz-toi {
    color: #fff;
    background: var(--biz-luoi), var(--biz-muc);
}

/* ---------- 1. ĐƯỜNG DẪN ---------- */
.hh-biz-crumb {
    background: #fff;
    border-bottom: 1px solid var(--biz-vien);
}

.hh-biz-crumb .hh-biz-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    color: var(--biz-xam);
    font-size: 13px;
}

.hh-biz-crumb a {
    color: var(--biz-xam);
}

.hh-biz-crumb a:hover {
    color: var(--biz-do);
}

.hh-biz-crumb i {
    color: #b0b6c3;
    font-size: 10px;
}

.hh-biz-crumb span {
    color: var(--biz-chu);
    font-weight: 500;
}

/* ---------- 2. TIÊU ĐỀ KHỐI ---------- */
.hh-biz-tieude {
    margin-bottom: 28px;
    text-align: center;
}

.hh-biz-tieude small {
    display: inline-block;
    color: var(--biz-vang);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hh-biz-tieude h2 {
    margin-top: 6px;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

.hh-biz-tieude p {
    max-width: 720px;
    margin: 8px auto 0;
    color: #aeb5c3;
    font-size: 14px;
}

.hh-biz-tieude::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, var(--biz-do), var(--biz-vang));
    border-radius: 4px;
}

.hh-biz-tieude--sang small {
    color: var(--biz-do);
}

.hh-biz-tieude--sang h2 {
    color: var(--biz-chu);
}

.hh-biz-tieude--sang p {
    color: var(--biz-xam);
}

/* ---------- 3. PHẦN ĐẦU (HERO) ---------- */
.hh-biz-hero {
    position: relative;
    isolation: isolate;
    padding: 46px 0 54px;
    color: #fff;
    background:
        var(--biz-luoi),
        radial-gradient(760px 380px at 20% 0%, rgba(215, 25, 32, .22), transparent 65%),
        linear-gradient(165deg, #161c2e 0%, #0f1320 60%, #0c0f1a 100%);
}

/* mảng đỏ thương hiệu vát chéo phía sau cụm thiết bị */
.hh-biz-hero::before,
.hh-biz-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}

.hh-biz-hero::before {
    right: -2%;
    width: 50%;
    background: rgba(215, 25, 32, .2);
}

.hh-biz-hero::after {
    right: -6%;
    width: 44%;
    background: linear-gradient(140deg, #e3232a 0%, #b3121a 55%, #7d0b12 100%);
}

.hh-biz-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    align-items: center;
    gap: 40px;
}

.hh-biz-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 32px;
    padding: 0 14px 0 4px;
    color: #e9ecf3;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hh-biz-badge i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #fff;
    background: var(--biz-do);
    border-radius: 50%;
    font-size: 11px;
    letter-spacing: 0;
}

.hh-biz-h1 {
    margin-top: 18px !important;
    color: #fff;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.005em;
    text-transform: uppercase;
}

.hh-biz-h1 span {
    display: block;
    margin-bottom: 10px;
    color: #c9cfdb;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.hh-biz-h1 strong {
    display: block;
    color: var(--biz-vang);
    font-weight: 900;
    background: var(--biz-vang-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hh-biz-lead {
    max-width: 580px;
    margin-top: 16px !important;
    color: #c3c9d6;
    font-size: 15px;
    line-height: 1.65;
}

.hh-biz-offers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 600px;
    margin-top: 24px;
}

.hh-biz-offer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 60px;
    padding: 9px 14px 9px 9px;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.hh-biz-offer:hover {
    color: #fff;
    background: rgba(215, 25, 32, .22);
    border-color: rgba(255, 120, 120, .5);
    transform: translateY(-2px);
}

.hh-biz-offer-ic {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    color: #fff;
    background: var(--biz-do-grad);
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(215, 25, 32, .35);
    font-size: 17px;
}

.hh-biz-offer-chu {
    min-width: 0;
}

.hh-biz-offer strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hh-biz-offer small {
    display: block;
    margin-top: 2px;
    color: #aeb5c3;
    font-size: 12px;
    line-height: 1.35;
}

.hh-biz-offer small b {
    color: var(--biz-vang);
    font-size: 14px;
    font-weight: 900;
}

.hh-biz-offer-mui {
    margin-left: auto;
    color: #8a92a3;
    font-size: 11px;
}

.hh-biz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.hh-biz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}

.hh-biz-btn--vang {
    color: #b3120e;
    background: var(--biz-vang-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 20px rgba(245, 169, 0, .25);
    text-transform: uppercase;
}

.hh-biz-btn--vang:hover {
    color: #b3120e;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.hh-biz-btn--vien {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .38);
}

.hh-biz-btn--vien:hover {
    color: var(--biz-do);
    background: #fff;
}

.hh-biz-btn--do {
    color: #fff;
    background: var(--biz-do-grad);
    box-shadow: 0 8px 20px rgba(215, 25, 32, .28);
}

.hh-biz-btn--do:hover {
    color: #fff;
    filter: brightness(1.07);
}

/* ---------- 3b. KHUNG BANNER PHẦN ĐẦU — 2 banner tự chuyển vòng lặp
   (thay cụm ảnh thiết bị cũ). Khung giữ ĐÚNG tỉ lệ ảnh banner nên không xén ---------- */
.hh-biz-bn {
    min-width: 0;
}

.hh-biz-bn-khung {
    position: relative;
    aspect-ratio: 1369 / 1149;
    overflow: hidden;
    background: var(--biz-muc-2);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.hh-biz-bn-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}

.hh-biz-bn-slide.is-hien {
    opacity: 1;
    visibility: visible;
}

.hh-biz-bn-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .hh-biz-bn-slide {
        transition: none;
    }
}

.hh-biz-bn-cham {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.hh-biz-bn-cham button {
    width: 26px;
    height: 6px;
    padding: 0;
    background: rgba(255, 255, 255, .28);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.hh-biz-bn-cham button:hover {
    background: rgba(255, 255, 255, .55);
}

.hh-biz-bn-cham button.is-chon {
    width: 40px;
    background: var(--biz-vang);
}

.hh-biz-bn-cham button:focus-visible {
    outline: 2px solid var(--biz-vang);
    outline-offset: 3px;
}

/* ---------- 4. VÌ SAO CHỌN HỒNG HÀ ---------- */
.hh-biz-values {
    padding: 50px 0 40px;
}

.hh-biz-values-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.hh-biz-value {
    position: relative;
    overflow: hidden;
    padding: 24px 16px 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    transition: border-color .2s ease, transform .2s ease;
}

.hh-biz-value:hover {
    border-color: rgba(255, 110, 115, .5);
    transform: translateY(-3px);
}

.hh-biz-value::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--biz-do), #ff6b70);
}

.hh-biz-value > i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    color: #ff6b70;
    background: rgba(215, 25, 32, .16);
    border: 1px solid rgba(255, 90, 95, .35);
    border-radius: 50%;
    font-size: 21px;
}

.hh-biz-value h3 {
    color: var(--biz-vang);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
}

.hh-biz-value p {
    margin-top: 6px;
    color: #b9c0cd;
    font-size: 13px;
    line-height: 1.5;
}

/* dải thương hiệu: từ phiên 45 là LƯỚI LOGO (ảnh cắt từ bộ logo hãng người dùng gửi),
   mỗi logo nằm trong ô trắng vì logo nhiều màu, nền tối sẽ nuốt mất nét chữ */
.hh-biz-brands {
    margin-top: 20px;
    padding: 18px 20px 20px;
    text-align: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
}

.hh-biz-brands > span {
    display: block;
    margin-bottom: 14px;
    color: var(--biz-vang);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hh-biz-logo-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 8px;
}

.hh-biz-logo-grid li {
    display: grid;
    place-items: center;
    aspect-ratio: 240 / 88;
    padding: 6px 8px;
    background: #fff;
    border-radius: 8px;
    transition: transform .2s ease;
}
.hh-biz-logo-grid li img {
    width: 105px;
    height: 38px;
    object-fit: contain;
    display: block;
}
.hh-biz-logo-grid li:hover {
    transform: translateY(-2px);
}

.hh-biz-logo-grid img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---------- 5. SẢN PHẨM ƯU ĐÃI: tab + thẻ ngang ---------- */
.hh-biz-deals {
    padding: 20px 0 64px;
}

.hh-biz-khung {
    overflow: hidden;
    padding-bottom: 22px;
    color: var(--biz-chu);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.hh-biz-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: #f3f4f7;
    border-bottom: 1px solid var(--biz-vien);
    scrollbar-width: none;
}

.hh-biz-tabs::-webkit-scrollbar {
    display: none;
}

.hh-biz-tab {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 72px;
    padding: 10px 8px;
    color: var(--biz-chu);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--biz-vien);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.hh-biz-tab:last-child {
    border-right: 0;
}

.hh-biz-tab-ten {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.hh-biz-tab-ten i {
    color: var(--biz-do);
    font-size: 15px;
}

.hh-biz-tab-giam {
    color: var(--biz-xam);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
}

.hh-biz-tab-giam b {
    color: var(--biz-do);
    font-weight: 800;
}

.hh-biz-tab:hover {
    background: #fff;
}

.hh-biz-tab[aria-selected="true"] {
    color: #fff;
    background: var(--biz-do-grad);
}

.hh-biz-tab[aria-selected="true"] .hh-biz-tab-ten i,
.hh-biz-tab[aria-selected="true"] .hh-biz-tab-giam {
    color: #fff;
}

.hh-biz-tab[aria-selected="true"] .hh-biz-tab-giam b {
    color: var(--biz-vang);
}

.hh-biz-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #c0151d;
    transform: translateX(-50%) rotate(45deg);
}

.hh-biz-tab:focus-visible {
    outline: 2px solid var(--biz-vang);
    outline-offset: -4px;
}

.hh-biz-panel {
    padding: 24px 22px 0;
}

.hh-biz-panel[hidden] {
    display: none;
}

.hh-biz-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hh-biz-sp {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 14px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hh-biz-sp:hover {
    border-color: #f0b3b6;
    box-shadow: 0 12px 26px rgba(16, 24, 40, .1);
    transform: translateY(-2px);
}

.hh-biz-sp-anh {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 36px 14px 40px;
    background: #fff;
}

.hh-biz-sp-anh img {
    display: block;
    max-width: 100%;
    max-height: 146px;
    object-fit: contain;
    transition: transform .35s ease;
}

.hh-biz-sp:hover .hh-biz-sp-anh img {
    transform: scale(1.04);
}

.hh-biz-sp-hang {
    position: absolute;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    overflow: hidden;
    padding: 2px 8px;
    color: #fff;
    background: var(--biz-muc);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 16px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.hh-biz-sp-tietkiem {
    position: absolute;
    left: 0;
    bottom: 12px;
    padding: 3px 10px 3px 12px;
    color: #8a1010;
    background: var(--biz-vang-grad);
    border-radius: 0 999px 999px 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

.hh-biz-sp-tt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px;
    background: #f8f9fb;
    border-left: 1px solid var(--biz-vien);
}

/* tên cắt 2 dòng nằm trong khối bọc riêng — không để phần tử -webkit-line-clamp làm
   con trực tiếp của flex (bài học 2 trong CLAUDE.md) */
.hh-biz-sp-ten-wrap {
    min-height: 40px;
}

.hh-biz .hh-biz-sp-ten {
    display: -webkit-box;
    overflow: hidden;
    color: var(--biz-chu);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hh-biz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.hh-biz-chips li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    color: #475063;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.hh-biz-chips li i {
    color: #98a1b2;
    font-size: 10px;
}

.hh-biz-sp-gia {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
    margin-top: 10px;
}

.hh-biz-sp-gia small {
    flex-basis: 100%;
    color: var(--biz-xam);
    font-size: 12px;
    line-height: 16px;
}

.hh-biz-sp-gia strong {
    color: var(--biz-do);
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
}

.hh-biz-sp-gia del {
    color: #98a1b2;
    font-size: 12px;
}

.hh-biz-sp-gia em {
    padding: 0 6px;
    color: #fff;
    background: var(--biz-do);
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.hh-biz-sp-gia--lien-he strong {
    font-size: 15px;
}

.hh-biz-sp-mua {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.hh-biz-sl {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 36px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d5dae3;
    border-radius: 9px;
}

.hh-biz-sl button {
    display: grid;
    place-items: center;
    width: 30px;
    padding: 0;
    color: #475063;
    background: transparent;
    border: 0;
    font-size: 11px;
    cursor: pointer;
}

.hh-biz-sl button:hover {
    color: var(--biz-do);
    background: #fff5f5;
}

.hh-biz .hh-biz-sl input {
    width: 38px;
    height: auto;
    min-height: 0;
    padding: 0;
    color: var(--biz-chu);
    background: #fff;
    border: 0;
    border-inline: 1px solid var(--biz-vien);
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}

.hh-biz .hh-biz-sl input::-webkit-outer-spin-button,
.hh-biz .hh-biz-sl input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.hh-biz-them {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 7px;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--biz-do-grad);
    border: 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s ease, background .2s ease;
}

.hh-biz-them:hover {
    filter: brightness(1.07);
}

.hh-biz-them.is-added {
    background: var(--hh-green, #00a650);
}

/* nhãn nút: bản đầy đủ trên máy tính, bản ngắn ("Báo giá" / "Đã thêm") trên mobile */
.hh-biz-chi-mb {
    display: none;
}

.hh-biz-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 12px 16px;
    color: #6b4d00;
    background: #fff8e1;
    border: 1px dashed #efc55a;
    border-radius: 12px;
    font-size: 13px;
}

.hh-biz-panel-foot p i {
    margin-right: 6px;
    color: #d99a00;
}

.hh-biz-panel-foot a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--biz-do);
    font-weight: 700;
    white-space: nowrap;
}

.hh-biz-panel-foot a:hover {
    color: #a3111a;
}

/* ---------- 6. GIẢI PHÁP THEO MÔ HÌNH ---------- */
.hh-biz-sang {
    padding: 60px 0;
    background: var(--biz-nen);
}

.hh-biz-trang {
    padding: 60px 0;
    background: #fff;
}

.hh-biz-mh-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hh-biz-mh {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 16px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.hh-biz-mh:hover {
    border-color: #f0b3b6;
    box-shadow: 0 16px 30px rgba(16, 24, 40, .1);
    transform: translateY(-3px);
}

.hh-biz-mh-dau {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 46px;
    overflow: hidden;
    color: #fff;
    background: var(--biz-luoi), linear-gradient(135deg, var(--biz-muc-2), var(--biz-muc));
}

.hh-biz-mh-dau::after {
    content: "";
    position: absolute;
    top: -46px;
    right: -34px;
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(215, 25, 32, .6), transparent 70%);
    border-radius: 50%;
}

.hh-biz-mh-ic {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    height: 44px;
    color: #fff;
    background: var(--biz-do-grad);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(215, 25, 32, .35);
    font-size: 19px;
}

.hh-biz-mh-dau div {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.hh-biz-mh-dau h3 {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.hh-biz-mh-dau small {
    display: block;
    margin-top: 2px;
    color: #aeb5c3;
    font-size: 12px;
}

.hh-biz-mh-anh {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: -32px 18px 0;
}

.hh-biz-mh-anh span {
    display: grid;
    place-items: center;
    height: 76px;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(16, 24, 40, .08);
}

.hh-biz-mh-anh img {
    display: block;
    max-width: 84%;
    max-height: 60px;
    object-fit: contain;
}

.hh-biz-mh-than {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 14px 18px 18px;
}

.hh-biz-mh-than p {
    color: var(--biz-xam);
    font-size: 13px;
    line-height: 1.55;
}

.hh-biz-mh-than ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.hh-biz-mh-than li {
    padding: 3px 9px;
    color: #475063;
    background: #f3f4f7;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.hh-biz-mh-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 14px;
    color: var(--biz-do);
    font-size: 13px;
    font-weight: 700;
}

.hh-biz-mh-link:hover {
    color: #a3111a;
}

.hh-biz-mh-link i {
    font-size: 11px;
    transition: transform .2s ease;
}

.hh-biz-mh-link:hover i {
    transform: translateX(3px);
}

/* ---------- 6b. DỰ ÁN TIÊU BIỂU (ảnh cắt từ brochure Hồng Hà, GIAO-DIEN/anh/du-an/)
   Đặt giữa "Giải pháp theo mô hình" và "Quy trình": người đọc xem giải pháp cho mô hình
   của mình xong thì thấy ngay dự án thật đã làm, rồi mới tới quy trình – báo giá.
   Thẻ trắng nổi trên nền tối (cùng lối với khung bảng giá) ---------- */
.hh-biz-duan {
    padding: 56px 0 64px;
}

.hh-biz-kh {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 22px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
}

.hh-biz-kh > span {
    flex: 0 0 auto;
    color: #8a92a3;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hh-biz-kh ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hh-biz-kh li {
    padding: 5px 12px;
    color: #dfe3ea;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.hh-biz-da-noibat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.hh-biz-da-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.hh-biz-da {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hh-biz-da:hover {
    box-shadow: 0 26px 50px rgba(0, 0, 0, .42);
    transform: translateY(-3px);
}

.hh-biz-da-anh {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--biz-muc);
}

.hh-biz-da--lon .hh-biz-da-anh {
    aspect-ratio: 16 / 9;
}

/* :not(...) BẮT BUỘC: thiếu nó thì quy tắc này (0,1,1) thắng .hh-biz-da-phu (0,1,0),
   ảnh phụ bị kéo phủ kín khung và mất hẳn ảnh công trình (bài học 14) */
.hh-biz-da-anh > img:not(.hh-biz-da-phu) {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.hh-biz-da:hover .hh-biz-da-anh > img:not(.hh-biz-da-phu) {
    transform: scale(1.05);
}

.hh-biz-da-anh::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64px;
    background: linear-gradient(transparent, rgba(10, 12, 20, .5));
}

.hh-biz-da-nhan {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    color: #fff;
    background: var(--biz-do-grad);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(215, 25, 32, .35);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}

/* ảnh thi công chồng góc dưới – phải, chỉ có ở 2 thẻ lớn */
.hh-biz-da-phu {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 14px;
    width: 158px;
    height: 104px;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 10px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .38);
}

.hh-biz-da-tt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px 18px 18px;
}

.hh-biz-da-tt h3 {
    color: var(--biz-chu);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.hh-biz-da--lon .hh-biz-da-tt h3 {
    font-size: 18px;
}

.hh-biz-da-dc {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 5px;
    color: var(--biz-xam);
    font-size: 12px;
    line-height: 1.45;
}

.hh-biz-da-dc i {
    margin-top: 2px;
    color: var(--biz-do);
}

.hh-biz-da-tt > p:not(.hh-biz-da-dc) {
    margin-top: 9px;
    color: #566074;
    font-size: 13px;
    line-height: 1.55;
}

.hh-biz-da-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
}

.hh-biz-da-tag li {
    padding: 3px 9px;
    color: #475063;
    background: #f3f4f7;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* ---------- 6c. SƠ ĐỒ KHÁCH HÀNG (ảnh) + THÀNH TỰU (bằng khen tiêu biểu) ----------
   Ảnh sơ đồ rất rộng (3714×651): ở màn hẹp chữ trong ảnh không đọc nổi ⇒ dưới 768px
   thay ảnh bằng danh sách 6 nhóm khách hàng đúng nội dung ảnh. ---------- */
.hh-biz-ht {
    margin: 0;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 16px;
}

.hh-biz-ht img {
    display: block;
    width: 100%;
    height: auto;
}

.hh-biz-ht-ds {
    display: none;
}

.hh-biz-tt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 14px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hh-biz-tt:hover {
    border-color: #f0b3b6;
    box-shadow: 0 14px 28px rgba(16, 24, 40, .12);
    transform: translateY(-3px);
}

.hh-biz-tt figcaption {
    padding: 10px 12px 13px;
    text-align: center;
}

.hh-biz-tt b {
    display: block;
    color: var(--biz-chu);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.hh-biz-tt small {
    display: block;
    margin-top: 3px;
    color: var(--biz-xam);
    font-size: 12px;
}

/* ---------- 7. QUY TRÌNH: dải đỏ + mũi tên ---------- */
.hh-biz-quytrinh {
    padding: 56px 0 60px;
    color: #fff;
    background:
        radial-gradient(700px 300px at 12% 0%, rgba(255, 255, 255, .14), transparent 60%),
        linear-gradient(135deg, #d71920 0%, #a3111a 70%, #7d0b12 100%);
}

.hh-biz-quytrinh .hh-biz-tieude small {
    color: #ffe08a;
}

.hh-biz-quytrinh .hh-biz-tieude p {
    color: #ffd9da;
}

.hh-biz-quytrinh .hh-biz-tieude::after {
    background: linear-gradient(90deg, #fff, var(--biz-vang));
}

.hh-biz-buoc {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hh-biz-buoc li {
    position: relative;
    min-height: 150px;
    margin-right: -18px;
    padding: 20px 34px 20px 46px;
    color: var(--biz-chu);
    background: #fff;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);
}

.hh-biz-buoc li:nth-child(even) {
    background: #fff4f4;
}

.hh-biz-buoc li:first-child {
    padding-left: 24px;
    border-radius: 12px 0 0 12px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}

.hh-biz-buoc li:last-child {
    margin-right: 0;
}

.hh-biz-buoc b {
    display: block;
    color: var(--biz-do);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.hh-biz-buoc h3 {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.hh-biz-buoc p {
    margin-top: 6px;
    color: var(--biz-xam);
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- 8. PHIẾU YÊU CẦU BÁO GIÁ ---------- */
.hh-biz-baogia {
    padding: 60px 0 64px;
}

.hh-biz-bg-grid {
    /*display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);*/
    align-items: start;
    gap: 20px;
}

.hh-biz-the {
    min-width: 0;
    color: var(--biz-chu);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.hh-biz-the-dau {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--biz-vien);
}

.hh-biz-the-dau > i {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    color: var(--biz-do);
    background: #fff1f1;
    border-radius: 11px;
    font-size: 17px;
}

.hh-biz-the-dau h3 {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.hh-biz-the-dau small {
    display: block;
    color: var(--biz-xam);
    font-size: 12px;
    font-weight: 400;
}

.hh-biz-dem {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    margin-left: auto;
    padding: 0 8px;
    color: #fff;
    background: var(--biz-do);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.hh-biz-the-than {
    padding: 18px 22px 22px;
}

.hh-biz-ds {
    display: grid;
    gap: 8px;
    max-height: 396px;
    overflow-y: auto;
}

.hh-biz-ds-dong {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 30px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 8px;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 12px;
}

.hh-biz-ds-dong img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.hh-biz-ds-tt {
    min-width: 0;
}

.hh-biz .hh-biz-ds-ten {
    display: -webkit-box;
    overflow: hidden;
    color: var(--biz-chu);
    font-size: 13px;
    line-height: 18px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hh-biz .hh-biz-ds-gia {
    margin-top: 2px;
    color: var(--biz-xam);
    font-size: 12px;
}

.hh-biz-ds-gia b {
    color: var(--biz-do);
    font-weight: 700;
}

.hh-biz-ds .hh-biz-sl {
    height: 30px;
}

.hh-biz-ds .hh-biz-sl button {
    width: 26px;
}

.hh-biz .hh-biz-ds .hh-biz-sl input {
    width: 34px;
    font-size: 13px;
}

.hh-biz-ds-bo {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #8a93a0;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 8px;
    cursor: pointer;
}

.hh-biz-ds-bo:hover {
    color: var(--biz-do);
    border-color: #f0b3b6;
}

.hh-biz-ds-rong {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 18px;
    color: var(--biz-xam);
    border: 1px dashed #d5dae3;
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
}

.hh-biz-ds-rong > i {
    color: #c5cad4;
    font-size: 30px;
}

.hh-biz-ds-rong a {
    color: var(--biz-do);
    font-weight: 700;
}

.hh-biz-tong {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding: 14px 16px;
    background: #f8f9fb;
    border-radius: 12px;
    font-size: 13px;
}

.hh-biz-tong p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.hh-biz-tong strong {
    color: var(--biz-do);
    font-size: 17px;
    font-weight: 800;
}

.hh-biz-tong small {
    color: var(--biz-xam);
    font-size: 12px;
    line-height: 1.45;
}

.hh-biz-hotline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    color: #fff;
    background: var(--biz-luoi), linear-gradient(135deg, var(--biz-muc-2), var(--biz-muc));
    border-radius: 12px;
}

.hh-biz-hotline > i {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    color: #fff;
    background: var(--biz-do-grad);
    border-radius: 50%;
    font-size: 17px;
}

.hh-biz-hotline span {
    display: block;
    color: #aeb5c3;
    font-size: 12px;
}

.hh-biz-hotline a {
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.25;
}

.hh-biz-hotline a:hover {
    color: var(--biz-vang);
}

.hh-biz-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.hh-biz-truong {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    border: 0;
}

.hh-biz-truong--full {
    grid-column: 1 / -1;
}

.hh-biz-truong > label,
.hh-biz-nhan {
    padding: 0;
    color: #3a404b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.hh-biz-truong > label b,
.hh-biz-nhan b {
    color: var(--biz-do);
}

.hh-biz-truong :is(input[type="text"], input[type="tel"], input[type="email"]),
.hh-biz-truong select,
.hh-biz-truong textarea {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    color: var(--biz-chu);
    background: #fff;
    border: 1px solid #d5dae3;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hh-biz-truong textarea {
    height: auto;
    min-height: 78px;
    padding: 10px 12px;
    resize: vertical;
}

.hh-biz-truong :is(input, select, textarea):focus {
    border-color: var(--biz-do);
    box-shadow: 0 0 0 3px rgba(215, 25, 32, .1);
}

.hh-biz-truong.is-loi :is(input[type="text"], input[type="tel"], input[type="email"]) {
    background: #fff8f8;
    border-color: var(--biz-do);
}

.hh-biz-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hh-biz-radio label {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.hh-biz-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hh-biz-radio span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    color: #475063;
    background: #fff;
    border: 1px solid #d5dae3;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.hh-biz-radio input:checked + span {
    color: var(--biz-do);
    background: #fff5f5;
    border-color: var(--biz-do);
}

.hh-biz-radio input:focus-visible + span {
    outline: 2px solid var(--biz-do);
    outline-offset: 2px;
}

/* (0,2,0) — phải thắng .hh-biz-truong > label (0,1,1) đang ép chữ đậm 700 */
.hh-biz-truong > .hh-biz-tick {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #475063;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
}

.hh-biz-truong > .hh-biz-tick + .hh-biz-tick {
    margin-top: 4px;
}

.hh-biz-tick b {
    color: var(--biz-do);
}

legend.hh-biz-nhan {
    margin-bottom: 8px;
}

.hh-biz-tick input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--biz-do);
}

.hh-biz-tick.is-loi {
    color: var(--biz-do);
}

.hh-biz-gui {
    width: 100%;
    height: 50px;
    margin-top: 16px;
}

.hh-biz-note {
    margin-top: 10px !important;
    color: var(--biz-xam);
    font-size: 12px;
    text-align: center;
}

.hh-biz-feedback {
    display: none;
    margin-top: 12px !important;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.5;
}

.hh-biz-feedback.is-visible {
    display: block;
}

.hh-biz-feedback--loi {
    color: #9b1c1f;
    background: #fff1f1;
}

.hh-biz-feedback--ok {
    color: #7a5400;
    background: #fff7dd;
}

.hh-biz-feedback a {
    color: inherit;
    font-weight: 800;
}

/* ---------- 9. LIÊN HỆ BÁN HÀNG DOANH NGHIỆP ---------- */
.hh-biz-lienhe-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hh-biz-cn {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 16px;
}

.hh-biz-cn-vung {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 16px 14px;
    color: #fff;
    background: linear-gradient(160deg, #e3232a, #a3111a);
}

.hh-biz-cn--online .hh-biz-cn-vung {
    background: var(--biz-luoi), linear-gradient(160deg, var(--biz-muc-2), var(--biz-muc));
}

.hh-biz-cn-vung i {
    margin-bottom: 4px;
    font-size: 20px;
    opacity: .9;
}

.hh-biz-cn-vung small {
    font-size: 11px;
    letter-spacing: .08em;
    opacity: .85;
    text-transform: uppercase;
}

.hh-biz-cn-vung strong {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.hh-biz-cn-tt {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px;
    color: #475063;
    font-size: 13px;
    line-height: 1.5;
}

.hh-biz-cn-tt p {
    display: flex;
    gap: 9px;
    min-width: 0;
}

.hh-biz-cn-tt p i {
    flex: 0 0 14px;
    margin-top: 3px;
    color: var(--biz-do);
    text-align: center;
}

.hh-biz-cn-tt a {
    color: var(--biz-chu);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.hh-biz-cn-tt a:hover {
    color: var(--biz-do);
}

/* ---------- 10. HỎI ĐÁP ---------- */
.hh-biz-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

.hh-biz-faq details {
    background: #fff;
    border: 1px solid var(--biz-vien);
    border-radius: 12px;
    transition: border-color .2s ease;
}

.hh-biz-faq details[open] {
    border-color: #f0b3b6;
}

.hh-biz-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    color: var(--biz-chu);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.hh-biz-faq summary::-webkit-details-marker {
    display: none;
}

.hh-biz-faq summary::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    height: 26px;
    color: var(--biz-do);
    background: #fff1f1;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.hh-biz-faq details[open] summary::after {
    content: "\2212";
    color: #fff;
    background: var(--biz-do);
}

.hh-biz-faq details p {
    padding: 0 18px 16px;
    color: #566074;
    font-size: 13px;
    line-height: 1.6;
}

.hh-biz-faq a {
    color: var(--biz-do);
    font-weight: 700;
}

/* ---------- 11. NÚT ĐẾM BÁO GIÁ — góc TRÁI dưới, không đè nút gọi / Zalo bên phải ---------- */
.hh-biz-fab {
    position: fixed;
    z-index: 950;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 16px 0 18px;
    color: #fff;
    background: var(--biz-do-grad);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(215, 25, 32, .35);
    font-size: 14px;
    font-weight: 800;
}

.hh-biz-fab:hover {
    color: #fff;
}

.hh-biz-fab[hidden] {
    display: none;
}

.hh-biz-fab b {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    color: var(--biz-do);
    background: #fff;
    border-radius: 999px;
    font-size: 12px;
}

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width: 1199px) {
    .hh-biz-hero-grid {
        grid-template-columns: minmax(0, 1fr) 440px;
        gap: 28px;
    }

    .hh-biz-h1 {
        font-size: 36px;
    }

    .hh-biz-values-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .hh-biz-value {
        grid-column: span 2;
    }

    .hh-biz-value:nth-child(4),
    .hh-biz-value:nth-child(5) {
        grid-column: span 3;
    }

    .hh-biz-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hh-biz-tab:nth-child(3) {
        border-right: 0;
    }

    .hh-biz-tab:nth-child(-n+3) {
        border-bottom: 1px solid var(--biz-vien);
    }

    .hh-biz-tab[aria-selected="true"]::after {
        display: none;
    }

    .hh-biz-da-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 1024px: thẻ 2 cột chỉ rộng ~462px, ảnh 200px ⇒ nút "Thêm vào báo giá" còn 122px,
       chữ tràn ra ngoài nút (chụp headless 1024px) ⇒ thu cột ảnh */
    .hh-biz-sp {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .hh-biz-logo-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .hh-biz-buoc li {
        padding-right: 30px;
        padding-left: 40px;
    }
}

@media (max-width: 991px) {
    .hh-biz-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-biz-hero::before,
    .hh-biz-hero::after {
        top: auto;
        height: 36%;
    }

    .hh-biz-hero::before {
        width: 100%;
    }

    .hh-biz-hero::after {
        width: 92%;
    }

    .hh-biz-bn {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .hh-biz-grid,
    .hh-biz-bg-grid,
    .hh-biz-faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-biz-mh-grid,
    .hh-biz-lienhe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hh-biz-buoc {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .hh-biz-buoc li,
    .hh-biz-buoc li:first-child {
        min-height: 0;
        margin-right: 0;
        padding: 14px 16px 14px 70px;
        border-radius: 12px;
        clip-path: none;
    }

    .hh-biz-buoc b {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 40px;
        text-align: center;
    }

    .hh-biz-buoc h3 {
        margin-top: 0;
    }

    .hh-biz-da-noibat {
        grid-template-columns: minmax(0, 1fr);
    }

    /* về 1 cột thẻ rộng lại ⇒ trả cột ảnh 200px */
    .hh-biz-sp {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .hh-biz-wrap {
        width: calc(100% - 24px);
    }

    .hh-biz-crumb .hh-biz-wrap {
        height: 36px;
        font-size: 12px;
    }

    .hh-biz-tieude {
        margin-bottom: 20px;
    }

    .hh-biz-tieude h2 {
        font-size: 20px;
    }

    .hh-biz-tieude p {
        font-size: 13px;
    }

    .hh-biz-hero {
        padding: 28px 0 32px;
    }

    .hh-biz-badge {
        height: 28px;
        font-size: 11px;
    }

    .hh-biz-badge i {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .hh-biz-h1 {
        margin-top: 14px !important;
        font-size: 28px;
    }

    .hh-biz-h1 span {
        margin-bottom: 6px;
        font-size: 15px;
    }

    .hh-biz-lead {
        font-size: 14px;
    }

    .hh-biz-offers {
        gap: 8px;
        margin-top: 18px;
    }

    .hh-biz-offer {
        gap: 9px;
        min-height: 54px;
        padding: 7px 8px 7px 7px;
    }

    .hh-biz-offer-ic {
        flex-basis: 34px;
        height: 34px;
        font-size: 14px;
    }

    .hh-biz-offer strong {
        font-size: 13px;
        white-space: normal;
    }

    .hh-biz-offer small {
        font-size: 11px;
    }

    .hh-biz-offer small b {
        font-size: 13px;
    }

    .hh-biz-offer-mui {
        display: none;
    }

    .hh-biz-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 20px;
    }

    .hh-biz-btn {
        height: 46px;
        padding: 0 16px;
        font-size: 14px;
    }

    .hh-biz-bn-khung {
        border-radius: 14px;
    }

    .hh-biz-bn-cham {
        margin-top: 10px;
    }

    .hh-biz-values {
        padding: 36px 0 28px;
    }

    .hh-biz-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hh-biz-value,
    .hh-biz-value:nth-child(4) {
        grid-column: auto;
        padding: 18px 12px 16px;
    }

    .hh-biz-value:nth-child(5) {
        grid-column: 1 / -1;
    }

    .hh-biz-value > i {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
        font-size: 18px;
    }

    .hh-biz-value h3 {
        font-size: 17px;
    }

    .hh-biz-value p {
        font-size: 12px;
    }

    .hh-biz-brands {
        padding: 12px 14px;
    }

    .hh-biz-logo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    /* ảnh sơ đồ quá rộng, chữ trong ảnh không đọc được ở màn hẹp ⇒ thay bằng danh sách */
    .hh-biz-ht {
        display: none;
    }

    .hh-biz-ht-ds {
        display: grid;
        gap: 8px;
    }

    .hh-biz-ht-ds li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        color: var(--biz-chu);
        background: #fff;
        border: 1px solid var(--biz-vien);
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
    }

    .hh-biz-ht-ds li i {
        color: var(--biz-do);
    }

    .hh-biz-deals {
        padding: 12px 0 40px;
    }

    .hh-biz-khung {
        padding-bottom: 14px;
        border-radius: 14px;
    }

    .hh-biz-tabs {
        display: flex;
        overflow-x: auto;
    }

    .hh-biz-tab,
    .hh-biz-tab:nth-child(-n+3) {
        flex: 0 0 auto;
        min-width: 140px;
        min-height: 62px;
        border-right: 1px solid var(--biz-vien);
        border-bottom: 0;
    }

    .hh-biz-tab-ten {
        font-size: 13px;
    }

    .hh-biz-panel {
        padding: 12px 12px 0;
    }

    .hh-biz-grid {
        gap: 10px;
    }

    .hh-biz-sp {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .hh-biz-sp-anh {
        padding: 34px 8px 42px;
    }

    .hh-biz-sp-anh img {
        max-height: 96px;
    }

    .hh-biz-sp-hang {
        top: 8px;
        left: 8px;
        max-width: calc(100% - 16px);
    }

    .hh-biz-sp-tietkiem {
        right: 0;
        bottom: 8px;
        padding: 2px 6px;
        border-radius: 0;
        text-align: center;
        white-space: normal;
    }

    .hh-biz-sp-tt {
        padding: 12px;
    }

    .hh-biz-chips {
        margin-top: 8px;
    }

    .hh-biz-sp-mua {
        gap: 6px;
    }

    .hh-biz-sp-mua .hh-biz-sl button {
        width: 26px;
    }

    .hh-biz .hh-biz-sp-mua .hh-biz-sl input {
        width: 32px;
    }

    .hh-biz-them {
        padding: 0 8px;
    }

    .hh-biz-an-mb {
        display: none;
    }

    .hh-biz-chi-mb {
        display: inline;
    }

    /* 3 chip ở thẻ hẹp gãy thành 3 hàng, thẻ cao ~260px ⇒ mobile chỉ giữ 2 chip đầu */
    .hh-biz-chips li:nth-child(n+3) {
        display: none;
    }

    .hh-biz-panel-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: 12px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .hh-biz-duan {
        padding: 36px 0 42px;
    }

    .hh-biz-kh {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 14px;
    }

    .hh-biz-da-noibat {
        gap: 12px;
    }

    .hh-biz-da-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 12px;
    }

    .hh-biz-da-phu {
        right: 10px;
        bottom: 10px;
        width: 104px;
        height: 70px;
    }

    .hh-biz-da-tt {
        padding: 14px;
    }

    .hh-biz-da--lon .hh-biz-da-tt h3 {
        font-size: 16px;
    }

    .hh-biz-sang,
    .hh-biz-trang {
        padding: 40px 0;
    }

    .hh-biz-mh-grid,
    .hh-biz-lienhe-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .hh-biz-quytrinh {
        padding: 40px 0;
    }

    .hh-biz-baogia {
        padding: 40px 0;
    }

    .hh-biz-bg-grid {
        gap: 14px;
    }

    .hh-biz-the {
        border-radius: 14px;
    }

    .hh-biz-the-dau {
        padding: 14px;
    }

    .hh-biz-the-than {
        padding: 14px;
    }

    .hh-biz-ds-dong {
        grid-template-columns: 44px minmax(0, 1fr) 30px;
        gap: 6px 10px;
    }

    .hh-biz-ds-dong img {
        grid-row: span 2;
        width: 44px;
        height: 44px;
    }

    .hh-biz-ds-tt {
        grid-column: 2;
        grid-row: 1;
    }

    .hh-biz-ds-dong .hh-biz-sl {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .hh-biz-ds-bo {
        grid-column: 3;
        grid-row: 1;
    }

    .hh-biz-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-biz-hotline a {
        font-size: 18px;
    }

    /* cột 100px làm "NGHỆ AN" gãy 2 dòng (đo ở 390px) */
    .hh-biz-cn {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .hh-biz-cn-vung {
        padding: 14px 12px;
    }

    .hh-biz-cn-vung strong {
        font-size: 15px;
    }

    .hh-biz-cn-tt {
        padding: 14px;
    }

    .hh-biz-faq summary {
        padding: 13px 14px;
        font-size: 13px;
    }

    .hh-biz-faq details p {
        padding: 0 14px 14px;
    }

    .hh-biz-fab {
        left: 12px;
        bottom: 12px;
    }
}

@media (max-width: 560px) {
}

@media (max-width: 374px) {
    .hh-biz-h1 {
        font-size: 24px;
    }

    .hh-biz-offers {
        grid-template-columns: minmax(0, 1fr);
    }

    .hh-biz-sp {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .hh-biz-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   13. THÀNH TỰU — thiết kế lại phiên 47 (người dùng: "đơn giản quá, cần nổi bật")
   Dùng chung cho KHỐI ở trang doanh nghiệp và TRANG THÀNH TỰU: nền tối kiểu phòng
   truyền thống + ánh vàng, khung bằng khen viền vàng có badge năm, dải số liệu,
   bộ lọc nhóm, dấu mốc dạng thẻ kính, lời kết trên dải đỏ.
   Toàn bộ quy tắc cũ của hai khối này (.hh-biz-tt-*, .hh-biz-gt-*, .hh-biz-moc,
   .hh-biz-trich, .hh-biz-hero-nho, .hh-biz-lb) đã được gỡ trước khi chèn mục này.
========================================================= */

/* ---------- 13.1 NỀN CHUNG ---------- */
.hh-biz-tt-khoi,
.hh-biz-tt-hero,
.hh-biz-tt-luoi,
.hh-biz-moc-khoi {
    position: relative;
    color: #fff;
    background:
        var(--biz-luoi),
        radial-gradient(900px 420px at 12% 0%, rgba(255, 198, 31, .12), transparent 62%),
        radial-gradient(760px 380px at 92% 100%, rgba(215, 25, 32, .3), transparent 60%),
        linear-gradient(165deg, #161c2e 0%, #0f1320 58%, #0b0e18 100%);
}

.hh-biz-tt-khoi {
    padding: 58px 0 62px;
}

.hh-biz-badge--vang {
    color: #ffe9a8;
    background: rgba(255, 198, 31, .12);
    border-color: rgba(255, 198, 31, .34);
}

.hh-biz-badge--vang i {
    color: #7a4b00;
    background: var(--biz-vang-grad);
}

/* ---------- 13.2 KHỐI Ở TRANG DOANH NGHIỆP ---------- */
.hh-biz-tt-bo {
    display: grid;
    grid-template-columns: 336px minmax(0, 1fr);
    align-items: center;
    gap: 34px;
}

.hh-biz-tt-trai h2 {
    margin-top: 16px;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.18;
    text-transform: uppercase;
}

.hh-biz-tt-trai h2 strong {
    display: block;
    font-weight: 900;
    background: var(--biz-vang-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hh-biz-tt-mo {
    margin-top: 12px !important;
    color: #b9c0cd;
    font-size: 14px;
    line-height: 1.6;
}

.hh-biz-tt-trai .hh-biz-btn {
    margin-top: 22px;
}

/* dải số liệu (dùng ở cả khối trang doanh nghiệp lẫn phần đầu trang thành tựu) */
.hh-biz-tt-so {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.hh-biz-tt-so li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid var(--biz-vang);
    border-radius: 10px;
}

.hh-biz-tt-so b {
    color: var(--biz-vang);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.hh-biz-tt-so span {
    color: #c3c9d6;
    font-size: 13px;
    line-height: 1.4;
}

.hh-biz-tt-so--hero {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 880px;
    margin: 28px auto 0;
}

.hh-biz-tt-so--hero li {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 14px;
    border-left: 1px solid rgba(255, 255, 255, .1);
    border-top: 3px solid var(--biz-vang);
    text-align: center;
}

.hh-biz-tt-so--hero b {
    font-size: 28px;
}

/* ---------- 13.3 KHUNG BẰNG KHEN (dùng chung 2 trang) ---------- */
.hh-biz-bk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.hh-biz-bk-grid--trang {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 22px;
}

.hh-biz-bk {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fff 62%, #fdf7e6 100%);
    border: 1px solid rgba(255, 198, 31, .45);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hh-biz-bk:hover {
    border-color: var(--biz-vang);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 198, 31, .5);
    transform: translateY(-5px);
}

.hh-biz-bk[hidden] {
    display: none;
}

/* ảnh ĐỊNH VỊ TUYỆT ĐỐI trong khung tỉ lệ cố định — chỉ aspect-ratio thôi thì ảnh con
   tự quyết chiều cao, thẻ trong hàng so le (bẫy ERR-023, đã vấp ở phiên 45) */
.hh-biz-bk-anh {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, #fff 60%, #f3f5f9 100%);
    border: 0;
    border-bottom: 1px solid rgba(255, 198, 31, .35);
    cursor: zoom-in;
}

.hh-biz-bk-anh img {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    object-fit: contain;
    transition: transform .3s ease;
}

.hh-biz-bk:hover .hh-biz-bk-anh img {
    transform: scale(1.04);
}

.hh-biz-bk-nam {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    color: #7a4b00;
    background: var(--biz-vang-grad);
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(122, 75, 0, .25);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 16px;
}

.hh-biz-bk-phong {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: rgba(15, 19, 32, .78);
    border-radius: 10px;
    font-size: 13px;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    transform: translateY(6px);
}

.hh-biz-bk:hover .hh-biz-bk-phong,
.hh-biz-bk-anh:focus-visible .hh-biz-bk-phong {
    opacity: 1;
    transform: translateY(0);
}

.hh-biz-bk figcaption {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 14px;
}

.hh-biz-bk figcaption small {
    color: #a06a00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.hh-biz-bk figcaption b {
    color: var(--biz-chu);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

/* ---------- 13.4 TRANG THÀNH TỰU: phần đầu ---------- */
.hh-biz-tt-hero {
    padding: 54px 0 58px;
    text-align: center;
}

.hh-biz-tt-huy {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    color: #7a4b00;
    background: var(--biz-vang-grad);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(255, 198, 31, .12), 0 16px 34px rgba(255, 198, 31, .28);
    font-size: 34px;
}

.hh-biz-tt-hero h1 {
    margin-top: 16px;
    color: #fff;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.12;
    text-transform: uppercase;
}

.hh-biz-tt-hero h1 strong {
    font-weight: 900;
    background: var(--biz-vang-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hh-biz-tt-lead {
    max-width: 780px;
    margin: 14px auto 0 !important;
    color: #c3c9d6;
    font-size: 15px;
    line-height: 1.65;
}

/* ---------- 13.5 TRANG THÀNH TỰU: lưới + bộ lọc ---------- */
.hh-biz-tt-luoi {
    padding: 8px 0 62px;
}

.hh-biz-loc {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hh-biz-loc button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 18px;
    color: #dfe3ea;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.hh-biz-loc button i {
    color: var(--biz-vang);
    font-size: 13px;
}

.hh-biz-loc button b {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    color: #c3c9d6;
    background: rgba(255, 255, 255, .1);
    border-radius: 999px;
    font-size: 12px;
}

.hh-biz-loc button:hover {
    color: #fff;
    border-color: rgba(255, 198, 31, .5);
}

.hh-biz-loc button.is-chon {
    color: #fff;
    background: var(--biz-do-grad);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(215, 25, 32, .3);
}

.hh-biz-loc button.is-chon i,
.hh-biz-loc button.is-chon b {
    color: #fff;
}

.hh-biz-loc button.is-chon b {
    background: rgba(255, 255, 255, .22);
}

/* ---------- 13.6 DẤU MỐC ---------- */
.hh-biz-moc-khoi {
    padding: 56px 0 62px;
}

.hh-biz-moc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    counter-reset: moc;
}

.hh-biz-moc li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 15px 18px 15px 16px;
    color: #e4e8ef;
    background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid rgba(255, 198, 31, .75);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    counter-increment: moc;
    transition: border-color .2s ease, transform .2s ease;
}

.hh-biz-moc li:hover {
    border-left-color: var(--biz-vang);
    transform: translateX(3px);
}

.hh-biz-moc li::before {
    content: counter(moc, decimal-leading-zero);
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    height: 38px;
    color: var(--biz-vang);
    background: rgba(255, 198, 31, .1);
    border: 1px solid rgba(255, 198, 31, .3);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
}

.hh-biz-moc li::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -36px;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle, rgba(255, 198, 31, .12), transparent 70%);
}

/* ---------- 13.7 LỜI KẾT ---------- */
.hh-biz-trich {
    position: relative;
    overflow: hidden;
    padding: 54px 0 58px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(700px 300px at 15% 0%, rgba(255, 255, 255, .14), transparent 60%),
        linear-gradient(135deg, #d71920 0%, #a3111a 70%, #7d0b12 100%);
}

.hh-biz-trich::before {
    content: "\201C";
    position: absolute;
    top: -40px;
    left: 50%;
    color: rgba(255, 255, 255, .12);
    font-size: 220px;
    font-weight: 900;
    line-height: 1;
    transform: translateX(-50%);
}

.hh-biz-trich blockquote {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
}

.hh-biz-trich blockquote p {
    color: #fff;
    font-size: 18px;
    font-style: italic;
    line-height: 1.75;
}

.hh-biz-trich blockquote footer {
    margin-top: 14px;
    color: #ffd9da;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hh-biz-trich .hh-biz-actions {
    position: relative;
    justify-content: center;
    margin-top: 26px;
}

/* ---------- 13.8 KHUNG XEM ẢNH CỠ LỚN ---------- */
.hh-biz-lb {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 30px;
    background: rgba(8, 10, 16, .92);
}

.hh-biz-lb[hidden] {
    display: none;
}

.hh-biz-lb-khung {
    margin: 0;
    text-align: center;
}

.hh-biz-lb-khung img {
    display: block;
    max-width: min(1000px, 90vw);
    max-height: 78vh;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(255, 198, 31, .5);
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}

.hh-biz-lb-khung figcaption {
    margin-top: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.hh-biz-lb-dong,
.hh-biz-lb-mui {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s ease;
}

.hh-biz-lb-dong:hover,
.hh-biz-lb-mui:hover {
    background: var(--biz-do);
}

.hh-biz-lb-dong {
    top: 20px;
    right: 22px;
}

.hh-biz-lb-mui--truoc {
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
}

.hh-biz-lb-mui--sau {
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
}

/* ---------- 13.9 RESPONSIVE ---------- */
@media (max-width: 1199px) {
    .hh-biz-tt-bo {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 24px;
    }

    .hh-biz-bk-grid--trang {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .hh-biz-tt-bo {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .hh-biz-tt-so {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hh-biz-tt-so li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .hh-biz-moc {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .hh-biz-tt-khoi,
    .hh-biz-tt-luoi,
    .hh-biz-moc-khoi,
    .hh-biz-trich {
        padding: 36px 0 40px;
    }

    .hh-biz-tt-hero {
        padding: 32px 0 36px;
    }

    .hh-biz-tt-huy {
        width: 66px;
        height: 66px;
        margin-bottom: 14px;
        font-size: 26px;
    }

    .hh-biz-tt-hero h1 {
        font-size: 27px;
    }

    .hh-biz-tt-trai h2 {
        font-size: 23px;
    }

    .hh-biz-tt-lead {
        font-size: 14px;
    }

    .hh-biz-tt-so,
    .hh-biz-tt-so--hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 18px;
    }

    .hh-biz-tt-so li,
    .hh-biz-tt-so--hero li {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        border-left: 3px solid var(--biz-vang);
        text-align: left;
    }

    .hh-biz-tt-so b,
    .hh-biz-tt-so--hero b {
        font-size: 21px;
    }

    .hh-biz-bk-grid,
    .hh-biz-bk-grid--trang {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hh-biz-bk figcaption {
        padding: 10px 12px 12px;
    }

    .hh-biz-bk figcaption b {
        font-size: 12.5px;
    }

    .hh-biz-loc {
        gap: 8px;
    }

    .hh-biz-loc button {
        height: 38px;
        padding: 0 13px;
        font-size: 13px;
    }

    .hh-biz-moc li {
        gap: 12px;
        padding: 12px 14px;
        font-size: 13px;
    }

    .hh-biz-moc li::before {
        flex-basis: 32px;
        height: 32px;
        font-size: 13px;
    }

    .hh-biz-trich blockquote p {
        font-size: 15px;
    }

    .hh-biz-trich::before {
        font-size: 150px;
    }

    .hh-biz-lb {
        padding: 16px;
    }

    .hh-biz-lb-dong,
    .hh-biz-lb-mui {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .hh-biz-lb-dong {
        top: 10px;
        right: 12px;
    }

    .hh-biz-lb-mui--truoc {
        left: 8px;
    }

    .hh-biz-lb-mui--sau {
        right: 8px;
    }
}