/* ====== Thiet ke lai khoi dau trang chi tiet San pham/Bao gia
   (layout_product.php) — gallery anh, tieu de/rating/gia, uu dai dang the
   cuon ngang, khoi lien he nhanh. Breadcrumb band (.bp-main/.bp-breadcrumb-band)
   va popup gallery (.bp-lightbox) dung chung CSS voi trang Mau thiet ke,
   xem css/inan-layout-blogpost.css — KHONG dinh nghia lai o day. ====== */

/* ---- Cot gallery (col-lg-7) dinh (sticky) khi cuon so voi cot noi dung
   (col-lg-5). Truoc day sticky gan o col-lg-5, nhung sau khi chuyen khoi
   "Thong so noi bat" tu col-lg-7 sang col-lg-5 (dat sau khoi gia), col-lg-5
   thuong dai hon/xap xi col-lg-7 — sticky o col-lg-5 gan nhu khong con
   khong gian de "troi" nua. Doi sticky sang col-lg-7 (thuong ngan hon do
   chi con gallery + thumbnail) de sticky co y nghia tro lai. Tai su dung
   dung position:sticky;top:88px cua .pf-quote-sticky (css/inan-layout-blogpost.css,
   da dung cho cot form bao gia trang Mau thiet ke) — chi bo sung align-self
   vi Bootstrap .row la flex container, mac dinh keo cac cot cao bang nhau
   (stretch) khien sticky khong co khong gian de "dinh". ---- */
.pd-sticky-col {
    align-self: flex-start;
}
/* ====== portfolio-detail 8:4 (layout_portfolio.php, che do khong co TOC sidebar)
   Cot 8: noi dung mau thiet ke (.portfolio-detail, khong doi).
   Cot 4: sao chep nguyen [quote_form] (.ivd-quote-inline-wrap, xem
   shortcode_helper.php), sticky khi scroll — cung offset top:88px voi
   .rp-block-sticky/.toc-nav.toc-sticky de dong bo voi header. ====== */
.pf-quote-sticky{position:sticky;top:140px}
@media(max-width:991px){.pf-quote-sticky{position:static; margin-bottom: 32px}}
/* ---- Gallery anh chinh ---- */
.pd-gallery-main {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    cursor: zoom-in;
    /* KHONG ep khung ve 1 ty le/chieu cao co dinh nua. Day la anh MAU
       (template) — nguoi dung phai thay TRON VEN 100% noi dung anh, khong
       duoc crop bat ky phan nao (kieu object-fit:cover) va cung khong de
       khoang trong 2 ben (kieu object-fit:contain trong khung co san). Cach
       chac chan nhat: KHONG ep kich thuoc gi ca — de #pdMainImg tu quyet
       dinh chieu cao theo dung ty le that cua no (width:100%, height:auto,
       flow binh thuong), khung nay chi la 1 wrapper bao quanh, chieu cao
       cua no TU DONG bang chieu cao anh. */
}

/* #pdGalleryMain cung mang class .bp-gallery__item (de dung chung popup cua
   inan-bp-gallery.js), va .bp-gallery__item img (inan-layout-blogpost.css)
   dat san "position:absolute;inset:0;object-fit:cover" (danh cho luoi nhieu
   o vuong co san, KHONG hop voi 1 anh mau can hien tron ven). Ghi de lai
   ngay tren #pdMainImg (id, uu tien tuyet doi, khong phu thuoc thu tu load
   CSS giua 2 file) ve dung flow binh thuong + height:auto. */
#pdMainImg {
    position: static;
    display: block;
    width: 100%;
    height: auto;
}
.title-pro-des {font-weight: 600}
.pd-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-main, #1f2937);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background .15s ease;
    z-index: 2;
}

.pd-gallery-nav:hover { background: #005EDB; color: #fff; }
.pd-gallery-prev { left: 12px; }
.pd-gallery-next { right: 12px; }

.pd-gallery-counter {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
}

.pd-gallery-thumbs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pd-gallery-thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    flex-shrink: 0;
    padding: 5px;
}

.pd-gallery-thumb.is-active { border-color: #005EDB; }

.pd-gallery-thumb img {
    /* div#news_id img{width:100%!important;height:auto!important} (css/legacy-bootstrap-custom.css)
       bao quanh gallery nay that (da xac nhan qua DOM that, khac voi #news_detail
       o duoi trang) — phai them dung "#news_id" vao day de vuot do dac thu ID. */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border:0;
    border-radius: 3px;
}

.pd-gallery-thumb-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Thong so noi bat: bang co san <tr><td>Nhan</td><td>Gia tri</td></tr>
   (render tu $row->tomtat, HTML admin nhap, KHONG sua PHP/HTML goc) — doi tu
   ngang (nhan|gia tri cung hang) sang doc (nhan tren, gia tri duoi) bang cach
   bien moi <tr> thanh 1 "the" flex-column, tbody flex-wrap de tu xep 2 the
   tren 1 hang (mac dinh), con 1 the/hang khi man hinh <=480px. */

.thongso table {
    display: block;
    width: 100%;
    margin: 0;
}
.thongso table tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.thongso table tr {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 calc(50% - 12px);
    min-width: 130px;
}
.thongso table tr td {
    display: block;
    white-space: normal;
    padding: 0;
    border: none;
}
.thongso table tr td:first-child {
    font-size: 0.875rem;
    color: var(--text-muted, #6b7280);
}
.thongso table tr td:last-child {
    font-size: 0.875rem;
    font-weight: 600;
}
@media (max-width: 576px) {
    .thongso table tr { flex-basis: 100%; }
}

/* ---- Tieu de / Ma san pham / Rating ---- */
.pd-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 6px 0 10px;
}

.pd-sku {
    font-size: 0.875rem;
    color: var(--text-muted, #6b7280);
}

.pd-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--text-main, #1f2937);
    text-decoration: none;
    cursor: pointer;
}

.pd-rating:hover .pd-rating-value,
.pd-rating:hover .pd-rating-count { color:#1250dc }

.pd-rating-star { color: #f59e0b; font-size: 1rem; }
.pd-rating-value { font-weight: 700; color: var(--text-main, #1f2937); }
.pd-rating-count { color: var(--text-muted, #6b7280); }

/* ---- Khoi gia + CTA — 3 cot: Gia | "Hoac" (gach dut tren/duoi) | Ghi chu +
   nut bao gia (thu gon, khong con full-width nhu .btn_yeucaubaogia goc). ---- */
.pd-price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(#eaeffa 0%, #ffffff 45%);
    border: 1px solid #005EDB;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.pd-price-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-price-label { font-size: 0.75rem; color: var(--text-muted, #6b7280); }
.pd-price-value { font-size: 1.375rem; font-weight: 800; color: var(--text-main, #1f2937); line-height: 1.2; }
.pd-price-note { font-size: 0.75rem; color: var(--text-muted, #6b7280); }

.pd-price-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: stretch;
    color:var(--text-muted, #6b7280);
    font-size: 0.75rem;
}
.pd-price-divider-line { flex: 1; width: 0; min-height: 10px; border-left: 1px dashed #c7ccd4; }

.pd-price-alt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pd-price-alt-note { font-size: 0.875rem; white-space: nowrap; }

.pd-price-cta span {
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    width: 35px;
    height: 35px;
    color: #005EDB;
    line-height: 35px;
    margin-left: 8px;
}
.pd-price-cta {
    white-space: nowrap;
    width: auto !important;
    padding: 8px 12px 8px 20px !important;
    border-radius: 50px;
    font-weight: 600;
    color: #fff;
}
.pd-price-cta:hover {color: #fff}
/* ---- Uu dai — the cuon ngang + nut prev/next + cham phan trang ---- */
.pd-uudai-block { margin-bottom: 24px; border-radius: 8px; border: 1px solid #e5e9f0; padding: 16px; }

.pd-uudai-viewport {
    position: relative;
}

.pd-uudai-track {
    display: flex;
    /* Khoet lom gio da bi clip-path gioi han hoan toan trong pham vi the
       (khong con phan noi ra ngoai), nen gap chi can du de tao khoang cach
       thi giac binh thuong giua 2 ve. */
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px;
    scrollbar-width: none;
}

.pd-uudai-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--text-main, #1f2937);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 3;
    transition: opacity .15s ease;
}

.pd-uudai-nav:hover { background: #005EDB; color: #fff; }
.pd-uudai-nav.is-hidden { display: none; }
.pd-uudai-prev { left: -30px; }
.pd-uudai-next { right: -30px; }
.pd-uudai-track::-webkit-scrollbar { display: none; }

/* Dang "ve/coupon mini" — icon trai, thong tin phai, 2 canh trai/phai
   khoet lom hinh ban nguyet giong ve that, KHONG phai 1 the (card) lon
   thong thuong.
   Da thu qua: (1) circle noi + border rieng bi lo ra ngoai card; (2)
   clip-path cat doi 1 hinh tron co border — dung hinh nhung Chrome khong
   khu rang cua (anti-alias) tot cho clip-path nen de lai 1 duong ke thang
   tai ranh gioi cat; (3) CSS mask 2 lop radial-gradient + mask-composite
   — khong tuong thich/khong ap dung duoc nen mat het hieu ung, card hien
   nguyen khong khoet.
   Cach dung: bo han clip-path lan mask. Dung "overflow:hidden" ngay tren
   chinh .pd-uudai-card de tu crop — day la co che clip pho bien, on dinh,
   khong bi loi rang cua nhu clip-path. Pseudo-element la 1 hinh tron DAY
   DU (khong cat rieng), dat tam vua dung o mep card (trai/phai); nua nam
   ngoai card se tu bi overflow:hidden cua card cat bo, nua nam trong hien
   nguyen voi vien tron cua no — vien nay chinh la net ve khoet lom. Vi
   duong cat la tiep tuyen voi duong tron (khong cat xuyen qua giua vien),
   nen khong con duong ke du nao ca. */
.pd-uudai-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 45%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}

.pd-uudai-card::before,
.pd-uudai-card::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
}

.pd-uudai-card::before {
    left: -7px; /* Đẩy vào trong 1px để triệt tiêu khe hở mờ */
    transform: translateY(-50%);
    clip-path: inset(-4px 0 -4px 5px);
}

.pd-uudai-card::after {
    right: -7px; /* Đẩy vào trong 1px */
    transform: translateY(-50%);
    clip-path: inset(-4px 5px -4px 0);
}

.pd-uudai-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 50px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.pd-uudai-card-icon img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.pd-uudai-card-icon svg { width: 25px; height: 25px; }

.pd-uudai-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.pd-uudai-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main, #1f2937);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-uudai-card-desc {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-uudai-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.pd-uudai-status {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pd-uudai-status--live { color: #059669; }

.pd-uudai-card-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary, #0d6efd);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pd-uudai-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.pd-uudai-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dbe0e6;
    cursor: pointer;
    transition: background .15s ease, width .15s ease;
}

.pd-uudai-dot.is-active {
    background: #005EDB;
    width: 16px;
    border-radius: 4px;
}

/* ---- Khoi lien he nhanh (Zalo / Messenger / Goi dien) ---- */
.pd-contact-box {
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
}

.pd-contact-title {
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
}

.pd-contact-title i { color: #005EDB; }

.pd-contact-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pd-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid #005EDB;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease;
}

.pd-contact-btn:hover { background: #f0f6ff; }

.pd-contact-btn-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: #005EDB;
}

.pd-contact-btn-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #005EDB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 650px) and (max-width: 992px) {.pd-uudai-card { width: 35%; }}
@media (max-width: 576px) {.pd-uudai-card { width: 70%; }}
@media (max-width: 480px) {
    /* Hang 1: Zalo + Messenger (2 cot bang nhau) — hang 2: Goi dien (1 nut,
       tran het chieu rong qua grid-column:1/-1, thay vi de trong nua con lai
       cua hang). Dung nth-child(3) (khong dung :last-child, vi Bao gia van
       chi co dung 3 nut cung thu tu Zalo-Messenger-Goi dien nen tuong duong,
       nhung nth-child noi ro dung "nut thu 3" theo dung mo ta cua yeu cau). */
    .pd-contact-buttons { grid-template-columns: repeat(2, 1fr); }
    .pd-contact-buttons .pd-contact-btn:nth-child(3) { grid-column: 1 / -1; }
    .pd-gallery-thumb { width: 56px; height: 56px; }
    .pd-price-box { flex-direction: column; align-items: stretch; }
    .pd-price-cta { width: 100%; justify-content: center; }
    .pd-price-info {align-items: center;}
    /* .pd-price-box chuyen sang cot (tren) — .pd-price-divider von thiet ke
       cho ngu canh HANG NGANG (gach dut DOC tren/duoi chu "Hoac", dung de
       ngan cach 2 khoi NAM CANH NHAU), gio 2 khoi da xep CHONG len nhau
       (Gia / Hoac / CTA) nen phai doi huong 90 do — gach dut NGANG (border-top
       thay border-left) nam 2 BEN trai/phai chu "Hoac" moi dung y nghia
       "duong phan cach giua 2 khoi xep chong". */
    .pd-price-divider { flex-direction: row; justify-content: center; align-self: stretch; width: 100%; }
    /* "ngan lai" (khong con flex:1 keo dai het be rong con lai) + "net nho lai"
       (net dut 3px/khoang cach 3px qua background-image thay vi border-style:
       dashed — net dut cua border kho kiem soat do dai chinh xac, thuong to/
       thua hon rat nhieu so voi 1px border-width, dung background-image cho
       nhin manh/tinh hon). */
    .pd-price-divider-line {
        flex: 0 0 auto;
        width: 20px;
        height: 1px;
        min-height: 0;
        border: none;
        background-image: repeating-linear-gradient(to right, #c7ccd4 0, #c7ccd4 3px, transparent 3px, transparent 6px);
    }
}

/* ---- Doi ngu tu van (right-sidebar-product, ben trong #news_detail) — tai
   su dung NGUYEN VEN .ivd-consult-card/.ivd-consult-avatar/.ivd-consult-name/
   .ivd-consult-phone/.ivd-consult-zalo (dinh nghia trong css/footer-redesign.css,
   da load toan cuc qua template.php cho moi trang — KHONG tao lai CSS card o
   day). Nut prev/next va cham cung tai su dung dung .pd-uudai-nav/.pd-uudai-dots
   (dinh nghia o tren). Phan MOI duy nhat la khung carousel luon 2 hang, so cot
   responsive qua bien --pd-consult-cols (2 o desktop >=992px VA man rat nho
   <576px, 3 o khoang giua 576-991px — dung 2 media query max-width chong len
   nhau, cai sau (575px) thang the o vung giao nhau nen tu dong dung 3 tier). */
.pd-consult-block {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.84), rgba(255, 255, 255, 0.82));
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #b9d4fb;
}
.pd-consult-viewport {
    position: relative;
}
.pd-consult-track {
    --pd-consult-cols: 2;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--pd-consult-cols) - 1) * 14px) / var(--pd-consult-cols));
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px;
    scrollbar-width: none;
}
.pd-consult-track::-webkit-scrollbar { display: none; }
.pd-consult-track .ivd-consult-card {
    scroll-snap-align: start;
    width: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid #c9dffb;

}
@media (max-width: 991px) {
    .pd-consult-track { --pd-consult-cols: 3; }
}
@media (max-width: 575px) {
    .pd-consult-track { --pd-consult-cols: 2; }
}