/*
 * Tối ưu giao diện đợt 2 (docs/ke-hoach-toi-uu.md): khối ưu đãi + form ngắn, một màu cho nút hành động,
 * nút bấm tối thiểu 44px, chữ trong ô nhập 16px (iPhone không tự phóng to), bớt khoảng trắng thừa.
 * Nạp sau main.css nên ghi đè được giao diện gốc.
 */
/* Hiện trang ngay, không chờ AngularJS: angular.js (nạp cuối trang) tự thêm [ng-cloak]{display:none} và <body> có ng-cloak,
   nên cả trang bị ẩn tới khi Angular chạy xong. Chỉ ẩn tạm các phần phụ thuộc Angular. */
body[ng-cloak] { display: block !important; }
body[ng-cloak] [ng-if],
body[ng-cloak] [ng-show] { display: none !important; }
body[ng-cloak] .cart-badge { visibility: hidden; }

:root {
    --dlh-cta: #d62828;        /* cùng màu nút "Gọi ngay" ở thanh liên hệ trên điện thoại */
    --dlh-cta-hover: #b71c1c;
    --dlh-navy: #02015a;
    --dlh-tap: 44px;
}

/* ---------- Nút hành động chính: một màu ---------- */
.dlh-btn-cta,
.footer-consult-form button,
.product-detail .btn-buy,
.btn.btn-buy {
    background: var(--dlh-cta) !important;
    border-color: var(--dlh-cta) !important;
    color: #fff !important;
}
.dlh-btn-cta:hover,
.footer-consult-form button:hover,
.btn.btn-buy:hover {
    background: var(--dlh-cta-hover) !important;
    border-color: var(--dlh-cta-hover) !important;
}
.btn.btn-cart {
    border: 2px solid var(--dlh-cta) !important;
    color: var(--dlh-cta) !important;
    background: #fff !important;
}
.price-cart .add-to-cart-btn {
    background-color: var(--dlh-cta) !important;
    min-width: var(--dlh-tap);
    min-height: var(--dlh-tap);
    border-radius: 8px;
}
.price-cart .add-to-cart-btn:hover { background-color: var(--dlh-cta-hover) !important; }

/* ---------- Nút bấm tối thiểu 44px ---------- */
.vl-offcanvas-toggle,
.header-area .cart-link,
.cart-link {
    min-width: var(--dlh-tap);
    min-height: var(--dlh-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.qty-btn {
    min-width: var(--dlh-tap);
    min-height: var(--dlh-tap);
}
.qty-input { min-height: var(--dlh-tap); }
.btn-detail-toggle {
    min-width: var(--dlh-tap);
    min-height: var(--dlh-tap);
}
a.jdgm-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dlh-tap);
    min-height: var(--dlh-tap);
}
.social-links li a {
    width: var(--dlh-tap) !important;
    height: var(--dlh-tap) !important;
    line-height: var(--dlh-tap) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* ---------- Ô nhập: chữ 16px, đủ cao để bấm ---------- */
.footer-consult-form input,
.footer-consult-form textarea,
.dlh-offer-form input {
    font-size: 16px !important;
    min-height: 48px;
}
.footer-consult-form button {
    font-size: 17px !important;
    font-weight: 700;
    min-height: 50px;
    border-radius: 8px;
}

/* ---------- Khối ưu đãi + form đăng ký (dưới banner) ---------- */
.dlh-offer { padding: 32px 0 8px; }
.dlh-offer-box {
    background: #fff7f2;
    border: 2px solid #ffd8c2;
    border-radius: 16px;
    padding: 24px 20px;
}
.dlh-offer-label {
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--dlh-cta);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.dlh-offer-title {
    margin: 0 0 10px;
    color: var(--dlh-navy);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
}
.dlh-offer-title span { color: var(--dlh-cta); white-space: nowrap; }
.dlh-offer-days {
    margin: 0 0 6px;
    color: #1c293f;
    font-size: 19px;
    line-height: 1.45;
}
.dlh-offer-days strong { color: var(--dlh-cta); }
.dlh-offer-note {
    margin: 0 0 16px;
    color: #444;
    font-size: 16px;
    line-height: 1.5;
}
.dlh-offer-form input {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 14px;
    border: 1px solid #c9ced8;
    border-radius: 10px;
    background: #fff;
    color: #1c293f;
}
.dlh-offer-form input:focus {
    outline: none;
    border-color: var(--dlh-navy);
    box-shadow: 0 0 0 3px rgba(2, 1, 90, .15);
}
.dlh-offer-form .invalid-feedback { margin: -6px 0 8px; font-size: 15px; }
.dlh-btn-cta {
    display: block;
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}
.dlh-btn-cta[disabled] { opacity: .7; }
.dlh-offer-call {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 0;
    color: var(--dlh-navy);
    font-size: 17px;
    text-decoration: underline;
}
.dlh-offer-call strong { color: var(--dlh-cta); }
.dlh-offer-img {
    display: block;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    border-radius: 12px;
}
.send-success-message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid #71d58b;
    border-radius: 8px;
    background: #e6ffed;
    color: #2d6a4f;
    font-size: 16px;
}
.send-success-message i { font-size: 1.4rem; }
.send-success-message p { margin: 0; line-height: 1.4; }

@media (min-width: 992px) {
    .dlh-offer { padding: 48px 0 16px; }
    .dlh-offer-box { padding: 36px 40px; }
    .dlh-offer-title { font-size: 40px; }
    .dlh-offer-form { max-width: 460px; }
}

/* ---------- Mục "Được truyền hình đưa tin" (nền xanh đậm + vàng) ---------- */
.dlh-press {
    --dlh-gold: #e3c27a;
    --dlh-gold-dark: #b8862b;
    margin-top: 40px;
    padding: 64px 0;
    color: #fff;
    background:
        radial-gradient(ellipse at 12% 18%, rgba(66, 92, 214, .35) 0, transparent 55%),
        radial-gradient(ellipse at 90% 90%, rgba(227, 194, 122, .12) 0, transparent 45%),
        linear-gradient(135deg, #0a1450 0%, #050a2e 60%, #03061f 100%);
}
.dlh-press-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--dlh-gold);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.dlh-press-label::before {
    content: "";
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--dlh-gold-dark), var(--dlh-gold));
}
.dlh-press-title {
    margin: 0 0 16px;
    color: #fff;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.22;
}
.dlh-press-title span { color: var(--dlh-gold); }
.dlh-press-text {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 1.6;
}
.dlh-press-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f3dc9f, var(--dlh-gold) 45%, var(--dlh-gold-dark));
    color: #0a1450;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(227, 194, 122, .25);
    transition: transform .2s, box-shadow .2s;
}
.dlh-press-btn:hover { color: #0a1450; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(227, 194, 122, .35); }
.dlh-press-video {
    position: relative;
    display: block;
    padding: 5px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f3dc9f, var(--dlh-gold-dark) 40%, #f3dc9f 70%, var(--dlh-gold-dark));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.dlh-press-video img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}
.dlh-press-video::after {   /* phủ tối nhẹ để nút phát nổi bật */
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(3, 6, 31, 0) 50%, rgba(3, 6, 31, .45) 100%);
    pointer-events: none;
}
.dlh-press-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    padding: 6px 14px;
    border: 2px solid var(--dlh-gold);
    border-radius: 6px;
    background: rgba(5, 10, 46, .85);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
}
.dlh-press-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #0a1450;
    font-size: 30px;
    box-shadow: 0 0 0 10px rgba(227, 194, 122, .35);
    transition: transform .2s;
}
.dlh-press-play i { margin-left: 5px; }
.dlh-press-video:hover .dlh-press-play { transform: scale(1.08); }
@media (max-width: 991.98px) {
    .dlh-press { margin-top: 28px; padding: 40px 0; }
    .dlh-press-title { font-size: 27px; }
    .dlh-press-text { margin-bottom: 20px; font-size: 16px; }
    .dlh-press-btn { display: flex; width: 100%; margin-top: 18px; }
    .dlh-press-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; font-size: 24px; }
    .dlh-press-badge { top: 14px; left: 14px; font-size: 15px; }
}

/* ---------- Video cảm nhận dạng Reels (site.partials.reels) ---------- */
.dlh-reels { position: relative; }
.dlh-reels-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.dlh-reels-track::-webkit-scrollbar { display: none; }
/* Ít video: canh giữa (margin auto tự về 0 khi dải dài hơn khung, nên vẫn cuộn bình thường) */
.dlh-reels-track > .dlh-reel:first-child { margin-left: auto; }
.dlh-reels-track > .dlh-reel:last-child { margin-right: auto; }
.dlh-reel {
    position: relative;
    flex: 0 0 calc((100% - 14px * 3) / 4);   /* máy tính: 4 cột */
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(160deg, #1b2a7a, #050a2e);
    color: #fff;
    text-decoration: none;
    scroll-snap-align: start;
    box-shadow: 0 8px 22px rgba(2, 1, 90, .15);
}
.dlh-reel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.dlh-reel:hover img { transform: scale(1.04); }
.dlh-reel::after {   /* phủ tối phía dưới để chữ trắng dễ đọc */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .78) 100%);
}
.dlh-reel-platform {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    font-size: 15px;
}
.dlh-reel-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--dlh-navy);
    font-size: 20px;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .25);
}
.dlh-reel-play i { margin-left: 4px; }
.dlh-reel-info {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.dlh-reel-views {
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--dlh-cta);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dlh-reel-info strong { font-size: 16px; font-weight: 700; }
.dlh-reel-info small { font-size: 13px; opacity: .85; }
.dlh-reels-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -29px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--dlh-navy);
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.dlh-reels:not(.is-scrollable) .dlh-reels-nav { display: none; }
.dlh-reels-nav.is-prev { left: -18px; }
.dlh-reels-nav.is-next { right: -18px; }
@media (max-width: 991.98px) {
    .dlh-reel { flex-basis: 43%; }   /* máy tính bảng: 2 cột + ló mép video kế tiếp để biết còn vuốt được */
    .dlh-reels-nav { display: none; }
}
@media (max-width: 575.98px) {
    .dlh-reel { flex-basis: 78%; }   /* điện thoại: 1 cột + ló mép video kế tiếp */
    .dlh-reel-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 17px; }
    .dlh-reel-views { font-size: 12px; padding: 3px 8px; }
    .dlh-reel-info strong { font-size: 15px; }
}

/* Khung phát video dọc */
.dlh-reel-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(3, 6, 31, .88);
}
.dlh-reel-modal[hidden] { display: none; }
.dlh-reel-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.dlh-reel-frame {
    height: min(82vh, calc((100vw - 32px) * 16 / 9));
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
}
.dlh-reel-frame iframe { width: 100%; height: 100%; border: 0; }
.dlh-reel-close {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 20px;
    transform: translate(40%, -40%);
}
.dlh-reel-open { color: #fff; font-size: 16px; text-decoration: underline; }
.dlh-reel-open:hover { color: var(--dlh-gold, #e3c27a); }
@media (max-width: 575.98px) {
    .dlh-reel-close { transform: none; top: 6px; right: 6px; }
}

/* ---------- Bản đồ trang Liên hệ ---------- */
.dlh-map {
    position: relative;
    overflow: hidden;
    height: 360px;
    border-radius: 12px;
    border: 1px solid #e3e6ee;
}
.dlh-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dlh-btn-cta.dlh-map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 30px;
    text-decoration: none;
}
@media (min-width: 992px) {
    .dlh-map { height: 520px; }
    .dlh-btn-cta.dlh-map-btn { margin-bottom: 0; }
}

/* ---------- Tiêu đề mục trang chủ: nhãn nhỏ + H2, cùng một kiểu (site.partials.section_title) ---------- */
.dlh-sec-head {
    max-width: 780px;
    margin: 0 auto 36px;
    text-align: center;
}
.dlh-sec-head.is-left { max-width: none; margin: 0 0 20px; text-align: left; }
.dlh-sec-head .dlh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    color: var(--dlh-cta);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.dlh-sec-head .dlh-eyebrow::before,
.dlh-sec-head .dlh-eyebrow::after {
    content: "";
    width: 32px;
    height: 2px;
    background: currentColor;
    opacity: .6;
}
.dlh-sec-head.is-left .dlh-eyebrow::after { display: none; }
.dlh-sec-head .dlh-h2 {
    margin: 0;
    color: var(--dlh-navy) !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.dlh-sec-head .dlh-sec-sub {
    margin: 12px auto 0;
    max-width: 640px;
    color: #555;
    font-size: 17px;
    line-height: 1.6;
}
/* Con số nổi bật ở mục "Về chúng tôi" (trước là thẻ H2, nay là chữ thường cho đúng cấu trúc tiêu đề) */
.dlh-stat-num {
    margin: 0 0 4px;
    color: var(--dlh-navy);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}
/* Tên bài tin tức (H3 dưới tiêu đề mục) */
.vl-blog-6-area .vl-blog-1-title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.35; }
@media (max-width: 767.98px) {
    .dlh-sec-head { margin-bottom: 24px; }
    .dlh-sec-head .dlh-eyebrow { font-size: 13px; letter-spacing: 1.5px; gap: 10px; }
    .dlh-sec-head .dlh-eyebrow::before, .dlh-sec-head .dlh-eyebrow::after { width: 22px; }
    .dlh-sec-head .dlh-h2 { font-size: 26px !important; }
}

/* ---------- Thẻ "quy trình / niềm tin": tiêu đề không đè lên ảnh ---------- */
.service8 .service8-boxarea .service8-widgetbox .content-area { margin-top: 0; }
.service8 .service8-boxarea .service8-widgetbox .content-area .space24 { height: 16px; }

/* ---------- Bớt khoảng trắng thừa ---------- */
.case1-section-area { padding: 48px 0 0; }
.dlh-contact-info { padding: 24px 0 10px; }
@media (max-width: 767.98px) {
    .case1-section-area { padding-top: 32px; }
    .space-margin60 { margin-bottom: 24px !important; }
    .team2-section-area { padding-top: 36px !important; }
    .service8 { padding-top: 32px !important; padding-bottom: 24px !important; }
    .testimonial2-section-area { padding-top: 40px !important; padding-bottom: 40px !important; }
    .shop-others-area { padding-top: 32px !important; padding-bottom: 40px !important; }
    /* Banner trên điện thoại: bỏ 2 nút mũi tên đè lên chữ (vẫn vuốt được) */
    .hero-all-main-slider .testimonial-arrows { display: none; }
}

/* ---------- Thanh menu gọn (site.partials.header) ----------
 * Dải thông tin navy 36px (chỉ máy tính) + thanh menu trắng 76px / 64px (dưới 992px).
 * Thanh menu nằm trong luồng trang, không còn đè lên banner. Cuộn quá 100px thì main.js thêm .header-sticky
 * (dính trên cùng); .dlh-header-slot giữ chỗ bằng chiều cao thanh menu nên trang không giật. */
.dlh-header { position: relative; z-index: 99; }
.dlh-topbar { background: var(--dlh-navy); color: rgba(255, 255, 255, .85); font-size: 13.5px; }
.dlh-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 36px; }
.dlh-topbar-list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.dlh-topbar-list li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dlh-topbar-list a { display: inline-flex; align-items: center; gap: 7px; color: inherit; transition: color .2s; }
.dlh-topbar-list a:hover { color: #fff; }
.dlh-topbar i { color: #e3c27a; font-size: 13px; }
.dlh-topbar-list a:hover i { color: #fff; }

.dlh-header-slot { height: 76px; }
.homepage4-body .dlh-header-slot .vl-header-area {
    position: relative;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid #eceef4;
}
.homepage4-body .dlh-header-slot .vl-header-area.header-sticky {
    position: fixed;
    top: 0; left: 0; right: 0;
    border-bottom-color: transparent;
    box-shadow: 0 6px 24px rgba(2, 1, 90, .08);
}
.dlh-bar { display: flex; align-items: center; gap: 24px; height: 76px; }
.dlh-logo { flex: 0 0 auto; display: block; }
.dlh-logo img { display: block; width: 56px; height: 56px; object-fit: contain; }

.dlh-nav { flex: 1 1 auto; }
.homepage4-body .dlh-nav ul { display: flex; justify-content: center; gap: 4px; margin: 0; padding: 0; }
.homepage4-body .dlh-nav ul > li > a {
    position: relative;
    padding: 10px 14px;
    color: var(--dlh-navy);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}
.homepage4-body .dlh-nav ul > li > a::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--dlh-cta);
    transform: scaleX(0);
    transition: transform .25s;
}
.homepage4-body .dlh-nav ul > li:hover > a::after,
.homepage4-body .dlh-nav ul > li.is-active > a::after { transform: scaleX(1); }
.homepage4-body .dlh-nav ul > li.is-active > a { font-weight: 600; }

.dlh-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dlh-hotline {
    align-items: center;
    gap: 10px;
    height: 46px;
    margin-right: 6px;
    padding: 0 18px 0 7px;
    border-radius: 999px;
    background: var(--dlh-cta);
    color: #fff !important;
    transition: background .2s;
}
.dlh-hotline:hover { background: var(--dlh-cta-hover); }
.dlh-hotline i {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: 14px;
}
.dlh-hotline span { display: flex; flex-direction: column; font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: .2px; }
.dlh-hotline small { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.dlh-actions .dlh-icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f1f2f8;
    color: var(--dlh-navy) !important;
    font-size: 17px;
    transition: background .2s;
}
.dlh-actions .dlh-icon-btn:hover { background: #e4e6f1; }
.dlh-actions .dlh-icon-btn .cart-badge {
    top: -3px; right: -5px;
    width: auto; min-width: 19px; height: 19px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: var(--dlh-cta);
    font-size: 11px;
    box-sizing: content-box;
}
.dlh-actions .dlh-icon-btn.vl-offcanvas-toggle { background: var(--dlh-navy); color: #fff !important; font-size: 18px; }

@media (max-width: 991.98px) {
    .dlh-header-slot,
    .dlh-bar { height: 64px; }
    .dlh-bar { gap: 12px; }
    .dlh-logo img { width: 48px; height: 48px; }
    .dlh-actions { gap: 8px; }
}

/* Trang con: thanh menu không còn đè lên đầu trang nên bỏ khoảng chừa chỗ cũ (200px) */
.inner-header-section-area { padding: 64px 0 72px; }
@media (max-width: 991.98px) {
    .inner-header-section-area { padding: 40px 0 48px; }
}

/* Hỗ trợ tiếp cận: tiêu đề hộp "Thời gian làm việc / Địa chỉ / Email" đổi h4 -> h3 (đúng thứ tự tiêu đề), giữ nguyên kiểu chữ */
.contact2-section-area .contact-single-boxarea2 .single-box .text h3 {
  color: var(--ztc-text-text-5);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 18px;
  text-transform: uppercase;
}

/* Hiệu ứng chữ và ảnh, thay gsap/SplitText (2026-10-30). main.js tách chữ thành span và thêm .is-in khi vào màn hình.
   style-1: từng từ trượt từ phải; style-2: từng chữ cái; style-3: từng chữ cái nảy nhẹ */
.dlh-split-w { display: inline-block; white-space: nowrap; }
.dlh-split-words .dlh-split-w,
.dlh-split-c { display: inline-block; opacity: 0; transform: translateX(20px); }
.text-anime-style-3 .dlh-split-c { transform: translateX(50px); }
.dlh-split-words.is-in .dlh-split-w,
.dlh-split-chars.is-in .dlh-split-c { animation: dlhSplitIn 1s cubic-bezier(.25, .46, .45, .94) both; }
.text-anime-style-3.is-in .dlh-split-c { animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dlhSplitIn { to { opacity: 1; transform: none; } }

/* .reveal: khung ảnh trượt vào từ trái, ảnh trong khung trượt ngược lại và thu từ 1.3 về 1 */
.reveal.dlh-reveal { visibility: visible; transform: translateX(-100%); }
.reveal.dlh-reveal img { transform: translateX(100%) scale(1.3); }
.reveal.dlh-reveal.is-in,
.reveal.dlh-reveal.is-in img { transform: none; transition: transform 1.5s cubic-bezier(.25, .46, .45, .94); }

/* ---------- Trang chi tiết bài viết (site.blog_detail + site.partials.article) ---------- */
.dlh-article-hero { padding: 40px 0 44px; }
.dlh-article-hero .hero-header { max-width: 900px; margin: 0 auto; text-align: center; }
.inner-header-section-area.dlh-article-hero .hero-header h1 {
    margin: 12px 0 0;
    color: var(--dlh-navy);
    font-size: 36px;
    line-height: 1.3;
}
.dlh-breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.dlh-breadcrumb li { color: #4a4f6a; }
.dlh-breadcrumb li + li::before { content: "›"; margin: 0 8px; color: #8a8fa8; }
.dlh-breadcrumb a { color: var(--dlh-navy); font-weight: 500; }
.dlh-breadcrumb a:hover { color: var(--dlh-cta); }
.dlh-breadcrumb li[aria-current] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dlh-article-section { padding: 40px 0 56px; }
.dlh-article { color: #2b2f3f; }
.dlh-article-cover { margin: 0 0 18px; border-radius: 14px; overflow: hidden; }
.dlh-article-cover img { display: block; width: 100%; height: auto; }
.dlh-article-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 24px; padding: 0 0 16px; list-style: none; border-bottom: 1px solid #eceef4; color: #5a5f78; font-size: 14.5px; }
.dlh-article-meta li { display: flex; align-items: center; gap: 7px; }
.dlh-article-meta i { color: var(--dlh-gold-dark); }

.dlh-toc { margin: 0 0 28px; border: 1px solid #e3e6f0; border-left: 4px solid var(--dlh-navy); border-radius: 10px; background: #f7f8fc; }
.dlh-toc summary { padding: 14px 18px; color: var(--dlh-navy); font-size: 17px; font-weight: 600; cursor: pointer; }
.dlh-toc ol { margin: 0; padding: 0 18px 16px 38px; }
.dlh-toc li { margin: 6px 0; line-height: 1.45; }
.dlh-toc li.is-h3 { margin-left: 18px; list-style: circle; font-size: 15px; }
.dlh-toc a { color: #2b2f3f; }
.dlh-toc a:hover { color: var(--dlh-cta); }

.dlh-article-body { font-size: 17px; line-height: 1.75; overflow-wrap: break-word; }
.dlh-article-body p { margin: 0 0 18px; color: #2b2f3f; font-size: inherit; line-height: inherit; }
.dlh-article-body h2,
.dlh-article-body h3,
.dlh-article-body h4 { color: var(--dlh-navy); font-weight: 600; scroll-margin-top: 90px; }
.dlh-article-body h2 { margin: 34px 0 14px; font-size: 26px; line-height: 1.35; }
.dlh-article-body h3 { margin: 26px 0 12px; font-size: 21px; line-height: 1.4; }
.dlh-article-body h4 { margin: 22px 0 10px; font-size: 18px; }
.dlh-article-body > :first-child { margin-top: 0; }
.dlh-article-body a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }
.dlh-article-body :is(h2, h3, h4) a { color: inherit; text-decoration: none; }
.dlh-article-body img { display: block; max-width: 100%; height: auto; margin: 6px auto; border-radius: 10px; }
.dlh-article-body ul,
.dlh-article-body ol { margin: 0 0 18px; padding-left: 24px; }
.dlh-article-body li { margin: 6px 0; }
.dlh-article-body blockquote { margin: 0 0 18px; padding: 12px 18px; border-left: 4px solid var(--dlh-gold); background: #fbf7ee; }
.dlh-article-body table { width: 100%; margin: 0 0 18px; border-collapse: collapse; }
.dlh-article-body td,
.dlh-article-body th { padding: 8px 10px; border: 1px solid #e3e6f0; }

.dlh-article-cta { margin: 32px 0 20px; padding: 22px 24px; border-radius: 14px; background: linear-gradient(135deg, #0b0a6e, var(--dlh-navy)); color: rgba(255, 255, 255, .88); }
.dlh-article-cta p { margin: 0 0 14px; color: inherit; font-size: 16px; line-height: 1.6; }
.dlh-article-cta .dlh-article-cta-title { margin-bottom: 6px; color: #fff; font-size: 21px; font-weight: 600; }
.dlh-article-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dlh-article-cta-call { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--dlh-cta); color: #fff !important; font-size: 18px; font-weight: 700; }
.dlh-article-cta-call:hover { background: var(--dlh-cta-hover); }
.dlh-article-cta-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--dlh-gold) !important; font-weight: 600; }
.dlh-article-cta-link:hover { color: #fff !important; }

.dlh-article-share { display: flex; align-items: center; gap: 12px; color: #5a5f78; font-size: 15px; }
.dlh-article-share a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #1877f2; color: #fff !important; }

.dlh-related { margin-top: 40px; }
.dlh-related .dlh-related-title { margin: 0 0 16px; color: var(--dlh-navy); font-size: 24px; font-weight: 600; }
.dlh-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dlh-related-card { display: block; overflow: hidden; border: 1px solid #eceef4; border-radius: 12px; background: #fff; transition: box-shadow .2s, transform .2s; }
.dlh-related-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(2, 1, 90, .08); }
.dlh-related-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dlh-related-card h3 { margin: 0; padding: 12px 14px 14px; color: var(--dlh-navy); font-size: 16px; font-weight: 600; line-height: 1.45; }

.dlh-article-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.dlh-side-box { padding: 20px; border: 1px solid #eceef4; border-radius: 14px; background: #fff; }
.dlh-side-box .dlh-side-title { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--dlh-cta); color: var(--dlh-navy); font-size: 18px; font-weight: 600; }
.dlh-side-posts { margin: 0; padding: 0; list-style: none; }
.dlh-side-posts li + li { border-top: 1px solid #f0f1f6; }
.dlh-side-posts a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: #2b2f3f; font-size: 15px; line-height: 1.4; }
.dlh-side-posts a:hover span,
.dlh-side-posts .is-current span { color: var(--dlh-cta); }
.dlh-side-posts img { flex: 0 0 80px; width: 80px; height: 60px; object-fit: cover; border-radius: 8px; }
.dlh-side-hotline { background: #f7f8fc; text-align: center; }
.dlh-side-hotline p { margin: 0 0 12px; color: #5a5f78; }
.dlh-side-hotline a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--dlh-cta); color: #fff !important; font-size: 17px; font-weight: 700; }

@media (max-width: 991.98px) {
    .dlh-article-side { position: static; margin-top: 36px; }
    .dlh-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .dlh-article-hero { padding: 26px 0 30px; }
    .inner-header-section-area.dlh-article-hero .hero-header h1 { font-size: 26px; }
    .dlh-breadcrumb ol { font-size: 14px; }
    .dlh-breadcrumb li[aria-current] { display: none; }
    .dlh-article-section { padding: 26px 0 40px; }
    .dlh-article-body { font-size: 16.5px; }
    .dlh-article-body h2 { font-size: 22px; }
    .dlh-article-body h3 { font-size: 19px; }
    .dlh-article-cta { padding: 18px; }
    .dlh-related-grid { grid-template-columns: 1fr; }
}

/* Menu ẩn trên điện thoại: tiêu đề "Liên hệ"/"Theo dõi chúng tôi" là <p> (trước là H3 nằm trước H1 của mọi trang), giữ dáng cũ */
p.vl-offcanvas-sm-title { margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }

/* Nút liên hệ nổi (máy tính/máy tính bảng): Zalo, Messenger, Gọi luôn hiện, xếp dọc ở góc phải dưới.
   Nhãn của nút Gọi luôn hiện số; hai nút kia hiện nhãn khi rê chuột hoặc focus bàn phím. */
.dlh-fab {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 9990;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.dlh-fab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.dlh-fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .15s ease;
}
.dlh-fab-zalo .dlh-fab-icon { background: #fff; overflow: hidden; }
.dlh-fab-zalo .dlh-fab-icon img { width: 100%; height: 100%; }
.dlh-fab-mess .dlh-fab-icon { background: #0a7cff; font-size: 26px; }
.dlh-fab-call .dlh-fab-icon {
    width: 58px;
    height: 58px;
    background: var(--dlh-cta);
    animation: dlh-fab-ring 2s infinite;
}
.dlh-fab-call .dlh-fab-icon i { animation: dlh-fab-shake 2s infinite; }
.dlh-fab-label {
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--dlh-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.dlh-fab-label-on {
    opacity: 1;
    transform: none;
    background: var(--dlh-cta);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
}
.dlh-fab-btn:hover .dlh-fab-label,
.dlh-fab-btn:focus-visible .dlh-fab-label { opacity: 1; transform: none; }
.dlh-fab-btn:hover .dlh-fab-icon { transform: scale(1.08); }
.dlh-fab-call:hover .dlh-fab-label-on { background: var(--dlh-cta-hover); }
@keyframes dlh-fab-ring {
    0% { box-shadow: 0 0 0 0 rgba(214, 40, 40, .55), 0 4px 14px rgba(0, 0, 0, .18); }
    70% { box-shadow: 0 0 0 14px rgba(214, 40, 40, 0), 0 4px 14px rgba(0, 0, 0, .18); }
    100% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0), 0 4px 14px rgba(0, 0, 0, .18); }
}
@keyframes dlh-fab-shake {
    0%, 50%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(-18deg); }
    20%, 40% { transform: rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
    .dlh-fab-call .dlh-fab-icon, .dlh-fab-call .dlh-fab-icon i { animation: none; }
}