/* Hero banner dau trang Landingpage san pham (tintuc.layout=1, danhmuc 9/10,
   xem application/modules/inan/views/layout_product_landingpage.php).
   Dang phong theo section "section-pricing-summary" cua trang landing
   Haravan (promotion.haravan.com/pages/tiet-kiem-50) — GIU NGUYEN ten class
   goc de tien doi chieu/dieu chinh sau. Anh nen (background-image) dung
   dung URL cua ban goc theo yeu cau — day la placeholder, se thay bang anh
   nen rieng cua site khi co (chi con noi dung .summary-deals-inner cung la
   placeholder copy nguyen, se duoc thay noi dung that o 1 buoc dieu chinh
   rieng). */

.section-pricing-summary {
    position: relative;
    background-color: var(--ivd-brand, #005EDB);
    background-image: url("../images/bg-hero-landingpage.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding: 32px 0 56px;
    overflow: hidden;
}

.section-pricing-summary .lp-hero-breadcrumb {
    margin-bottom: 20px;
}
.section-pricing-summary .lp-hero-breadcrumb .ivd-breadcrumb,
.section-pricing-summary .lp-hero-breadcrumb .ivd-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
}
.section-pricing-summary .lp-hero-breadcrumb .ivd-breadcrumb li[aria-current] {
    color: #fff;
}
.section-pricing-summary .lp-hero-breadcrumb .ivd-breadcrumb .bc-svg {
    stroke: rgba(255, 255, 255, 0.55);
}

.section-pricing-summary .summary-heading {
    color: #fff;
}
.section-pricing-summary .summary-heading .title {
   font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.029em;
    margin: 0;
    color: #fff;
}
/* .pd-meta-row (SKU + rating) mac dinh thiet ke cho nen trang (inan-pro-des.css)
   — doi mau chu sang sang de doc duoc tren nen toi cua hero. */
.section-pricing-summary .summary-heading .pd-meta-row {
    margin: 10px 0 0;
}
.section-pricing-summary .summary-heading .pd-sku {
    color: rgba(255, 255, 255, 0.75);
}
.section-pricing-summary .summary-heading .pd-rating {
    color: #fff;
}
.section-pricing-summary .summary-heading .pd-rating-value {
    color: #fff;
}
.section-pricing-summary .summary-heading .pd-rating-count {
    color: rgba(255, 255, 255, 0.75);
}
.section-pricing-summary .summary-heading .pd-rating:hover .pd-rating-value,
.section-pricing-summary .summary-heading .pd-rating:hover .pd-rating-count {
    color: #FFD666;
}

.section-pricing-summary .summary-banner {
    margin-top: 32px;
    align-items: center;
}

.section-pricing-summary .block-deals .pd-contact-box,
.section-pricing-summary .block-deals .pd-uudai-block,
.section-pricing-summary .block-deals .pd-price-box{background: #fff; margin-bottom: 12px; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border: 0}
.section-pricing-summary .block-deals {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #199EF9 0%, rgba(39, 162, 245, 0) 55%);
    border-radius: 24px;
    padding: 16px;
}
.section-pricing-summary .block-deals__title {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(156deg, #FFCE41 0%, #FFCF30 13%, #FFEFA9 31%, #FFF697 54%, #FFBF3F 80%, #FFDA6A 90%, #FFE268 100%);
    box-shadow: 2px 2px 3px rgba(158, 103, 22, 0.3);
    border-radius: 16px 16px 0 0;
    padding: 4px;
    color: #510508;
}
.section-pricing-summary .block-tag {
    font-size: 15px;
    font-weight: 700;
    padding: 8px 16px;
    text-align: center;
    color: #510508;
    flex: 0 0 auto;
}
.section-pricing-summary .block-tag .title {
    font-size: 30px;
    line-height: 1.1;
    color: #510508;
}
.section-pricing-summary .block-title {
    position: relative;
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 14px 8px 12px;
    color: #4C070A;
}
.section-pricing-summary .block-title:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, #FFF49C 0%, #7C1317 50%, #FFF49C 100%);
}
.section-pricing-summary .block-deals__event {
    padding-top: 8px;
}
.section-pricing-summary .list-deal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(0deg, #B4F5FF 0%, #82E3F2 96%, #0080F7 100%, #26DCFF 100%);
    border-radius: 0 0 16px 16px;
    padding: 12px;
}
.section-pricing-summary .list-deal:before {
    content: '';
    position: absolute;
    top: -8px;
    left: -15px;
    width: calc(100% + 30px);
    height: 18px;
    background: #0734C8;
    border-radius: 20px;
    z-index: -1;
}
.section-pricing-summary .list-deal .col-item { flex: 0 0 auto; align-self: stretch; width: 100%; }
.section-pricing-summary .list-deal .item {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 12px 10px;
    box-sizing: border-box;
}
.section-pricing-summary .list-deal .col-item--1 { width: 100%; }
.section-pricing-summary .list-deal .col-item--1 .item { display: flex; align-items: center; gap: 8px; }
.section-pricing-summary .list-deal .col-item--1 .item:not(:first-child) { margin-top: 8px; }
.section-pricing-summary .list-deal .col-item--1 .item .img { width: 40%; flex: 0 0 auto; }
.section-pricing-summary .list-deal .col-item--1 .item .img img { width: 100%; display: block; border-radius: 8px; }
.section-pricing-summary .list-deal .col-item--1 .item .content { width: calc(60% - 8px); }
.section-pricing-summary .list-deal .col-item--1 .item .content .title { font-size: 0.875rem; font-weight: 700; color: #0734C8; margin-bottom: 2px; text-transform: uppercase; }
.section-pricing-summary .list-deal .col-item--1 .item .content .desc { font-size: 13px; color: #4a4f63; }
.section-pricing-summary .list-deal .col-item--1 .item .content .note { font-size: 12px; color: #4a4f63; font-style: italic; }
.section-pricing-summary .list-deal .col-item--1 .item .content ul { margin: 0; padding-left: 16px; font-size: 13px; color: #4a4f63; }
.section-pricing-summary .list-deal .col-item--2 { width: 100%; }
.section-pricing-summary .list-deal .col-item--2 .item .img { text-align: center; margin-bottom: 6px; }
.section-pricing-summary .list-deal .col-item--2 .item .img img { max-height: 40px; }
.section-pricing-summary .list-deal .col-item--2 .item .content ul { margin: 0; padding-left: 16px; font-size: 13px; color: #4a4f63; }

.section-pricing-summary .banner .lazyload-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

/* Nut "Xem thong so" — an .thongso mac dinh (thuoc tinh HTML [hidden]),
   bam vao moi hien bang thong so. */
.pd-thongso-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    background: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ivd-brand, #005EDB);
    cursor: pointer;
}

.pd-thongso-toggle-btn i {
    font-size: 16px;
    transition: transform .2s ease;
}
.pd-thongso-toggle-btn.is-open i {
    transform: rotate(180deg);
}
.section-pricing-summary .thongso {
    margin-top: 10px;
}

@media (max-width: 576px) { .section-pricing-summary .block-title {font-size: 0.875rem}}
/* Duoi 768px: block-tag (nhan + %) chuyen len tren, block-title (mo ta)
   xep xuong duoi, ca 2 can giua toan bo chieu ngang — duong ke :before
   doi tu doc (ngan canh nhau theo hang ngang) sang ngang (ngan tren/duoi
   theo hang doc), nam sat mep tren cua block-title. */
@media (max-width: 767px) {
    .section-pricing-summary .block-deals__title {
        flex-direction: column;
        text-align: center;
        padding: 16px 0;
    }
    .section-pricing-summary .block-title {
        padding: 12px 16px 10px;
        text-align: center;
    }
    .section-pricing-summary .summary-deals .block-deals__title .block-title:before {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, #FFF49C 0%, #7C1317 50%, #f1df50 100%);
    }
}
@media (max-width: 991px) {
    .section-pricing-summary .summary-banner { flex-direction: column-reverse; }
    .section-pricing-summary .summary-banner > .col-lg-5,
    .section-pricing-summary .summary-banner > .col-lg-7 { width: 100%; max-width: 100%; flex: 0 0 100%; }
    .section-pricing-summary .summary-banner > .col-lg-5 {margin-bottom: 24px}
    .section-pricing-summary .list-deal .col-item--1,
    .section-pricing-summary .list-deal .col-item--2 { width: 100%; }
}

/* Doi ngu tu van (.pd-consult-track, dinh nghia goc trong css/inan-pro-des.css
   dung chung ca 2 trang) tren Landingpage can RIENG: 1 hang duy nhat (khong
   phai 2 hang nhu ban goc) + so cot rieng theo breakpoint (yeu cau rieng,
   khac han ban goc: 1200:6, 992:5, 768:3, 576:2). Scope qua .product-full-support
   (chi ton tai o Landingpage, xem layout_product_landingpage.php) — selector
   2 class nay co do dac ta cao hon .pd-consult-track goc (1 class) nen tu
   thang the ma KHONG can !important, khong dung den layout_product.php mac
   dinh. Cac media (min-width) sap tang dan de tier lon hon (sau trong thu tu
   nguon) de len tier nho hon khi ca 2 cung dung o 1 khoang rong. */
.product-full-support .pd-consult-track {
    grid-template-rows: 1fr;
    --pd-consult-cols: 2;
}
@media (min-width: 600px) {
    .product-full-support .pd-consult-track { --pd-consult-cols: 3; }
}@media (min-width: 768px) {
    .product-full-support .pd-consult-track { --pd-consult-cols: 4; }
}
@media (min-width: 992px) {
    .product-full-support .pd-consult-track { --pd-consult-cols: 5; }
}
@media (min-width: 1200px) {
    .product-full-support .pd-consult-track { --pd-consult-cols: 6; }
}