.line-clamp-2 {
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.contact-form__success,
.contact-form__error {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 500;
}

.contact-form__success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    align-items: center;
}
.contact-form__success p{
    margin-bottom:0;
}
.contact-form__success i {
  font-size: 1.1rem;
}

.contact-form__error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.contact-form__error i {
  font-size: 1.1rem;
}
.page-numbers ul{
    font-size: .85em;
    margin: 5px 0;
}
.page-numbers ul li{
    display: inline-block;
    margin: 0 .4em;  
}
.page-numbers>ul>li>a, .page-numbers>ul>li>span {
    border: 2px solid;
    border-radius: 99px;
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
    height: 2.25em;
    line-height: 2em;
    min-width: 2.25em;
    padding: 0 7px;
    text-align: center;
    transition: all .3s;
    vertical-align: top;
    width: auto;
}
.page-numbers ul li.active span, .page-numbers ul li.active a{
    border-color: #003082;
    background-color: #003082;
    color: #fff;
}
.star-card__img{
    width:75px;
    height:75px;
}
.car-card {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    background: #fff;
    font-family: "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
}

.car-card__media {
    position: relative;
    width: 100%;
    background-color: #f8fafc;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.car-card__link,
.car-card__detail-link,
.car-card__test-drive {
    text-decoration: none;
}

.car-card__link {
    display: block;
}

.car-card__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.car-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.car-card__badge {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    cursor: default;
}

.car-card__badge--green {
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.car-card__badge--red {
    background: #dc2626;
}

.car-card__body {
    padding: 12px 20px 20px;
    margin: -8px 0 0;
}

.car-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.car-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.car-card__price {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.car-card__price-label {
    color: #002668;
}

.car-card__price-value {
    color: #dc2626;
}

.car-card__desc {
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
    margin: 0 0 16px;
}

.car-card__attrs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.car-card__attr {
    flex: 1;
    min-width: 120px;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.car-card__attr-value {
    font-size: 16px;
    font-weight: 700;
    color: #16a34a;
}

.car-card__attr-label {
    font-size: 13px;
    color: #64748b;
}

.car-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.car-card__tag {
    background: #f1f5f9;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
}

.car-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.car-card__btn {
    display: block;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.car-card__btn--primary {
    background: linear-gradient(90deg, #196e66, #08302c);
    color: #fff;
}

.car-card__btn--secondary {
    background: #fff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
} 
.aligncenter.size-full{
width:250px
}

/* ==========================================================================
   SEC-HEADING — dải tiêu đề canh GIỮA trên nền xanh đậm
   View: extension/module/service/service_heading.tpl
   Số đo suy từ chatimg/tramsac1.png (ảnh 2382px = thiết kế 1920px, k = 1.24)
   ========================================================================== */
.sec-heading {
    --sec-heading-bg: #08302c;      /* token site (--primary-color); mẫu đo được #0C3B2E */
    --sec-heading-accent: #17c962;  /* xanh lá nhãn nhỏ, đo trực tiếp từ mẫu */
    background-color: var(--sec-heading-bg);
    padding: 60px 0 48px;
    text-align: center;
}

.sec-heading__inner {
    max-width: 700px;
    margin: 0 auto;
}

.sec-heading__eyebrow {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--sec-heading-accent);
}

.sec-heading__title {
    margin: 0;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: #fff;
    width: auto;                    /* flatsome đặt width:100% cho h1..h6 */
}

.sec-heading__desc {
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 27px;
    color: rgba(255, 255, 255, .8);
}

.sec-heading__desc p,
.sec-heading__desc ul,
.sec-heading__desc ol {
    margin: 0 0 12px;
}

.sec-heading__desc > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .sec-heading__title {
        font-size: 36px;
        line-height: 46px;
    }
}

@media (max-width: 991px) {
    .sec-heading {
        padding: 48px 0 40px;
    }

    .sec-heading__title {
        font-size: 32px;
        line-height: 42px;
    }

    .sec-heading__desc {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 575px) {
    .sec-heading {
        padding: 40px 0 32px;
    }

    .sec-heading__eyebrow {
        margin-bottom: 12px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .sec-heading__title {
        font-size: 26px;
        line-height: 34px;
    }

    .sec-heading__desc {
        margin-top: 12px;
        font-size: 15px;
        line-height: 24px;
    }

    /* công tắc "Hiển thị trên mobile" trong admin tắt -> ẩn dưới 576px */
    .sec-heading--hide-sm {
        display: none;
    }
}

/* ==========================================================================
   COMPONENT DÙNG CHUNG — đầu section canh TRÁI (tiêu đề + đoạn dẫn)
   Thêm section mới cùng kiểu thì GỘP selector vào đây, đừng khai lại cỡ chữ.
   ========================================================================== */
.map-guide__title,
.spot-list__title,
.num-cards__title,
.bank-list__title {
    margin: 0;
    width: auto;                    /* flatsome đặt width:100% cho h1..h6 */
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: #141613;
}

.map-guide__desc,
.spot-list__desc,
.num-cards__desc,
.bank-list__desc {
    margin: 8px 0 0;
    font-size: 18px;
    line-height: 27px;
    color: #5b6259;
}

@media (max-width: 991px) {
    .map-guide__title,
    .spot-list__title,
    .num-cards__title,
    .bank-list__title {
        font-size: 26px;
        line-height: 34px;
    }

    .map-guide__desc,
    .spot-list__desc,
    .num-cards__desc,
    .bank-list__desc {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 575px) {
    .map-guide__title,
    .spot-list__title,
    .num-cards__title,
    .bank-list__title {
        font-size: 22px;
        line-height: 30px;
    }

    .map-guide__desc,
    .spot-list__desc,
    .num-cards__desc,
    .bank-list__desc {
        font-size: 15px;
        line-height: 24px;
    }
}

/* ==========================================================================
   MAP-GUIDE — bản đồ nhúng (trái) + thẻ hướng dẫn N bước (phải)
   View: extension/module/service/service_map_guide.tpl
   Số đo suy từ chatimg/map.png (k = 1.16: nội dung 1566px ảnh = 1350px = .container)
   Tiêu đề + đoạn dẫn dùng component chung ở mục trên.
   ========================================================================== */
.map-guide {
    --mg-line: #e1ded2;    /* viền thẻ + kẻ ngăn bước */
    --mg-ink: #141613;     /* chữ chính */
    --mg-ink-2: #5b6259;   /* chữ phụ */
    --mg-dark: #08302c;    /* chấm số + chữ trên nút (token site) */
    --mg-accent: #17c964;  /* nền nút */
    --mg-map-h: 543px;     /* chiều cao thẻ bản đồ, thẻ phải kéo theo */
    background-color: #f6f4ee;
    padding: 44px 0 56px;
}

.map-guide__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 26px;
    align-items: stretch;
    margin-top: 32px;
}

.map-guide__card {
    background: #fff;
    border: 1px solid var(--mg-line);
    border-radius: 12px;
}

/* --- thẻ bản đồ ---------------------------------------------------------- */
.map-guide__map {
    overflow: hidden;               /* bo góc ăn được vào iframe */
    min-height: var(--mg-map-h);
    display: flex;
}

.map-guide__map iframe,
.map-guide__map embed,
.map-guide__map object {
    display: block;
    width: 100%;
    height: auto;
    min-height: var(--mg-map-h);
    border: 0;
    flex: 1 1 auto;
}

/* --- thẻ hướng dẫn ------------------------------------------------------- */
.map-guide__panel {
    padding: 24px;
}

.map-guide__panel-title {
    margin: 0 0 4px;
    width: auto;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: var(--mg-ink);
}

.map-guide__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.map-guide__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 16px 0;
    list-style: none;
}

.map-guide__step + .map-guide__step {
    border-top: 1px solid var(--mg-line);
}

.map-guide__num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mg-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}

.map-guide__body {
    flex: 1 1 auto;
    min-width: 0;
}

.map-guide__name {
    margin: 0;
    width: auto;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--mg-ink);
}

.map-guide__text {
    margin-top: 6px;
    font-size: 16px;
    line-height: 24px;
    color: var(--mg-ink-2);
}

.map-guide__text p {
    margin: 0 0 8px;
}

.map-guide__text > *:last-child {
    margin-bottom: 0;
}

.map-guide__btn {
    flex: 0 0 auto;
    align-self: center;
    max-width: 200px;
    padding: 18px 24px;
    border-radius: 8px;
    background: var(--mg-accent);
    color: var(--mg-dark);
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    text-decoration: none;
}

.map-guide__btn:hover,
.map-guide__btn:focus {
    background: #14b459;
    color: var(--mg-dark);
}

.map-guide__qr {
    flex: 0 0 auto;
    align-self: center;
    width: 88px;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .map-guide {
        --mg-map-h: 420px;
        padding: 40px 0 48px;
    }

    .map-guide__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 32px;
    }
}

@media (max-width: 575px) {
    .map-guide {
        --mg-map-h: 340px;
        padding: 32px 0 40px;
    }

    .map-guide__panel {
        padding: 20px;
    }

    .map-guide__step {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 0;
    }

    .map-guide__num {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 13px;
    }

    .map-guide__name {
        font-size: 16px;
        line-height: 23px;
    }

    .map-guide__text {
        font-size: 15px;
        line-height: 23px;
    }

    /* nút / ảnh xuống hàng riêng, thụt bằng chấm số + khe */
    .map-guide__btn,
    .map-guide__qr {
        align-self: flex-start;
        margin-left: 40px;
    }

    .map-guide__btn {
        max-width: none;
        padding: 14px 20px;
        font-size: 16px;
    }

    .map-guide--hide-sm {
        display: none;
    }
}

/* ==========================================================================
   SPOT-LIST — lưới 3 thẻ điểm sạc (tên · địa chỉ · các nhãn tròn)
   View: extension/module/service/service_spot_list.tpl
   Số đo suy từ chatimg/tramsac2.png (cùng k = 1.16, nội dung 1566px ảnh = 1350px)
   Tiêu đề + đoạn dẫn dùng component chung ở đầu file.
   ========================================================================== */
.spot-list {
    background-color: #fff;
    padding: 48px 0 56px;
}

.spot-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.spot-list__card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #f2fbf6;
    border: 1px solid #17c964;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

a.spot-list__card:hover,
a.spot-list__card:focus {
    background: #eaf8f0;
    color: inherit;
}

.spot-list__name {
    margin: 0;
    width: auto;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: #141613;
}

.spot-list__addr {
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    color: #5b6259;
}

.spot-list__addr p {
    margin: 0 0 6px;
}

.spot-list__addr > *:last-child {
    margin-bottom: 0;
}

.spot-list__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: auto 0 0;         /* auto ghim nhãn xuống đáy khi thẻ bị kéo cao */
    padding: 10px 0 0;        /* khe địa chỉ -> nhãn khi thẻ vừa khít */
    list-style: none;
}

.spot-list__tag {
    margin: 0;
    padding: 4px 16px;
    background: #f6f4ee;
    border: 1px solid #e1ded2;
    border-radius: 999px;
    font-size: 14px;
    line-height: 20px;
    color: #5b6259;
    list-style: none;
}

@media (max-width: 991px) {
    .spot-list {
        padding: 40px 0 48px;
    }

    .spot-list__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 24px;
    }
}

@media (max-width: 575px) {
    .spot-list {
        padding: 32px 0 40px;
    }

    .spot-list__grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 20px;
    }

    .spot-list__name {
        font-size: 16px;
        line-height: 23px;
    }

    .spot-list__addr {
        font-size: 15px;
        line-height: 23px;
    }

    .spot-list__tags {
        gap: 8px;
    }

    .spot-list__tag {
        padding: 4px 12px;
        font-size: 13px;
    }

    .spot-list--hide-sm {
        display: none;
    }
}

/* ==========================================================================
   NUM-CARDS — lưới 3 thẻ đánh số (ô số vuông · tên · mô tả)
   View: extension/module/service/service_num_cards.tpl
   Số đo suy từ chatimg/tramsac3.png (cùng k = 1.16, nội dung 1566px ảnh = 1350px)
   Tiêu đề + đoạn dẫn dùng component chung ở đầu file.
   ========================================================================== */
.num-cards {
    background-color: #fff;
    border-top: 1px solid #e1ded2;   /* ngăn với section trên - 2 section cùng nền trắng */
    padding: 72px 0 56px;
}

.num-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.num-cards__card {
    display: block;
    padding: 28px;
    background: #fff;
    border: 1px solid #e1ded2;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

a.num-cards__card:hover,
a.num-cards__card:focus {
    border-color: #17c964;
    color: inherit;
}

.num-cards__num {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #08302c;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
}

.num-cards__name {
    margin: 16px 0 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    color: #141613;
}

.num-cards__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    color: #5b6259;
}

.num-cards__text p {
    margin: 0 0 8px;
}

.num-cards__text > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .num-cards {
        padding: 48px 0 48px;
    }

    .num-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 24px;
    }
}

@media (max-width: 575px) {
    .num-cards {
        padding: 32px 0 40px;
    }

    .num-cards__grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 20px;
    }

    .num-cards__card {
        padding: 20px;
    }

    .num-cards__num {
        width: 42px;
        height: 42px;
        line-height: 42px;
        font-size: 16px;
    }

    .num-cards__name {
        margin-top: 12px;
        font-size: 18px;
        line-height: 26px;
    }

    .num-cards__text {
        font-size: 15px;
        line-height: 23px;
    }

    .num-cards--hide-sm {
        display: none;
    }
}

/* ==========================================================================
   CTA-PANEL — panel xanh đậm bo góc lớn: tiêu đề · mô tả · danh sách ✓ · nút
   View: extension/module/service/service_cta_panel.tpl
   Số đo suy từ chatimg/tramsac4.png (cùng k = 1.16, panel 1566px ảnh = 1350px)
   ========================================================================== */
.cta-panel {
    background-color: #f6f4ee;
    padding: 60px 0;
}

.cta-panel__box {
    padding: 48px;
    background: #08302c;
    border-radius: 20px;
}

.cta-panel__box--media {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    gap: 24px;
}

.cta-panel__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    color: #fff;
}

.cta-panel__desc {
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 27px;
    color: rgba(255, 255, 255, .8);
}

.cta-panel__list {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.cta-panel__item {
    position: relative;
    margin: 0;
    padding-left: 26px;              /* 10px dấu ✓ + 16px khe */
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    list-style: none;
}

.cta-panel__item + .cta-panel__item {
    margin-top: 14px;
}

/* dấu ✓ là hình trang trí thuần tuý -> dựng cứng, không lấy từ admin */
.cta-panel__item::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #17c964;
    font-weight: 700;
}

.cta-panel__btn {
    display: inline-block;
    margin-top: 14px;
    padding: 16px 28px;
    border-radius: 8px;
    background: #17c964;
    color: #08302c;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    text-decoration: none;
}

.cta-panel__btn:hover,
.cta-panel__btn:focus {
    background: #14b459;
    color: #08302c;
}

.cta-panel__media {
    text-align: center;
}

.cta-panel__media img {
    display: inline-block;
    max-width: 160px;
    height: auto;
}

@media (max-width: 991px) {
    .cta-panel {
        padding: 48px 0;
    }

    .cta-panel__box {
        padding: 32px;
        border-radius: 16px;
    }

    .cta-panel__box--media {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .cta-panel__title {
        font-size: 24px;
        line-height: 33px;
    }

    .cta-panel__desc {
        font-size: 17px;
        line-height: 26px;
    }

    .cta-panel__list {
        margin-top: 24px;
    }
}

@media (max-width: 575px) {
    .cta-panel {
        padding: 32px 0;
    }

    .cta-panel__box {
        padding: 24px;
    }

    .cta-panel__title {
        font-size: 21px;
        line-height: 29px;
    }

    .cta-panel__desc {
        margin-top: 8px;
        font-size: 15px;
        line-height: 24px;
    }

    .cta-panel__item {
        font-size: 15px;
        line-height: 23px;
    }

    .cta-panel__btn {
        display: block;
        padding: 14px 20px;
        font-size: 16px;
        text-align: center;
    }

    .cta-panel--hide-sm {
        display: none;
    }
}

/* ==========================================================================
   LOAN-CALC — máy tính trả góp (module riêng loan_calc, không phải service)
   View: extension/module/loan_calc/default.tpl
   ========================================================================== */
.loan-calc {
    --lc-dark: #08302c;
    --lc-accent: #17c964;
    --lc-line: #e1ded2;
    --lc-ink: #141613;
    --lc-ink-2: #5b6259;
    background-color: #f6f4ee;
    padding: 40px 0 56px;
}

.loan-calc__form {
    padding: 28px 32px 32px;
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 16px;
}

.loan-calc__form-title {
    margin: 0 0 20px;
    width: auto;                      /* flatsome đặt width:100% cho h1..h6 */
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: var(--lc-ink);
}

.loan-calc__field {
    margin-bottom: 20px;
}

.loan-calc__field--last {
    margin-bottom: 0;
}

.loan-calc__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.loan-calc__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--lc-ink-2);
}

.loan-calc__value {
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    color: var(--lc-dark);
}

.loan-calc__select {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--lc-line);
    border-radius: 8px;
    font-size: 15px;
    color: var(--lc-ink);
}

.loan-calc__range {
    display: block;
    width: 100%;
    margin: 0;
    accent-color: var(--lc-accent);   /* thanh trượt theo hệ màu, không dùng xanh dương mặc định */
}

.loan-calc__terms {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.loan-calc__term {
    padding: 12px 8px;
    background: #f6f4ee;
    border: 1px solid var(--lc-line);
    border-radius: 8px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--lc-ink);
    text-transform: none;            /* theme đặt uppercase cho <button> */
    letter-spacing: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.loan-calc__term:hover {
    border-color: var(--lc-accent);
}

.loan-calc__term.is-active {
    background: var(--lc-dark);
    border-color: var(--lc-dark);
    color: #fff;
}

/* --- panel kết quả -------------------------------------------------------- */
.loan-calc__result {
    margin-top: 20px;
    padding: 28px 32px 24px;
    background: var(--lc-dark);
    border-radius: 16px;
}

.loan-calc__result-label {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.loan-calc__amount {
    margin: 6px 0 0;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    color: var(--lc-accent);
}

.loan-calc__note {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: rgba(255, 255, 255, .7);
}

.loan-calc__table {
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.loan-calc__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.loan-calc__line dt,
.loan-calc__line dd {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

.loan-calc__line dt {
    color: rgba(255, 255, 255, .85);
    font-weight: 400;
}

.loan-calc__line dd {
    color: #fff;
    font-weight: 700;
    text-align: right;
}

.loan-calc__line--total {
    margin-bottom: 0;
}

.loan-calc__line--total dt {
    color: #fff;
    font-weight: 700;
}

.loan-calc__line--total dd {
    color: var(--lc-accent);
}

.loan-calc__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.loan-calc__btn {
    display: block;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.loan-calc__btn--solid {
    background: var(--lc-accent);
    border: 1px solid var(--lc-accent);
    color: var(--lc-dark);
}

.loan-calc__btn--solid:hover,
.loan-calc__btn--solid:focus {
    background: #14b459;
    border-color: #14b459;
    color: var(--lc-dark);
}

.loan-calc__btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.loan-calc__btn--ghost:hover,
.loan-calc__btn--ghost:focus {
    border-color: var(--lc-accent);
    color: #fff;
}

.loan-calc__disclaimer {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255, 255, 255, .55);
}

@media (max-width: 767px) {
    .loan-calc {
        padding: 32px 0 40px;
    }

    .loan-calc__form,
    .loan-calc__result {
        padding: 20px;
    }

    .loan-calc__terms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loan-calc__amount {
        font-size: 30px;
        line-height: 40px;
    }

    .loan-calc__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .loan-calc--hide-sm {
        display: none;
    }
}

/* ==========================================================================
   BANK-LIST — lưới thẻ ngân hàng (tên · lãi suất · ghi chú), canh GIỮA
   View: extension/module/service/service_bank_list.tpl
   Số đo suy từ chatimg/tragop3.png — xem ghi chú trong báo cáo: ảnh mẫu chụp ở
   khung hẹp nên cỡ chữ nhỏ hơn hệ thống, đã quy về đúng thang của các section
   khác (tỉ lệ giữa 3 cấp chữ trong thẻ giữ nguyên như mẫu).
   Tiêu đề + đoạn dẫn dùng component chung ở đầu file.
   ========================================================================== */
.bank-list {
    background-color: #fff;
    padding: 48px 0 56px;
}

.bank-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.bank-list__card {
    display: block;
    padding: 24px;
    background: #fff;
    border: 1px solid #e1ded2;
    border-radius: 12px;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

a.bank-list__card:hover,
a.bank-list__card:focus {
    border-color: #17c964;
    color: inherit;
}

.bank-list__name {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: #141613;
}

.bank-list__rate {
    margin: 8px 0 0;
    font-size: 28px;
    line-height: 38px;
    font-weight: 700;
    color: #08302c;
}

.bank-list__note {
    margin-top: 6px;
    font-size: 16px;
    line-height: 24px;
    color: #5b6259;
}

.bank-list__note p {
    margin: 0 0 6px;
}

.bank-list__note > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .bank-list {
        padding: 40px 0 48px;
    }

    .bank-list__grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-top: 24px;
    }

    .bank-list__rate {
        font-size: 24px;
        line-height: 33px;
    }
}

@media (max-width: 575px) {
    .bank-list {
        padding: 32px 0 40px;
    }

    .bank-list__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 20px;
    }

    .bank-list__card {
        padding: 20px 12px;
    }

    .bank-list__name {
        font-size: 16px;
        line-height: 23px;
    }

    .bank-list__rate {
        font-size: 22px;
        line-height: 30px;
    }

    .bank-list__note {
        font-size: 14px;
        line-height: 21px;
    }

    .bank-list--hide-sm {
        display: none;
    }
}

/* ==========================================================================
   PRICE-CALC — máy tính giá lăn bánh (module riêng price_calc)
   View: extension/module/price_calc/default.tpl
   Thẻ trắng + panel xanh dùng LẠI y hệ số đo của LOAN-CALC ở trên (cùng một
   họ công cụ tính toán). Chỉ đo riêng từ chatimg/lanbanh2.png những thứ mới:
     hàng công tắc bước 70px (kẻ ngăn y=380/450/520)  ·  công tắc 46x26
     khung ghi chú nền kem #f1e7d3, cao 47px
   ⚠ Ảnh mẫu là bản dựng thử: 2 ô chọn để NGUYÊN SELECT MẶC ĐỊNH của trình
   duyệt (cao 24px, phông serif). Ở đây dùng ô chọn 42px của LOAN-CALC.
   ========================================================================== */
.price-calc {
    --pc-dark: #08302c;
    --pc-accent: #17c964;
    --pc-line: #e1ded2;
    --pc-ink: #141613;
    --pc-ink-2: #5b6259;
    --pc-cream: #f1e7d3;
    background-color: #f6f4ee;
    padding: 40px 0 56px;
}

.price-calc__form {
    padding: 28px 32px 32px;
    background: #fff;
    border: 1px solid var(--pc-line);
    border-radius: 16px;
}

.price-calc__form-title {
    margin: 0 0 20px;
    width: auto;                      /* flatsome đặt width:100% cho h1..h6 */
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: var(--pc-ink);
}

.price-calc__field {
    margin-bottom: 20px;
}

.price-calc__field--last {
    margin-bottom: 0;
}

.price-calc__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--pc-ink-2);
}

.price-calc__select {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 40px 0 12px;           /* chừa chỗ cho mũi tên tự vẽ */
    background-color: #fff;
    /* theme bỏ mũi tên mặc định của <select> -> vẽ lại bằng SVG nội tuyến */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6259' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    border: 1px solid var(--pc-line);
    border-radius: 8px;
    font-size: 15px;
    color: var(--pc-ink);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* --- khối tuỳ chọn thêm --------------------------------------------------- */
.price-calc__options {
    margin-top: 28px;
}

.price-calc__options-title {
    margin: 0 0 16px;
    width: auto;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: var(--pc-ink);
}

.price-calc__note {
    margin: 0;
    padding: 13px 20px;
    background: var(--pc-cream);
    border-radius: 8px;
    font-size: 14px;
    line-height: 21px;
    color: var(--pc-ink-2);
}

.price-calc__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--pc-line);
}

/* khung ghi chú đứng ngay trên hàng đầu -> khe 20px như ảnh mẫu (y 360->380) */
.price-calc__note + .price-calc__option {
    margin-top: 20px;
}

.price-calc__option-text {
    min-width: 0;
}

.price-calc__option-name {
    display: block;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: var(--pc-ink);
}

.price-calc__option-note {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--pc-ink-2);
}

/* --- công tắc ------------------------------------------------------------- */
.price-calc__switch {
    --pc-sw-w: 46px;
    --pc-sw-h: 26px;
    --pc-sw-pad: 2px;
    position: relative;
    flex: 0 0 auto;
    width: var(--pc-sw-w);
    height: var(--pc-sw-h);
    margin: 0;
    cursor: pointer;
}

.price-calc__switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.price-calc__switch-track {
    display: block;
    width: 100%;
    height: 100%;
    background: #d9d6cc;
    border-radius: 999px;
    transition: background .15s ease;
}

.price-calc__switch-track::after {
    content: '';
    position: absolute;
    top: var(--pc-sw-pad);
    left: var(--pc-sw-pad);
    width: calc(var(--pc-sw-h) - var(--pc-sw-pad) * 2);
    height: calc(var(--pc-sw-h) - var(--pc-sw-pad) * 2);
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
}

.price-calc__switch input:checked + .price-calc__switch-track {
    background: var(--pc-accent);
}

.price-calc__switch input:checked + .price-calc__switch-track::after {
    transform: translateX(calc(var(--pc-sw-w) - var(--pc-sw-h)));
}

.price-calc__switch input:focus-visible + .price-calc__switch-track {
    outline: 2px solid var(--pc-dark);
    outline-offset: 2px;
}

/* --- panel kết quả -------------------------------------------------------- */
.price-calc__result {
    margin-top: 20px;
    padding: 28px 32px 24px;
    background: var(--pc-dark);
    border-radius: 16px;
}

.price-calc__result-label {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.price-calc__amount {
    margin: 6px 0 0;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    color: var(--pc-accent);
}

.price-calc__table {
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.price-calc__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.price-calc__line:last-child {
    margin-bottom: 0;
}

.price-calc__line dt,
.price-calc__line dd {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    text-transform: none;             /* theme đặt uppercase cho dt/dd */
    letter-spacing: 0;
}

.price-calc__line dt {
    color: rgba(255, 255, 255, .85);
    font-weight: 400;
}

.price-calc__line dd {
    color: #fff;
    font-weight: 700;
    text-align: right;
}

.price-calc__free {
    color: var(--pc-accent) !important;   /* đè màu trắng của dd cùng độ đặc hiệu */
}

.price-calc__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.price-calc__total-label {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #fff;
}

.price-calc__total-value {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    text-align: right;
    color: var(--pc-accent);
}

.price-calc__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.price-calc__btn {
    display: block;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.price-calc__btn--solid {
    background: var(--pc-accent);
    border: 1px solid var(--pc-accent);
    color: var(--pc-dark);
}

.price-calc__btn--solid:hover,
.price-calc__btn--solid:focus {
    background: #14b459;
    border-color: #14b459;
    color: var(--pc-dark);
}

.price-calc__btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.price-calc__btn--ghost:hover,
.price-calc__btn--ghost:focus {
    border-color: var(--pc-accent);
    color: #fff;
}

.price-calc__disclaimer {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255, 255, 255, .55);
}

@media (max-width: 767px) {
    .price-calc {
        padding: 32px 0 40px;
    }

    .price-calc__form,
    .price-calc__result {
        padding: 20px;
    }

    .price-calc__amount {
        font-size: 30px;
        line-height: 40px;
    }

    .price-calc__line {
        align-items: flex-start;
    }

    .price-calc__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .price-calc--hide-sm {
        display: none;
    }
}


/* ==========================================================================
   SR-LOCATOR — Hệ thống cửa hàng: dải tab + panel
   View: showrooms/showroomall.tpl (KHÔNG phải module)
   Số đo suy từ chatimg/showroom2.png. Hệ số quy đổi k = 1422 / 1350 = 1.053
     (bề rộng nội dung trong ảnh 1422px  <->  .container của site cap 1350px)
     kiểm chứng chéo: thẻ tab cao 91px ảnh -> 86px thật, khớp
     padding 20 + tên 22 + khe 4 + tỉnh 20 + padding 20 = 86
   Nền kem khoá theo body class của riêng trang này, không đụng trang khác.
   ========================================================================== */
/* Nhịp dọc của cả trang đặt Ở ĐÂY, không đặt bằng lớp tiện ích trên .container:
   theme aqa không nạp lớp tiện ích của Bootstrap nên mt-3 và mb-3 đều ra 0px. */
.template-showrooms-showroomall .com_info {
    padding: 40px 0 48px;
    background-color: #f6f4ee;
}

.sr-locator {
    --sr-dark: #08302c;              /* mẫu đo #0c3b2e, dùng token site cho đồng bộ */
    --sr-accent: #17c964;
    --sr-gold: #b08a4e;
    --sr-line: #ece9e0;
    --sr-rule: #efede7;
    --sr-ink: #141613;
    --sr-ink-2: #5b6259;
}

/* --- dải tab -------------------------------------------------------------- */
.sr-locator__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.sr-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--sr-line);
    border-radius: 10px;
    text-align: left;
    text-transform: none;            /* theme đặt uppercase cho <button> */
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sr-tab:hover {
    border-color: var(--sr-accent);
}

.sr-tab.is-active {
    border-color: var(--sr-dark);
    box-shadow: 0 0 0 1px var(--sr-dark);
}

.sr-tab__name {
    display: block;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: var(--sr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-tab__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    vertical-align: middle;
    background: var(--sr-accent);
    border-radius: 50%;
}

.sr-tab__zone {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sr-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- panel ---------------------------------------------------------------- */
.sr-panel {
    border: 1px solid var(--sr-line);
    border-radius: 14px;
    overflow: hidden;                /* bo góc ăn cả vào iframe bản đồ */
}

.sr-panel[hidden] {
    display: none;                   /* theme đặt display cho div, [hidden] thua nếu không khai */
}

.sr-panel__media {
    position: relative;
    height: 360px;
    background: linear-gradient(180deg, #dde7df 0%, #eaece4 100%);
}

.sr-panel__media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.sr-panel__media-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding: 0 24px;
    transform: translate(-50%, -50%);
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: var(--sr-ink-2);
}

.sr-panel__body {
    padding: 40px;
    background: #fff;
}

.sr-panel__eyebrow {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sr-gold);
}

.sr-panel__badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 5px 14px;
    background: #eafbf1;
    border-radius: 999px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #12a355;
}

.sr-panel__dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    background: currentColor;
    border-radius: 50%;
}

.sr-panel__title {
    margin: 16px 0 24px;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 28px;
    line-height: 38px;
    font-weight: 500;
    color: var(--sr-ink);
}

/* --- bảng thông tin: bước dòng 54px = 16 + 22 + 16 ------------------------- */
.sr-panel__facts {
    margin: 0;
    border-top: 1px solid var(--sr-rule);
}

.sr-panel__fact {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--sr-rule);
}

.sr-panel__fact dt,
.sr-panel__fact dd {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    text-transform: none;            /* theme đặt uppercase cho dt/dd */
    letter-spacing: 0;
}

.sr-panel__fact dt {
    flex: 0 0 145px;
    font-weight: 400;
    color: var(--sr-ink-2);
}

.sr-panel__fact dt i {
    margin-right: 10px;
    color: var(--sr-ink-2);
}

.sr-panel__fact dd {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    color: var(--sr-ink);
}

.sr-panel__phone {
    font-weight: 700;
    color: var(--sr-ink);
}

.sr-panel__phone:hover,
.sr-panel__phone:focus {
    color: var(--sr-dark);
}

/* --- nút ------------------------------------------------------------------ */
.sr-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.sr-btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.sr-btn--solid {
    background: var(--sr-dark);
    border: 1px solid var(--sr-dark);
    color: #fff;
}

.sr-btn--solid:hover,
.sr-btn--solid:focus {
    background: #0c4238;
    border-color: #0c4238;
    color: #fff;
}

.sr-btn--outline {
    background: #fff;
    border: 1px solid var(--sr-dark);
    color: var(--sr-dark);
}

.sr-btn--outline:hover,
.sr-btn--outline:focus {
    background: var(--sr-dark);
    color: #fff;
}

@media (max-width: 991px) {
    .template-showrooms-showroomall .com_info {
        padding: 28px 0 36px;
    }

    .sr-locator__tabs {
        margin-bottom: 24px;
    }

    .sr-tab {
        flex: 1 1 240px;             /* dưới 992px cho tab tự xuống hàng */
    }

    .sr-panel__media {
        height: 280px;
    }

    .sr-panel__body {
        padding: 24px;
    }

    .sr-panel__title {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (max-width: 575px) {
    .sr-tab {
        flex: 1 1 100%;
    }

    .sr-panel__media {
        height: 220px;
    }

    .sr-panel__body {
        padding: 20px;
    }

    .sr-panel__title {
        font-size: 22px;
        line-height: 30px;
    }

    /* nhãn nằm trên giá trị: cột nhãn 145px ăn hết bề ngang màn hẹp.
       dt/dd phải khai display: block — theme để chúng inline, bỏ dòng này thì
       "Hotline 0968…" dính chung một dòng còn 2 dòng kia chỉ trông như xuống
       dòng vì chữ dài. */
    .sr-panel__fact {
        display: block;
    }

    .sr-panel__fact dt {
        display: block;
        margin-bottom: 4px;
    }

    .sr-panel__fact dd {
        display: block;
    }

    .sr-panel__actions .sr-btn {
        flex: 1 1 100%;
    }
}


/* ==========================================================================
   SR-DETAIL — trang chi tiết một cửa hàng
   View: catalog/view/theme/aqa/template/showrooms/showrooms.tpl
   Mượn nguyên component của SR-LOCATOR ở trên (.sr-panel__eyebrow / __badge /
   __facts / __actions / .sr-btn) — ĐỪNG khai lại cỡ chữ cho mấy cái đó,
   chỉ khai phần khung riêng của trang này.
   ========================================================================== */
.sr-detail {
    --sr-dark: #08302c;
    --sr-accent: #17c964;
    --sr-gold: #b08a4e;
    --sr-line: #ece9e0;
    --sr-rule: #efede7;
    --sr-ink: #141613;
    --sr-ink-2: #5b6259;
    padding: 40px 0 56px;
    background-color: #f6f4ee;
}

.sr-detail__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.sr-detail__head-text {
    min-width: 0;
}

.sr-detail__title {
    margin: 16px 0 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 34px;
    line-height: 44px;
    font-weight: 700;
    color: var(--sr-ink);
}

.sr-detail__back {
    flex: 0 0 auto;
    padding: 11px 20px;
    background: #fff;
    border: 1px solid var(--sr-line);
    border-radius: 999px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--sr-ink-2);
    text-decoration: none;
    white-space: nowrap;
}

.sr-detail__back:hover,
.sr-detail__back:focus {
    border-color: var(--sr-dark);
    color: var(--sr-dark);
}

/* --- 2 cột: bản đồ + ảnh | thẻ thông tin ---------------------------------- */
.sr-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.sr-detail__map {
    position: relative;
    height: 420px;
    background: linear-gradient(180deg, #dde7df 0%, #eaece4 100%);
    border: 1px solid var(--sr-line);
    border-radius: 14px;
    overflow: hidden;                /* bo góc ăn cả vào iframe */
}

.sr-detail__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.sr-detail__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.sr-detail__shot {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
}

.sr-detail__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sr-detail__card {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--sr-line);
    border-radius: 14px;
}

.sr-detail__lead {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 26px;
    color: var(--sr-ink-2);
}

.sr-detail__lead p {
    margin: 0 0 10px;
}

.sr-detail__lead > *:last-child {
    margin-bottom: 0;
}

.sr-detail__card .sr-panel__facts {
    border-top: 1px solid var(--sr-rule);
}

/* thẻ hẹp hơn panel trang danh sách -> nhãn xuống dòng riêng cho đỡ chật */
.sr-detail__card .sr-panel__fact {
    display: block;
}

.sr-detail__card .sr-panel__fact dt {
    display: block;
    margin-bottom: 4px;
}

.sr-detail__card .sr-panel__fact dd {
    display: block;
}

/* --- bài giới thiệu ------------------------------------------------------- */
.sr-detail__article,
.sr-detail__related {
    margin-top: 32px;
    padding: 32px 36px;
    background: #fff;
    border: 1px solid var(--sr-line);
    border-radius: 14px;
}

.sr-detail__article-title {
    margin: 0 0 20px;
    width: auto;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--sr-ink);
}

/* khoá bề rộng dòng ~78 ký tự — bản gốc để chữ chạy hết 1350px, đọc rất mỏi */
.sr-detail__rte {
    max-width: 820px;
    font-size: 17px;
    line-height: 30px;
    color: #33382f;
}

.sr-detail__rte h2,
.sr-detail__rte h3,
.sr-detail__rte h4 {
    width: auto;
    margin: 28px 0 10px;
    font-weight: 700;
    color: var(--sr-ink);
}

.sr-detail__rte h2 { font-size: 21px; line-height: 30px; }
.sr-detail__rte h3 { font-size: 18px; line-height: 27px; }
.sr-detail__rte h4 { font-size: 17px; line-height: 26px; }

.sr-detail__rte > *:first-child {
    margin-top: 0;
}

.sr-detail__rte p {
    margin: 0 0 14px;
}

.sr-detail__rte ul,
.sr-detail__rte ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.sr-detail__rte li {
    margin-bottom: 8px;
    font-size: 17px;               /* gộp cỡ với p, đừng khai riêng chỗ khác */
    line-height: 30px;
}

.sr-detail__rte img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* --- chi nhánh cùng khu vực ----------------------------------------------- */
.sr-detail__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.sr-detail__related-card {
    display: block;
    padding: 18px 20px;
    background: #faf9f5;
    border: 1px solid var(--sr-line);
    border-radius: 10px;
    text-decoration: none;
}

.sr-detail__related-card:hover,
.sr-detail__related-card:focus {
    border-color: var(--sr-accent);
}

@media (max-width: 991px) {
    .sr-detail {
        padding: 28px 0 40px;
    }

    .sr-detail__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sr-detail__map {
        height: 320px;
    }

    .sr-detail__title {
        font-size: 28px;
        line-height: 38px;
    }

    .sr-detail__article,
    .sr-detail__related {
        padding: 24px;
    }
}

@media (max-width: 575px) {
    .sr-detail__head {
        display: block;
    }

    .sr-detail__back {
        display: inline-block;
        margin-top: 16px;
    }

    .sr-detail__map {
        height: 240px;
    }

    .sr-detail__title {
        font-size: 24px;
        line-height: 33px;
    }

    .sr-detail__card,
    .sr-detail__article,
    .sr-detail__related {
        padding: 20px;
    }

    .sr-detail__rte,
    .sr-detail__rte li {
        font-size: 16px;
        line-height: 27px;
    }

    .sr-detail__actions .sr-btn,
    .sr-detail__card .sr-btn {
        flex: 1 1 100%;
    }
}


/* ==========================================================================
   SVC-HERO — dải mở đầu nền xanh: nhãn nhỏ · tiêu đề · đoạn dẫn · 2 nút
               + dải N mục có kẻ dọc ngăn cột
   View: extension/module/service/service_hero.tpl
   Số đo suy từ chatimg/baohanh1.png. k = 1370 / 1350 = 1.015
     (khung dải mục trong ảnh rộng 1370px  <->  .container của site 1350px)
     KIỂM CHỨNG CHÉO: tiêu đề cap 30px -> font 41.3 -> /1.015 = 40.7 ≈ 40px,
     và bước dòng đoạn dẫn 28 -> 27.6 ≈ 27px. Trùng khít 40/48 và 18/27 của
     .sec-heading -> dùng lại luôn 3 class đó, không khai cỡ chữ mới.
   ⚠ Ảnh mẫu dựng 4 mục XẾP DỌC vì khung render bị hẹp, nhưng kẻ dọc còn nguyên
     ở x=1470 chạy suốt chiều cao -> đúng ra là lưới N CỘT có kẻ ngăn. Dựng theo
     lưới; số cột tự bằng số item (--svc-cols).
   ========================================================================== */
.svc-hero {
    --svc-bg: #08302c;               /* token site; mẫu đo được #0C3B2E */
    --svc-accent: #17c964;           /* đo trực tiếp từ nút đặc trong mẫu */
    --svc-hair: rgba(255, 255, 255, .09);
    /* .sec-heading__eyebrow lấy màu từ biến khai trên .sec-heading — mượn class
       thì PHẢI khai lại biến, thiếu là chữ nhãn nhỏ ra ĐEN trên nền xanh */
    --sec-heading-accent: #17c962;
    padding: 60px 0;
    background-color: var(--svc-bg);
    /* quầng sáng góc trên phải, ước lượng từ mẫu (#0E5939 ở 1500,60) */
    background-image: radial-gradient(58% 82% at 90% 4%, rgba(23, 201, 100, .17), rgba(23, 201, 100, 0) 68%);
}

.svc-hero__head {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.svc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.svc-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 17px 28px;
    border-radius: 10px;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: none;            /* theme đặt uppercase cho <button> */
    letter-spacing: 0;
}

.svc-hero__btn-icon {
    margin-right: 10px;
    font-size: 15px;
}

.svc-hero__btn--solid {
    background: var(--svc-accent);
    border: 1px solid var(--svc-accent);
    color: #07281f;
}

.svc-hero__btn--solid:hover,
.svc-hero__btn--solid:focus {
    background: #14b459;
    border-color: #14b459;
    color: #07281f;
}

.svc-hero__btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
}

.svc-hero__btn--outline:hover,
.svc-hero__btn--outline:focus {
    border-color: var(--svc-accent);
    color: #fff;
}

/* --- dải mục: lưới N cột, kẻ dọc ngăn ------------------------------------- */
.svc-hero__strip {
    display: grid;
    grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr));
    margin-top: 48px;
    border-top: 1px solid var(--svc-hair);
}

.svc-hero__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 44px 16px;
    text-align: center;
    text-decoration: none;
}

/* kẻ ngăn: đặt ở item THỨ 2 trở đi để mục đầu không mọc kẻ cắt lề trái */
.svc-hero__item + .svc-hero__item {
    border-left: 1px solid var(--svc-hair);
}

.svc-hero__icon {
    display: block;
    max-width: 48px;
    max-height: 48px;
    font-size: 32px;
    line-height: 1;
    color: var(--svc-accent);
}

.svc-hero__name {
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #fff;
}

a.svc-hero__item:hover .svc-hero__name,
a.svc-hero__item:focus .svc-hero__name {
    color: var(--svc-accent);
}

@media (max-width: 991px) {
    .svc-hero {
        padding: 48px 0;
    }

    /* ép 2 cột, không để lưới tự xuống dòng sinh hàng mồ côi.
       Lúc 2 cột kẻ dọc đổi selector -> nth-child(2n) kẻo item đầu hàng mọc kẻ. */
    .svc-hero__strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 36px;
    }

    .svc-hero__item {
        padding: 32px 12px;
    }

    .svc-hero__item + .svc-hero__item {
        border-left: 0;
    }

    .svc-hero__item:nth-child(2n) {
        border-left: 1px solid var(--svc-hair);
    }

    .svc-hero__item:nth-child(n + 3) {
        border-top: 1px solid var(--svc-hair);
    }
}

@media (max-width: 575px) {
    .svc-hero {
        padding: 40px 0;
    }

    .svc-hero__actions {
        gap: 10px;
        margin-top: 28px;
    }

    .svc-hero__btn {
        flex: 1 1 100%;
        min-height: 52px;
        padding: 14px 20px;
        font-size: 16px;
    }

    .svc-hero__strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .svc-hero__item {
        padding: 24px 12px;
    }

    .svc-hero__item:nth-child(2n) {
        border-left: 0;
    }

    .svc-hero__item + .svc-hero__item {
        border-top: 1px solid var(--svc-hair);
    }

    /* công tắc "Hiển thị trên mobile" trong admin tắt -> ẩn dưới 576px */
    .svc-hero--hide-sm {
        display: none;
    }
}


/* ==========================================================================
   BOOKING — thẻ "Đặt lịch bảo dưỡng nhanh"
   View: extension/module/newsletter/form_booking.tpl (module newsletter)
   Số đo suy từ chatimg/baohanh2.png. k = 1380 / 1350 = 1.022
     (mép nội dung trong ảnh x 52..1432 = 1380  <->  .container của site 1350)
     KIỂM CHỨNG CHÉO: tiêu đề cap 24px -> font 33 -> /1.022 = 32.3 ≈ 32px.
   ⚠ Ảnh mẫu để NGUYÊN select mặc định của trình duyệt (cao 24px, phông serif) —
     là bản dựng thử. Ô nhập ở đây dùng lại đúng ô 42px của LOAN-CALC/PRICE-CALC
     để 3 công cụ trên site không lệch nhau.
   ========================================================================== */
.booking {
    --bk-dark: #08302c;
    --bk-accent: #17c964;            /* token site; mẫu đo được #14b85c */
    --bk-line: #e1ded2;
    --bk-ink: #141613;
    --bk-ink-2: #5b6259;
    padding: 40px 0 56px;
    background-color: #f6f4ee;
}

.booking__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--bk-ink);
}

.booking__desc {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--bk-ink-2);
}

.booking__desc p {
    margin: 0 0 8px;
}

.booking__desc > *:last-child {
    margin-bottom: 0;
}

.booking__card {
    margin: 28px 0 0;
    padding: 28px 32px 32px;
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 16px;
}

.booking__field {
    margin-bottom: 18px;
}

.booking__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--bk-ink-2);
}

.booking__card .wpcf7-form-control-wrap {
    display: block;
}

.booking__input {
    display: block;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 14px;
    background-color: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 8px;
    font-size: 15px;
    line-height: 40px;
    color: var(--bk-ink);
    box-shadow: none;
}

.booking__input:focus {
    border-color: var(--bk-accent);
    outline: 0;
}

/* theme bỏ mũi tên mặc định của <select> -> vẽ lại bằng SVG nội tuyến */
.booking__input--select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6259' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.booking__input--area {
    height: auto;
    padding: 10px 14px;
    line-height: 24px;
}

.booking__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.booking__opt {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    color: var(--bk-ink);
}

.booking__opt input {
    margin-right: 6px;
}

.booking__err {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: #c0392b;
}

.booking__err:empty,
.booking__err span:empty {
    display: none;
}

.booking__submit {
    margin-top: 24px;
}

/* PHẢI là .booking button.booking__btn (0,2,1): theme flatsome khai nền cho
   <button> nặng hơn một class đơn -> để .booking__btn thì nút ra NỀN XANH ĐẬM,
   chữ đen trên nền tối, gần như không đọc được. Viền thì vẫn ăn class đơn nên
   nhìn qua tưởng CSS đã chạy. */
.booking button.booking__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 58px;
    padding: 16px 40px;
    background: var(--bk-accent);
    border: 1px solid var(--bk-accent);
    border-radius: 10px;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: #07281f;
    text-transform: none;            /* theme đặt uppercase cho <button> */
    letter-spacing: 0;
    cursor: pointer;
}

.booking button.booking__btn:hover,
.booking button.booking__btn:focus {
    background: #14b459;
    border-color: #14b459;
    color: #07281f;
}

.booking button.booking__btn[disabled] {
    opacity: .6;
    cursor: default;
}

@media (max-width: 767px) {
    .booking {
        padding: 32px 0 40px;
    }

    .booking__title {
        font-size: 26px;
        line-height: 34px;
    }

    .booking__desc {
        font-size: 15px;
        line-height: 24px;
    }

    .booking__card {
        margin-top: 20px;
        padding: 20px;
    }

    .booking button.booking__btn {
        width: 100%;
        min-height: 52px;
        padding: 14px 20px;
        font-size: 16px;
    }
}


/* ==========================================================================
   TAB-CARDS — khối chia theo tab, mỗi tab là danh sách thẻ
   View: extension/module/tab_cards/default.tpl (module riêng tab_cards)
   Số đo suy từ chatimg/baohanh3.png. k = 1371 / 1350 = 1.0156
     (mép thẻ trong ảnh x 112..1482 = 1371  <->  .container của site 1350)
     KIỂM CHỨNG CHÉO: tiêu đề thẻ cao 18px (chữ số, không có phần nhô)
     -> font 24.8 -> /1.0156 = 24.4 ≈ 24px. Bước dòng gạch đầu dòng 35 -> 34.
   Nền trang ở mẫu là TRẮNG, không phải kem như mấy khối kia.
   ========================================================================== */
.tab-cards {
    --tc-dark: #08302c;              /* token site; mẫu đo được #0C3B2E */
    --tc-accent: #17c964;
    --tc-gold: #b08a4e;              /* đo trực tiếp từ nhãn góc trong mẫu */
    --tc-gold-line: #bc9f6f;
    --tc-gold-bg: #fdfaf3;
    --tc-line: #e8e6dd;
    --tc-ink: #141613;
    --tc-ink-2: #5b6259;
    padding: 40px 0 56px;
    background-color: #fff;
}

.tab-cards__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--tc-ink);
}

.tab-cards__desc {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--tc-ink-2);
}

/* --- dải nút tab ---------------------------------------------------------- */
.tab-cards__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.tab-cards__tab {
    padding: 10px 26px;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 999px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--tc-ink-2);
    text-transform: none;            /* theme đặt uppercase cho <button> */
    letter-spacing: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tab-cards__tab:hover {
    border-color: var(--tc-dark);
    color: var(--tc-dark);
}

.tab-cards__tab.is-active {
    background: var(--tc-dark);
    border-color: var(--tc-dark);
    color: #fff;
}

/* --- danh sách thẻ -------------------------------------------------------- */
.tab-cards__panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.tab-cards__panel[hidden] {
    display: none;                   /* theme đặt display cho div, [hidden] thua nếu không khai */
}

.tab-cards__card {
    position: relative;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 14px;
}

.tab-cards__card--hl {
    background: var(--tc-gold-bg);
    border-color: var(--tc-gold-line);
}

/* nhãn góc nhô LÊN TRÊN mép thẻ như mẫu (mẫu: thẻ y=452, nhãn y=438) */
.tab-cards__badge {
    position: absolute;
    top: -14px;
    right: 20px;
    padding: 5px 16px;
    background: var(--tc-gold);
    border-radius: 999px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.tab-cards__name {
    margin: 0;
    width: auto;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--tc-dark);
}

.tab-cards__sub {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--tc-ink-2);
}

.tab-cards__list {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.tab-cards__item {
    position: relative;
    margin-bottom: 12px;
    padding-left: 24px;
    font-size: 15px;
    line-height: 22px;
    color: var(--tc-ink-2);
}

.tab-cards__item:last-child {
    margin-bottom: 0;
}

/* dấu ✓ là hình trang trí thuần tuý -> dựng cứng, không lấy từ admin */
.tab-cards__item::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 2px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--tc-accent);
    border-bottom: 2px solid var(--tc-accent);
    transform: rotate(-45deg);
}

@media (max-width: 767px) {
    .tab-cards {
        padding: 32px 0 40px;
    }

    .tab-cards__title {
        font-size: 26px;
        line-height: 34px;
    }

    .tab-cards__nav {
        margin-top: 20px;
    }

    .tab-cards__tab {
        padding: 9px 18px;
        font-size: 14px;
    }

    .tab-cards__card {
        padding: 20px;
    }

    .tab-cards__name {
        font-size: 21px;
        line-height: 28px;
    }

    /* nhãn góc lùi vào cho khỏi đè mép bo tròn ở màn hẹp */
    .tab-cards__badge {
        right: 12px;
        padding: 4px 12px;
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .tab-cards--hide-sm {
        display: none;
    }
}


/* ==========================================================================
   VHP — Product Landing PHIÊN BẢN 2, section mở đầu (giá + màu xe)
   View: extension/module/product_landing_sections/v2_hero_price.tpl
   Số đo suy từ chatimg/chitiet1.png (1901x819).
   ⚠ KHÔNG chốt được hệ số k: mép chữ trong ảnh ở x 419, dải thông số ở
     x 388..1512 (1124px) — không mốc nào quy về .container 1350 của site,
     hai mốc lệch nhau > 2%. Ảnh là bản dựng thử ở khung tuỳ ý. Vì vậy dùng
     THANG CHỮ CÓ SẴN của site (40/48 · 18/27 · 40/52 của .price-calc__amount)
     thay vì suy từ ảnh. Màu thì đo trực tiếp nên tin được.
   ========================================================================== */
.vhp {
    --vhp-bg: #08302c;               /* token site; mẫu đo được #0C3B2E */
    --vhp-accent: #17c964;           /* đo trực tiếp: nút Advanced + nút đặc */
    --vhp-panel: rgba(255, 255, 255, .05);
    --vhp-stage: #1d5f45;            /* khung ảnh xe, đo tại (1240,255) */
    --vhp-deep: #082a20;             /* khung ưu đãi, đo tại (1100,410) */
    --vhp-hair: rgba(255, 255, 255, .12);
    /* KHÔNG có padding dưới: dải .vhp__stats phải chạm đáy section, kẻo mấy
       đường kẻ dọc của nó hụt lên trên một khoảng trống 64px */
    padding: 64px 0 0;
    background-color: var(--vhp-bg);
    background-size: cover;
    background-position: center;
    /* quầng sáng góc trên phải, ước lượng từ mẫu (#0F5638 tại 1700,200) */
    background-image: radial-gradient(52% 78% at 88% 12%, rgba(23, 201, 100, .18), rgba(23, 201, 100, 0) 68%);
}

.vhp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* --- cột trái ------------------------------------------------------------- */
.vhp__eyebrow {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--vhp-accent);
}

.vhp__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 44px;
    line-height: 54px;
    font-weight: 700;
    color: #fff;
}

.vhp__desc {
    margin: 12px 0 0;
    max-width: 520px;
    font-size: 18px;
    line-height: 27px;
    color: rgba(255, 255, 255, .8);
}

.vhp__desc p {
    margin: 0 0 8px;
}

.vhp__desc > *:last-child {
    margin-bottom: 0;
}

/* --- chọn bản xe (Advanced | Premium) ------------------------------------- */
.vhp__trims {
    display: inline-flex;
    gap: 4px;
    margin-top: 24px;
    padding: 5px;
    background: rgba(255, 255, 255, .07);
    border-radius: 999px;
}

.vhp__trim {
    /* theme đặt sẵn margin 0 15px 15px 0 cho MỌI <button> -> phải gỡ, kẻo
       viên thuốc bị đội cao thêm 15px và 2 nút bị đẩy xa nhau */
    margin: 0;
    padding: 9px 22px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: rgba(255, 255, 255, .72);
    text-transform: none;            /* theme đặt uppercase cho <button> */
    letter-spacing: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.vhp__trim.is-active {
    background: var(--vhp-accent);
    color: #06251c;
}

/* --- giá ------------------------------------------------------------------ */
.vhp__price-label {
    margin: 22px 0 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.vhp__price {
    margin: 6px 0 0;
    font-size: 40px;
    line-height: 52px;
    font-weight: 700;
    color: #fff;
}

.vhp__price-note {
    margin-left: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, .7);
}

/* --- chấm màu xe ---------------------------------------------------------- */
.vhp__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.vhp__color {
    /* cùng lý do như .vhp__trim: margin mặc định của <button> trong theme làm
       bước giữa 2 chấm màu thành 66px thay vì 50px */
    margin: 0;
    width: 38px;
    height: 38px;
    /* theme đặt min-height 38.8px cho <button> -> chấm màu bị cao hơn rộng 1px */
    min-height: 0;
    line-height: 0;
    padding: 4px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .15s ease;
}

.vhp__color span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--vhp-swatch, #ccc);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
}

.vhp__color:hover {
    border-color: rgba(255, 255, 255, .45);
}

.vhp__color.is-active {
    border-color: var(--vhp-accent);
}

/* --- nút ------------------------------------------------------------------ */
.vhp__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.vhp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.vhp__btn--solid {
    background: var(--vhp-accent);
    border: 1px solid var(--vhp-accent);
    color: #06251c;
}

.vhp__btn--solid:hover,
.vhp__btn--solid:focus {
    background: #14b459;
    border-color: #14b459;
    color: #06251c;
}

.vhp__btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
}

.vhp__btn--outline:hover,
.vhp__btn--outline:focus {
    border-color: var(--vhp-accent);
    color: #fff;
}

/* --- cột phải: khung ảnh xe + ưu đãi -------------------------------------- */
.vhp__panel {
    padding: 22px;
    background: var(--vhp-panel);
    border: 1px solid var(--vhp-hair);
    border-radius: 20px;
}

.vhp__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: 20px;
    background: linear-gradient(160deg, var(--vhp-stage) 0%, var(--vhp-deep) 100%);
    border-radius: 14px;
    overflow: hidden;
}

.vhp__car {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity .15s ease;
}

.vhp__promo {
    margin-top: 18px;
    padding: 20px 24px;
    background: var(--vhp-deep);
    border-radius: 14px;
}

.vhp__promo-head {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--vhp-accent);
}

/* Ruột khung ưu đãi là HTML người quản trị gõ trong trình soạn thảo (thường là
   <ul><li>), nên CSS phải chuẩn hoá lại chứ không trông chờ vào class. */
.vhp__promo-list ul,
.vhp__promo-list ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vhp__promo-list > *:last-child {
    margin-bottom: 0;
}

.vhp__promo-list p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 22px;
    color: rgba(255, 255, 255, .88);
}

.vhp__promo-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 26px;
    font-size: 15px;
    line-height: 22px;
    color: rgba(255, 255, 255, .88);
}

.vhp__promo-list li:last-child {
    margin-bottom: 0;
}

/* dấu ✓ là hình trang trí thuần tuý -> dựng cứng, không lấy từ admin */
.vhp__promo-list li::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 3px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--vhp-accent);
    border-bottom: 2px solid var(--vhp-accent);
    transform: rotate(-45deg);
}

/* --- dải thông số dưới cùng ----------------------------------------------- */
.vhp__stats {
    display: grid;
    grid-template-columns: repeat(var(--vhp-stat-cols, 4), minmax(0, 1fr));
    margin-top: 48px;
    border-top: 1px solid var(--vhp-hair);
}

.vhp__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 34px 16px;
    text-align: center;
}

/* kẻ ngăn đặt ở ô THỨ 2 trở đi để ô đầu không mọc kẻ cắt lề trái */
.vhp__stat + .vhp__stat {
    border-left: 1px solid var(--vhp-hair);
}

.vhp__stat-num {
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    color: var(--vhp-accent);
}

.vhp__stat-label {
    font-size: 15px;
    line-height: 22px;
    color: rgba(255, 255, 255, .72);
}

@media (max-width: 991px) {
    /* chỉ đổi nhịp dọc — dùng padding-block để không xoá mất padding ngang */
    .vhp {
        padding-block: 48px 0;
    }

    .vhp__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .vhp__title {
        font-size: 34px;
        line-height: 44px;
    }

    .vhp__price {
        font-size: 32px;
        line-height: 42px;
    }

    /* ép 2 cột, không để lưới tự xuống dòng sinh hàng mồ côi.
       Lúc 2 cột kẻ dọc đổi selector -> nth-child(2n) kẻo ô đầu hàng mọc kẻ. */
    .vhp__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 32px;
    }

    .vhp__stat + .vhp__stat {
        border-left: 0;
    }

    .vhp__stat:nth-child(2n) {
        border-left: 1px solid var(--vhp-hair);
    }

    .vhp__stat:nth-child(n + 3) {
        border-top: 1px solid var(--vhp-hair);
    }
}

@media (max-width: 575px) {
    .vhp {
        padding-block: 36px 0;
    }

    .vhp__title {
        font-size: 28px;
        line-height: 38px;
    }

    .vhp__desc {
        font-size: 16px;
        line-height: 25px;
    }

    .vhp__price {
        font-size: 28px;
        line-height: 38px;
    }

    .vhp__price-note {
        display: block;
        margin: 0;
    }

    .vhp__panel {
        padding: 14px;
    }

    .vhp__promo {
        padding: 16px;
    }

    .vhp__btn {
        flex: 1 1 100%;
    }

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

    .vhp__stat:nth-child(2n) {
        border-left: 0;
    }

    .vhp__stat + .vhp__stat {
        border-top: 1px solid var(--vhp-hair);
    }
}


/* ==========================================================================
   CMP — Product Landing PHIÊN BẢN 2, bảng so sánh 2 bản xe
   View: extension/module/product_landing_sections/v2_compare.tpl
   Số đo suy từ chatimg/chitiet2.png (1365x745).
   ⚠ Ảnh mẫu bị crop lệch (lề trái 135, lề phải 107) nên KHÔNG chốt được hệ số
     k từ bề rộng. Hai mốc chữ cho k ≈ 1.175 (cao chữ hoa nhãn nhỏ 9px -> 14px,
     cao chữ hoa tiêu đề ~19.5px -> 32px) — đúng bằng THANG CHỮ CÓ SẴN của site
     (.tab-cards 32/42, nhãn nhỏ 14/20), nên dùng thẳng thang đó.
   Màu thì đo trực tiếp và trùng khít token có sẵn: viền #e1ded2 · kem #f1e7d3 ·
   nền #f6f4ee · xanh #17c964 — chỉ #fbf7ee (nền cột nổi bật) là màu mới.
   Nhịp bảng đo được: hàng tiêu đề 48px, mỗi hàng 50px, bo góc 14px, thụt lề ô
   18px -> quy đổi theo k thành 56 / 58 / 16 / 22.
   ========================================================================== */
.cmp {
    --cmp-ink: #141613;
    --cmp-ink-2: #5b6259;
    --cmp-dark: #08302c;             /* token site; nhãn nhỏ đo được #0C3B2E */
    --cmp-accent: #17c964;           /* nhãn "khác biệt" */
    --cmp-line: #e1ded2;
    --cmp-cream: #f1e7d3;            /* ô tiêu đề cột nổi bật */
    --cmp-cream-soft: #fbf7ee;       /* thân cột nổi bật */
    padding: 40px 0 56px;
    background-color: #f6f4ee;
}

.cmp__eyebrow {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cmp-dark);
}

.cmp__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--cmp-ink);
}

.cmp__desc {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--cmp-ink-2);
}

.cmp__desc p,
.cmp__desc ul,
.cmp__desc ol {
    margin: 0 0 8px;
}

.cmp__desc > *:last-child {
    margin-bottom: 0;
}

/* --- bảng ----------------------------------------------------------------- */
.cmp__wrap {
    margin-top: 32px;
    overflow-x: auto;                /* màn hẹp: cuộn trong lòng bảng */
    background: #fff;
    border: 1px solid var(--cmp-line);
    border-radius: 16px;
}

.cmp__table {
    width: 100%;
    min-width: 680px;                /* dưới mức này thì cuộn, không bóp chữ */
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.cmp__table th,
.cmp__table td {
    padding: 16px 22px;
    text-align: left;
    vertical-align: middle;
    border: 0;
}

/* hàng tiêu đề để NGUYÊN màu nền section, phân biệt bằng kẻ dưới — đúng mẫu */
.cmp__th {
    height: 56px;
    background: #f6f4ee;
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cmp-ink-2);
}

.cmp__table thead th {
    border-bottom: 1px solid var(--cmp-line);
}

.cmp__td {
    height: 58px;
    font-size: 16px;
    line-height: 26px;
    color: var(--cmp-ink);
}

.cmp__table tbody tr + tr td {
    border-top: 1px solid var(--cmp-line);
}

/* cột đầu hẹp hơn, cột nổi bật rộng nhất vì chứa cả nhãn "khác biệt" */
.cmp__table th:first-child,
.cmp__table td:first-child {
    width: 30%;
}

.cmp__table th:nth-child(2),
.cmp__table td:nth-child(2) {
    width: 26%;
}

/* --- cột nổi bật ---------------------------------------------------------- */
.cmp__cell--hl {
    background: var(--cmp-cream-soft);
    font-weight: 700;
}

.cmp__th.cmp__cell--hl {
    background: var(--cmp-cream);
    color: #b08a4e;                  /* gold có sẵn của site (--tc-gold) */
}

.cmp__diff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: var(--cmp-accent);
    white-space: nowrap;
}

/* chấm tròn là hình trang trí thuần tuý -> dựng cứng, không lấy từ admin */
.cmp__diff::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cmp-accent);
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .cmp__title {
        font-size: 26px;
        line-height: 34px;
    }

    .cmp__wrap {
        margin-top: 24px;
    }
}

/* Dưới 768px KHÔNG để bảng cuộn ngang: cột nổi bật là cột đáng xem nhất, để nó
   nằm ngoài màn hình thì coi như mất. Bỏ min-width, thu chữ và lề cho 3 cột
   cùng lọt, chữ dài thì xuống dòng. */
@media (max-width: 767px) {
    .cmp__table {
        min-width: 0;
    }

    .cmp__table th,
    .cmp__table td {
        padding: 12px 8px;
    }

    .cmp__th {
        height: auto;
        font-size: 11px;
        letter-spacing: .8px;
    }

    .cmp__td {
        height: auto;
        font-size: 14px;
        line-height: 21px;
    }

    /* Gần như chia đều 3 cột: chuỗi giá "1.569.000.000đ" KHÔNG có chỗ ngắt,
       cột hẹp hơn ~113px là chữ tràn ra ngoài ô. Cột nhãn chừa hẹp nhất vì
       chữ ở đó xuống dòng được. */
    .cmp__table th:first-child,
    .cmp__table td:first-child {
        width: 31%;
    }

    .cmp__table th:nth-child(2),
    .cmp__table td:nth-child(2) {
        width: 34%;
    }

    .cmp__diff {
        display: flex;               /* xuống dòng riêng cho khỏi ép chữ */
        margin: 4px 0 0;
        font-size: 11px;
    }
}

@media (max-width: 575px) {
    .cmp {
        padding-block: 32px 40px;     /* chỉ đổi nhịp dọc, giữ padding ngang */
    }

    .cmp__eyebrow {
        margin-bottom: 10px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .cmp__title {
        font-size: 24px;
        line-height: 32px;
    }
}


/* ==========================================================================
   PICK — Product Landing PHIÊN BẢN 2, "Phiên bản nào phù hợp với bạn?"
   View: extension/module/product_landing_sections/v2_pick.tpl
   Số đo suy từ chatimg/chitiet3.png (1231x478). Vùng nội dung x 49..1172 =
   1123px — ĐÚNG BẰNG bảng ở chitiet2.png, tức cùng một trang mẫu, nên dùng
   lại k = 1.175 đã chốt ở mục CMP (đầu section giữ nguyên thang chữ của site).
   Quy đổi: khe 2 thẻ 21 -> 24 · lề trong thẻ 27 -> 32 · bước dòng danh sách
   33 -> 38 (26 + 12) · tiêu đề thẻ cao chữ hoa 14px -> 22px.
   Màu đo trực tiếp, trùng token có sẵn: viền #e1ded2 · vàng #b08a4e ·
   kem #f1e7d3 · nền thẻ nổi bật #fdfaf3 (= --tc-gold-bg).
   ========================================================================== */
.pick {
    --pick-ink: #141613;
    --pick-ink-2: #5b6259;
    --pick-dark: #08302c;
    --pick-accent: #17c964;          /* dấu tích thẻ thường */
    --pick-gold: #b08a4e;            /* nhãn + dấu tích thẻ nổi bật */
    --pick-gold-line: #e2cfa8;       /* viền thẻ nổi bật */
    --pick-line: #e1ded2;
    --pick-cream: #f1e7d3;           /* khung ghi chú của thẻ nổi bật */
    padding: 40px 0 56px;
    background-color: #f6f4ee;
}

.pick__eyebrow {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pick-dark);
}

.pick__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--pick-ink);
}

.pick__desc {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--pick-ink-2);
}

.pick__desc > *:last-child {
    margin-bottom: 0;
}

/* --- lưới thẻ ------------------------------------------------------------- */
.pick__grid {
    display: grid;
    grid-template-columns: repeat(var(--pick-cols, 2), minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
    align-items: stretch;            /* 2 thẻ cao bằng nhau dù chữ ngắn dài */
}

.pick__card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--pick-line);
    border-radius: 16px;
}

.pick__card--hl {
    background: #fdfaf3;
    border-color: var(--pick-gold-line);
}

.pick__label {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pick-ink-2);
}

.pick__card--hl .pick__label {
    color: var(--pick-gold);
}

.pick__name {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--pick-ink);
}

/* --- danh sách gạch đầu dòng (người quản trị gõ <ul><li>) ------------------ */
.pick__list {
    flex: 1 1 auto;                  /* nở ra để khung ghi chú của 2 thẻ thẳng hàng */
    margin-top: 20px;
}

.pick__list ul,
.pick__list ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pick__list p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 26px;
    color: var(--pick-ink);
}

.pick__list li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 28px;
    font-size: 16px;
    line-height: 26px;
    color: var(--pick-ink);
}

.pick__list li:last-child,
.pick__list > *:last-child {
    margin-bottom: 0;
}

/* dấu ✓ là hình trang trí thuần tuý -> dựng cứng, không lấy từ admin */
.pick__list li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 3px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--pick-accent);
    border-bottom: 2px solid var(--pick-accent);
    transform: rotate(-45deg);
}

.pick__card--hl .pick__list li::before {
    border-left-color: var(--pick-gold);
    border-bottom-color: var(--pick-gold);
}

/* --- khung ghi chú cuối thẻ ----------------------------------------------- */
.pick__note {
    margin: 28px 0 0;
    padding: 14px 16px;
    background: #f6f4ee;
    border-radius: 10px;
    font-size: 15px;
    line-height: 24px;
    color: var(--pick-ink-2);
}

.pick__card--hl .pick__note {
    background: var(--pick-cream);
}

@media (max-width: 991px) {
    .pick__title {
        font-size: 26px;
        line-height: 34px;
    }

    .pick__grid {
        gap: 20px;
        margin-top: 24px;
    }

    .pick__card {
        padding: 24px;
    }

    .pick__name {
        font-size: 20px;
        line-height: 28px;
    }
}

/* dưới 768px xếp dọc: 2 thẻ cạnh nhau ở bề ngang này thì chữ vỡ vụn */
@media (max-width: 767px) {
    .pick__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .pick {
        padding-block: 32px 40px;     /* chỉ đổi nhịp dọc, giữ padding ngang */
    }

    .pick__eyebrow {
        margin-bottom: 10px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .pick__title {
        font-size: 24px;
        line-height: 32px;
    }

    .pick__card {
        padding: 20px;
    }

    .pick__list li,
    .pick__list p {
        font-size: 15px;
        line-height: 24px;
    }
}


/* ==========================================================================
   GAL — Product Landing PHIÊN BẢN 2, "Hình ảnh & video" (tab + màu xe)
   View: extension/module/product_landing_sections/v2_gallery.tpl
   Số đo suy từ chatimg/chitiet4.png (1333x494). Vùng nội dung x 98..1221 =
   1123px — LẠI đúng bằng 2 ảnh mẫu trước, cùng một trang mẫu, nên dùng lại
   k = 1.175 đã chốt ở mục CMP.
   Quy đổi: thẻ ảnh 270x201 (tỉ lệ 4:3) · khe thẻ 14 -> 16 · nút tab cao 38 ->
   44 · chấm màu ⌀16 -> 20, bước 24.5 -> 30.
   Nền section đo được TRẮNG (#fff), khác 2 section trên (kem #f6f4ee).
   ========================================================================== */
.gal {
    --gal-ink: #141613;
    --gal-ink-2: #5b6259;
    --gal-dark: #08302c;             /* nền tab đang chọn + vòng quanh màu đang chọn */
    --gal-line: #e1ded2;
    --gal-ph: #e8ece5;               /* nền ô ảnh khi chưa chọn ảnh */
    padding: 40px 0 56px;
    background-color: #fff;
}

.gal__eyebrow {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gal-dark);
}

.gal__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--gal-ink);
}

/* --- thanh tab ------------------------------------------------------------ */
.gal__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.gal__tab {
    margin: 0;                       /* theme đặt margin 0 15px 15px 0 cho <button> */
    padding: 11px 24px;
    background: #fff;
    border: 1px solid var(--gal-line);
    border-radius: 999px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--gal-ink);
    text-transform: none;            /* theme đặt uppercase cho <button> */
    letter-spacing: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.gal__tab:hover {
    border-color: var(--gal-dark);
}

.gal__tab.is-active {
    background: var(--gal-dark);
    border-color: var(--gal-dark);
    color: #fff;
}

/* --- panel của từng tab / từng màu ---------------------------------------- */
.gal__panel,
.gal__set {
    display: none;
}

.gal__panel.is-active,
.gal__set.is-active {
    display: block;
}

.gal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.gal__card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 12px;
    overflow: hidden;
    background: var(--gal-ph);
    border: 1px solid var(--gal-line);
    border-radius: 12px;
}

.gal__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* chưa chọn ảnh thì in tên ảnh ra giữa ô, đúng như bản dựng mẫu */
.gal__ph {
    font-size: 15px;
    line-height: 24px;
    color: var(--gal-ink-2);
    text-align: center;
}

/* --- DẢI TRƯỢT: bộ ảnh nhiều hơn 5 tấm ------------------------------------
   Theme aqa KHÔNG nạp Owl (chỉ theme vstore có) nên dải trượt làm bằng cuộn
   ngang gốc + scroll-snap: kéo/vuốt sẵn có trên di động, nút bấm chỉ đổi
   scrollLeft. Từ 5 tấm trở xuống thì .gal__grid vẫn là lưới như cũ.
   .gal__stage bọc ngoài để 2 nút bám được vào track; margin-top 22px của
   track tự trôi ra ngoài stage (margin collapse) nên nút vẫn nằm đúng giữa
   chiều cao ảnh. */
.gal__stage {
    position: relative;
}

.gal__grid--slide {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;                 /* Firefox */
    -ms-overflow-style: none;              /* IE/Edge cũ */
    -webkit-overflow-scrolling: touch;
}

.gal__grid--slide::-webkit-scrollbar {
    display: none;
}

.gal__grid--slide > .gal__card {
    flex: 0 0 calc((100% - 48px) / 4);     /* 4 tấm mỗi khung, 3 khe 16px */
    scroll-snap-align: start;
}

.gal__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    /* theme đặt margin / min-height 38.8px / line-height 37px / uppercase cho
       MỌI <button> — phải gỡ hết, kẻo nút méo như đã dính ở .gal__color */
    margin: 0;
    padding: 0;
    min-height: 0;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--gal-line);
    border-radius: 50%;
    color: var(--gal-ink);
    box-shadow: 0 4px 14px rgba(8, 48, 44, .14);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.gal__nav:hover {
    background: var(--gal-dark);
    border-color: var(--gal-dark);
    color: #fff;
}

.gal__nav--prev {
    left: 10px;
}

.gal__nav--next {
    right: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .gal__grid--slide {
        scroll-behavior: auto;
    }
}

/* --- hàng chấm màu -------------------------------------------------------- */
.gal__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.gal__color {
    margin: 0;                       /* gỡ margin mặc định của <button> trong theme */
    padding: 0;
    width: 20px;
    height: 20px;
    /* theme đặt min-height 38.8px + line-height 37px cho MỌI <button>: nó thắng
       height nên chấm tròn bị kéo thành hình bầu dục */
    min-height: 0;
    line-height: 0;
    background: var(--gal-swatch, #ccc);
    border: 1px solid rgba(20, 22, 19, .15);
    border-radius: 50%;
    cursor: pointer;
    /* vòng đánh dấu vẽ bằng box-shadow -> KHÔNG chiếm chỗ, bước giữa 2 chấm
       vẫn đúng 30px như mẫu */
    transition: box-shadow .15s ease;
}

.gal__color:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(8, 48, 44, .35);
}

.gal__color.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gal-dark);
}

@media (max-width: 991px) {
    .gal__title {
        font-size: 26px;
        line-height: 34px;
    }

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

    .gal__grid--slide > .gal__card {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 575px) {
    .gal {
        padding-block: 32px 40px;     /* chỉ đổi nhịp dọc, giữ padding ngang */
    }

    .gal__eyebrow {
        margin-bottom: 10px;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .gal__title {
        font-size: 24px;
        line-height: 32px;
    }

    .gal__tabs {
        margin-top: 20px;
    }

    .gal__tab {
        padding: 9px 18px;
        font-size: 14px;
    }

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

    /* để lộ mép tấm sau -> nhìn là biết còn kéo được nữa */
    .gal__grid--slide > .gal__card {
        flex-basis: 82%;
    }

    .gal__nav {
        width: 38px;
        height: 38px;
    }

    .gal__nav--prev {
        left: 6px;
    }

    .gal__nav--next {
        right: 6px;
    }
}


/* ==========================================================================
   HL — Product Landing PHIÊN BẢN 2, "Điểm nổi bật" (4 thẻ đánh số)
   View: extension/module/product_landing_sections/v2_highlight.tpl
   Số đo suy từ chatimg/chitiet5.png (1243x392). Vùng nội dung x 66..1189 =
   1123px — ĐÚNG BẰNG chitiet2/3/4, tức cùng một trang mẫu.
   k = 1.1861, chốt bằng BỀ RỘNG CHUỖI (mốc đáng tin nhất, xem chitiet6):
   "Thông số kỹ thuật" rộng 237px trong ảnh, mà Inter 32px bold vẽ ra 281.1px.
   Kiểm chéo: 1123 × 1.1861 = 1332 so với .container 1350 — lệch 1.3%, đạt.
   (Cao chữ hoa cho k ≈ 1.14 nhưng đo cap trên ảnh nén sai số lớn, đừng dùng.)
   Cỡ chữ suy từ bề rộng chuỗi thật: tên thẻ 18px (lệch 1.3%), mô tả 16px
   (lệch 0.2% — 15px hụt 6.1%).
   Màu đo trực tiếp, trùng khít token có sẵn: nền #f6f4ee · viền #e1ded2 ·
   thẻ trắng. Ô số đo được #0C3B2E nhưng dùng token site #08302c cho đồng bộ
   (mọi mục v2 khác đều đã làm vậy).
   ========================================================================== */
.hl {
    --hl-ink: #141613;
    --hl-ink-2: #5b6259;
    --hl-dark: #08302c;              /* token site; ô số đo được #0C3B2E */
    --hl-line: #e1ded2;
    padding: 40px 0 56px;
    background-color: #f6f4ee;
}

.hl__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--hl-ink);
}

.hl__grid {
    display: grid;
    grid-template-columns: repeat(var(--hl-cols, 4), minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
    align-items: stretch;            /* các thẻ cao bằng nhau dù chữ ngắn dài */
}

.hl__card {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--hl-line);
    border-radius: 15px;
}

/* ô số: chữ trắng trên nền xanh đậm, KHÔNG phải <button> nên không dính mấy
   thứ theme áp cho button (min-height 38.8 / line-height 37) như .gal__color */
.hl__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--hl-dark);
    font-size: 19px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
}

.hl__name {
    margin: 15px 0 0;
    width: auto;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--hl-ink);
}

/* Khối mô tả nhận HTML thô của trình soạn thảo (p / ul / li / strong) nên cỡ
   chữ khai ở CHÍNH KHỐI rồi cho con thừa kế — khai riêng cho p và li thì thêm
   thẻ mới là lại thiếu một dòng. Chỉ khoảng cách mới phải khai từng thẻ. */
.hl__desc {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--hl-ink-2);
}

.hl__desc p,
.hl__desc ul,
.hl__desc ol {
    margin: 0 0 8px;
}

.hl__desc ul,
.hl__desc ol {
    padding-left: 20px;
}

.hl__desc li {
    margin-bottom: 4px;
}

/* thẻ cuối không đẩy thêm khe, kẻo đáy thẻ hụt so với mấy thẻ bên cạnh */
.hl__desc > *:last-child,
.hl__desc li:last-child {
    margin-bottom: 0;
}

.hl__desc strong,
.hl__desc b {
    font-weight: 700;
    color: var(--hl-ink);
}

.hl__desc a {
    color: var(--hl-dark);
    text-decoration: underline;
}

@media (max-width: 991px) {
    .hl__title {
        font-size: 26px;
        line-height: 34px;
    }

    /* ép 2 cột, không để lưới tự xuống dòng theo số item */
    .hl__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 28px;
    }
}

@media (max-width: 575px) {
    .hl {
        padding-block: 32px 40px;    /* chỉ đổi nhịp dọc, giữ padding ngang */
    }

    .hl__title {
        font-size: 24px;
        line-height: 32px;
    }

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

    .hl__card {
        padding: 20px;
    }

    .hl__num {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .hl__name {
        margin-top: 12px;
        font-size: 17px;
        line-height: 24px;
    }
}


/* ==========================================================================
   SPEC — Product Landing PHIÊN BẢN 2, "Thông số kỹ thuật" (khối xổ xuống)
   View: extension/module/product_landing_sections/v2_spec.tpl
   Số đo suy từ chatimg/chitiet6.png (1269x460). Vùng nội dung x 67..1190 =
   1123px — vẫn đúng bằng chitiet2/3/4/5, cùng một trang mẫu.
   k = 1.1861 chốt bằng BỀ RỘNG CHUỖI: "Thông số kỹ thuật" rộng 237px trong
   ảnh, Inter 32px bold vẽ ra 281.1px. Kiểm chéo: 1123 × 1.1861 = 1332 so với
   .container 1350 — lệch 1.3%.
   Cỡ chữ cũng suy từ bề rộng chuỗi (chính xác hơn đo cao chữ trên ảnh nén):
     tên hàng "Kích thước & khung gầm" 178px ảnh -> 18px bold (lệch 1.3%)
     nội dung 777px ảnh -> 16px (lệch 2.4%; 17px vống 3.7%)
   Nhịp: hàng đóng cao 64px ảnh -> 76 · thụt lề 23 -> 28 · bo góc 12.5 -> 15 ·
   khe tiêu đề->khối 40 -> 48.
   Màu đo trực tiếp, trùng khít token có sẵn: nền #f6f4ee · khối trắng ·
   viền + kẻ ngăn #e1ded2. Dấu +/× đo được #0C3B2E, dùng token site #08302c.
   ========================================================================== */
.spec {
    --spec-ink: #141613;
    --spec-ink-2: #5b6259;
    --spec-dark: #08302c;            /* token site; dấu +/× đo được #0C3B2E */
    --spec-line: #e1ded2;
    padding: 40px 0 56px;
    background-color: #f6f4ee;
}

/* Nhãn nhỏ trên tiêu đề — chỉ hiện khi ô "Tiêu đề phụ" của section có chữ, nên
   kiểu nào không dùng (v2_spec) thì không mọc thêm gì. Cùng thang với
   .gal__eyebrow / .pick__eyebrow: 14/20, ls 2.5, khe xuống tiêu đề 14. */
.spec__eyebrow {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--spec-dark);
}

.spec__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 32px;
    line-height: 42px;
    font-weight: 700;
    color: var(--spec-ink);
}

/* --- biến thể FAQ: y hệt, chỉ đổi nền section sang TRẮNG ------------------
   View: v2_faq.tpl (bọc mỏng v2_spec.tpl, đặt modifier rồi include).
   Số đo suy từ chatimg/chitiet7.png (1378x492), vùng nội dung x 89..1212 =
   1123px — trùng khít chitiet6, hàng 64px ảnh, thụt lề 23, kẻ ngăn #E1DED2,
   tâm dấu +/× cách mép phải 28: KHÔNG có số nào khác nên không tách CSS riêng.
   Khối trắng nằm trên nền trắng, phân biệt bằng đúng cái viền. */
.spec--faq {
    background-color: #fff;
}

/* Cả khối là MỘT thẻ trắng, các hàng ngăn nhau bằng kẻ trên (hàng đầu không
   có) — làm bằng viền dưới thì hàng cuối lại thừa một kẻ sát bo góc. */
.spec__list {
    margin-top: 48px;
    background: #fff;
    border: 1px solid var(--spec-line);
    border-radius: 15px;
    overflow: hidden;                /* bo góc ăn cả kẻ ngăn của hàng đầu/cuối */
}

.spec__row + .spec__row {
    border-top: 1px solid var(--spec-line);
}

.spec__head {
    /* theme áp cho MỌI <button>: margin 0 15px 15px 0, min-height 38.8px,
       line-height 37px, uppercase, nền đặc — phải gỡ hết, đúng như đã phải
       làm ở .gal__color */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 25px 28px;
    width: 100%;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.spec__name {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: var(--spec-ink);
}

/* Dấu +/× vẽ bằng 2 vạch, không dùng ký tự: cỡ và độ dày ăn theo font thì mỗi
   máy một kiểu. Mở ra thì xoay 45° -> thành dấu ×. */
.spec__icon {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.spec__icon::before,
.spec__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--spec-dark);
    transform: translate(-50%, -50%);
}

.spec__icon::before {
    width: 100%;
    height: 1.5px;
}

.spec__icon::after {
    width: 1.5px;
    height: 100%;
}

.spec__row.is-open .spec__icon {
    transform: rotate(45deg);
}

/* Đóng/mở bằng max-height chứ không phải display:none — có thứ để chạy
   transition. JS đặt max-height = scrollHeight thật lúc mở. */
.spec__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.spec__text {
    padding: 0 28px 24px;
    font-size: 16px;
    line-height: 26px;
    color: var(--spec-ink-2);
}

/* nội dung xổ ra là HTML của trình soạn thảo: cỡ chữ khai ở khối cha rồi cho
   con thừa kế, chỉ khoảng cách mới khai từng thẻ */
.spec__text p,
.spec__text ul,
.spec__text ol {
    margin: 0 0 10px;
}

.spec__text ul,
.spec__text ol {
    padding-left: 20px;
}

.spec__text li {
    margin-bottom: 6px;
}

.spec__text > *:last-child,
.spec__text li:last-child {
    margin-bottom: 0;
}

.spec__text strong,
.spec__text b {
    font-weight: 700;
    color: var(--spec-ink);
}

.spec__text a {
    color: var(--spec-dark);
    text-decoration: underline;
}

@media (max-width: 991px) {
    .spec__eyebrow {
        margin-bottom: 10px;
    }

    .spec__title {
        font-size: 26px;
        line-height: 34px;
    }

    .spec__list {
        margin-top: 28px;
    }

    .spec__head {
        padding: 20px 22px;
    }

    .spec__text {
        padding: 0 22px 20px;
    }
}

@media (max-width: 575px) {
    .spec {
        padding-block: 32px 40px;    /* chỉ đổi nhịp dọc, giữ padding ngang */
    }

    .spec__eyebrow {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .spec__title {
        font-size: 24px;
        line-height: 32px;
    }

    .spec__list {
        margin-top: 22px;
    }

    .spec__head {
        gap: 12px;
        padding: 16px 18px;
    }

    .spec__name {
        font-size: 16px;
        line-height: 24px;
    }

    .spec__text {
        padding: 0 18px 16px;
        font-size: 15px;
        line-height: 24px;
    }
}


/* ==========================================================================
   CTA — Product Landing PHIÊN BẢN 2, dải kêu gọi hành động (panel xanh đậm)
   View: extension/module/product_landing_sections/v2_cta.tpl
   Số đo suy từ chatimg/chitiet8.png (1292x281). Panel x 79..1202 = 1123px —
   vẫn đúng bằng chitiet2..7, cùng một trang mẫu, k = 1.1861.
   Cỡ chữ chốt bằng BỀ RỘNG CHUỖI THẬT:
     tiêu đề  388px ảnh -> 30px bold (lệch 2.4%; 32px vống 4.1%)
     mô tả    572px ảnh -> 17px      (lệch 0.7%; 16px hụt 6.6%)
     nhãn nút -> 16px bold + padding ngang 32: dựng lại ra 230/175 so với
                 231/175 đo được (lệch 0.4% và 0.2%) — hai nút cùng khớp nên
                 cặp cỡ-chữ/padding này mới là cặp đúng
   Hộp: panel 187px ảnh -> cao 220 · bo 17.5 -> 20 · nút 46 -> 54, bo 8 -> 10 ·
        khe 2 nút 14 -> 16 · padding panel 49/47 -> 56.
   Màu: nền section #f6f4ee · xanh lá nút đo được #17C964 = ĐÚNG token có sẵn ·
        viền nút 2 đo (107,127,121) = trắng 40% trên nền panel · mô tả đo
        (183,198,188) = trắng 72%.
   ⚠ Panel đo được #082A20, KHÔNG dùng: lệch token site #08302c 12/255 ở kênh
     lam — nhưng đây là màu gần-đen, mắt không phân biệt được, và mọi mục v2
     khác đều đã quy về token. Đổi ý thì sửa đúng một dòng --cta-panel.
   ========================================================================== */
.cta {
    --cta-panel: #08302c;            /* token site; mẫu đo được #082A20 */
    --cta-accent: #17c964;           /* token site, trùng khít mẫu */
    padding: 40px 0 56px;
    background-color: #f6f4ee;
}

.cta__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 56px;
    background: var(--cta-panel);
    border-radius: 20px;
}

/* Cắt bề rộng khối chữ để mô tả xuống dòng đúng chỗ như mẫu (mẫu ngắt sau
   "showroom"). Không cắt thì container của site rộng hơn ảnh mẫu 17px, câu
   tràn hết một dòng và panel thấp đi một dòng. */
.cta__text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 690px;
}

.cta__title {
    margin: 0;
    width: auto;                     /* flatsome đặt width:100% cho h1..h6 */
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color: #fff;
}

.cta__desc {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 26px;
    color: rgba(255, 255, 255, .72);
}

/* nội dung là HTML của trình soạn thảo: cỡ chữ khai ở khối cha cho con thừa
   kế, chỉ khoảng cách mới khai từng thẻ */
.cta__desc p,
.cta__desc ul,
.cta__desc ol {
    margin: 0 0 8px;
}

.cta__desc ul,
.cta__desc ol {
    padding-left: 20px;
}

.cta__desc > *:last-child,
.cta__desc li:last-child {
    margin-bottom: 0;
}

.cta__desc strong,
.cta__desc b {
    font-weight: 700;
    color: #fff;
}

.cta__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 16px;
}

/* <a> chứ không phải <button> nên không dính mấy thứ theme áp cho button,
   nhưng theme CÓ đặt màu/gạch chân cho <a> -> khai lại cho chắc */
.cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    height: 54px;
    border-radius: 10px;
    border: 1px solid transparent;   /* giữ 2 biến thể CÙNG chiều cao */
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.cta__btn--solid {
    background: var(--cta-accent);
    border-color: var(--cta-accent);
    color: var(--cta-panel);
}

.cta__btn--solid:hover,
.cta__btn--solid:focus {
    background: #13b458;
    border-color: #13b458;
    color: var(--cta-panel);
}

.cta__btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

.cta__btn--outline:hover,
.cta__btn--outline:focus {
    background: rgba(255, 255, 255, .1);
    border-color: #fff;
    color: #fff;
}

/* Nút chưa nhập Đường dẫn: template dựng <span> chứ không phải <a> (bấm vào
   thẻ a rỗng là tải lại trang). Vẫn giữ nguyên hình dáng để bố cục không nhảy,
   chỉ bỏ con trỏ bàn tay cho khỏi mời gọi bấm. */
.cta__btn--dead {
    cursor: default;
}

@media (max-width: 991px) {
    /* xếp dọc: chữ trên, nút dưới — để ngang thì nút bị bóp còn 2 dòng */
    .cta__panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 40px;
    }

    .cta__text {
        max-width: none;
    }

    .cta__title {
        font-size: 26px;
        line-height: 34px;
    }
}

@media (max-width: 575px) {
    .cta {
        padding-block: 32px 40px;    /* chỉ đổi nhịp dọc, giữ padding ngang */
    }

    .cta__panel {
        gap: 22px;
        padding: 28px 22px;
        border-radius: 16px;
    }

    .cta__title {
        font-size: 22px;
        line-height: 30px;
    }

    .cta__desc {
        margin-top: 12px;
        font-size: 15px;
        line-height: 24px;
    }

    /* nút chiếm hết bề ngang, xếp chồng — bấm bằng ngón cái cho dễ */
    .cta__actions {
        gap: 12px;
        width: 100%;
    }

    .cta__btn {
        flex: 1 1 100%;
        padding: 0 20px;
        height: 50px;
    }
}


/* ==========================================================================
   MBAR — Thanh nút ghim đáy màn hình, CHỈ hiện trên mobile
   View: extension/module/service/service_mobilebar.tpl — dùng module `service`
   có sẵn (mỗi nút là một item), gắn vào MỌI layout. Không cần module riêng.
   Số đo suy từ chatimg/chantrang.png (359x65) — ảnh là mock ở viewport 320px
   và là ảnh 1:1: nhãn "Gọi tư vấn" đo 53px, Inter 11px vẽ ra 53.9px (lệch
   1.6%), nên KHÔNG phải quy đổi gì.
   Đo được: thanh rộng 320 (= tràn hết bề ngang màn), cao 41, 3 ô đều nhau
   106px, kẻ ngăn + viền trên #E1DED2, ô giữa #17C964, nhãn 11px.
   ⚠ CỐ Ý LÀM KHÁC: cao 52 thay vì 41 và nhãn 12 thay vì 11. Ô cao 41 là dưới
     ngưỡng chạm 44px, chữ 11px cũng dưới mức đọc thoải mái trên điện thoại.
     Muốn đúng y mẫu thì sửa 2 số: --mbar-h và cỡ chữ .mbar__label.
   Góc bo trong ảnh là góc màn hình của máy (mock chụp trong khung điện thoại),
   KHÔNG phải bo góc của thanh — nên thanh ở đây tràn sát mép, không bo.
   ========================================================================== */
.mbar {
    --mbar-h: 52px;
    --mbar-line: #e1ded2;
    --mbar-accent: #17c964;          /* token site, trùng khít mẫu */
    --mbar-ink: #141613;
    --mbar-dark: #08302c;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;                   /* mặc định TẮT — chỉ bật ở media query dưới */
    background: #fff;
    border-top: 1px solid var(--mbar-line);
    /* máy có thanh gạt home (iPhone) thì chừa thêm khoảng an toàn, máy thường
       thì env() trả 0 nên không đổi gì */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mbar__item {
    display: flex;
    flex: 1 1 0;                     /* mấy nút chia ĐỀU bề ngang, đúng mẫu */
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: var(--mbar-h);
    padding: 0 6px;
    background: #fff;
    color: var(--mbar-ink);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.mbar__item + .mbar__item {
    border-left: 1px solid var(--mbar-line);
}

.mbar__item:hover,
.mbar__item:focus {
    color: var(--mbar-ink);
    text-decoration: none;
}

.mbar__item--hl,
.mbar__item--hl:hover,
.mbar__item--hl:focus {
    background: var(--mbar-accent);
    color: var(--mbar-dark);
    font-weight: 700;
}

.mbar__item--dead {
    cursor: default;                 /* chưa nhập Đường dẫn -> template dựng <span> */
}

.mbar__icon {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
}

/* item chọn "Ảnh" thay vì icon: khoá CHIỀU CAO thôi, để ảnh giữ tỉ lệ gốc
   (bẫy #2 — ép cả w lẫn h là ảnh bị méo) */
.mbar__img {
    flex: 0 0 auto;
    width: auto;
    height: 18px;
    object-fit: contain;
}

/* nhãn dài hơn ô thì cắt bằng "…" chứ đừng xuống dòng — xuống dòng là thanh
   cao vống lên, mấy ô lệch nhau */
.mbar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .mbar {
        display: flex;
    }

    /* Chừa chỗ cho thanh, kẻo nó đè lên phần cuối trang không cuộn tới được.
       53 = 52 (chiều cao ô) + 1 (viền trên) — đo thật ra 53, đừng để 52 rồi
       hụt mất một pixel. */
    body:has(.mbar) {
        padding-bottom: calc(53px + env(safe-area-inset-bottom, 0px));
    }
}

/* màn rất hẹp: bỏ biểu tượng đi cho nhãn đủ chỗ */
@media (max-width: 359px) {
    .mbar__item {
        gap: 4px;
        font-size: 11px;
    }

    .mbar__icon,
    .mbar__img {
        display: none;
    }
}