/* ============================================================
   Class tiện ích hiển thị (Bootstrap-style)
   ------------------------------------------------------------
   app.css không có nhóm class này, trong khi các .tpl của theme
   dùng chúng cho:
     - <h1 class="d-none">  : tiêu đề SEO ẩn ở trang chủ
     - $som (Show On Mobile): module đặt som = 0 phải ẩn trên mobile,
       markup sinh ra là class="d-none d-sm-block"
   Thiếu chúng thì tiêu đề SEO lòi ra màn hình và mọi module đều
   hiện trên mobile bất kể cấu hình.
   ============================================================ */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

/* Bootstrap 3 cũ — vài .tpl clone còn dùng */
.hidden-xs { display: block; }
@media (max-width: 767px) {
    .hidden-xs { display: none !important; }
}

/* ============================================================
   Phân trang
   ------------------------------------------------------------
   app.css style theo class .page-btn (lấy từ HTML mẫu), nhưng lớp
   Pagination của core lại sinh ra <ul class="pagination"><li><a>.
   Ánh xạ lại để dùng chung một bộ style, không phải sửa core.
   ============================================================ */

.pagination { list-style: none; padding-left: 0; }
.pagination li { list-style: none; }

.pagination li > a,
.pagination li > span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border-radius: 8px; font-size: .88rem; font-weight: 500;
    color: var(--textColor);
    background: #fff; border: 1.5px solid var(--borderColor);
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
}
.pagination li > a:hover {
    background: var(--mainColorSoft);
    border-color: var(--mainColor);
    color: var(--mainColor);
}
.pagination li.active > span,
.pagination li.active > a {
    background: var(--mainColor);
    color: #fff;
    border-color: var(--mainColor);
}

/* ============================================================
   Danh mục tin ở cột phải (module news_category)
   ------------------------------------------------------------
   app.css chỉ có .blog-sidebar-link (không màu) và :hover.
   HTML mẫu tô màu bằng style inline nên không có class .active
   để dùng lại — bổ sung ở đây, không sửa app.css.
   ============================================================ */

.blog-sidebar-link {
    color: var(--textColor);
    font-weight: 400;
    transition: color .15s;
}
.blog-sidebar-link.active {
    color: var(--mainColor);
    font-weight: 600;
}

/* ============================================================
   Module bộ lọc (extension/module/filter.tpl)
   ------------------------------------------------------------
   app.css chỉ ẩn input[type=checkbox] và tô ô tick qua class
   .checked do JS gắn. Nhóm "Khoảng giá" dùng radio nên vẫn lòi
   nút tròn mặc định, và không có JS nào gắn .checked.
   Bổ sung ở đây để dùng thẳng :checked của trình duyệt.
   ============================================================ */

.cat-filter-item input[type="radio"] { display: none; }

.cat-filter-item input:checked ~ .cat-fi-check {
    background: var(--mainColor);
    border-color: var(--mainColor);
}
.cat-filter-item input:checked ~ .cat-fi-check::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 5px; height: 9px; border: 2px solid #fff;
    border-left: none; border-top: none; transform: rotate(45deg);
}
.cat-filter-item input:checked ~ .cat-fi-text {
    color: var(--mainColor);
    font-weight: 600;
}

/* ============================================================
   Thông báo (toast)
   ------------------------------------------------------------
   Bản trong app.js dùng .text() nên nội dung do core trả về
   (có thẻ <a>) bị in ra thô. Bản thay thế ở javascript/cart.js
   dựng HTML, dùng chung bộ style dưới đây.
   ============================================================ */

.vm-toast-wrap {
    position: fixed;
    /* Goc duoi PHAI da co khoi lien he noi (.sticky-contacts) nen dat ben trai */
    left: 20px;
    bottom: 20px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px, calc(100vw - 40px));
}

.vm-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 10px;
    background: #fff;
    border-left: 4px solid var(--stockInColor);
    box-shadow: 0 10px 30px rgba(17, 24, 39, .18);
    font-size: .88rem;
    line-height: 1.5;
    color: var(--textColor);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s;
}
.vm-toast.is-in { opacity: 1; transform: translateY(0); }

.vm-toast__icon { margin-top: 2px; font-size: 1rem; color: var(--stockInColor); }
.vm-toast__body { flex: 1 1 auto; min-width: 0; }
.vm-toast__body a { color: var(--mainColor); font-weight: 600; text-decoration: none; }
.vm-toast__body a:hover { text-decoration: underline; }

.vm-toast__close {
    flex: 0 0 auto;
    padding: 0 2px;
    border: none;
    background: none;
    color: var(--textLight);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.vm-toast__close:hover { color: var(--textColor); }

.vm-toast--error { border-left-color: var(--dangerColor); }
.vm-toast--error .vm-toast__icon { color: var(--dangerColor); }
.vm-toast--warning { border-left-color: var(--hotColor); }
.vm-toast--warning .vm-toast__icon { color: var(--hotColor); }

@media (max-width: 600px) {
    .vm-toast-wrap { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ============================================================
   Chống tràn ngang trên mobile
   ------------------------------------------------------------
   Nội dung kéo từ web cũ (mô tả sản phẩm, trang thông tin, bài
   viết) mang theo kích thước cứng: <table style="width:498px">,
   <td width="498">, <div style="width:884px">, <iframe width="600">.

   Các khung chứa nó (.pd-lower, .info-grid, .news-grid) là CSS
   grid, mà con của grid mặc định min-width:auto — nên cột bị nội
   dung bên trong đẩy phình ra (đo được: cột 540px trong khung
   339px, article 884px trong khung 343px) và cả trang cuộn ngang.
   ============================================================ */

/* 1. Cho phép cột lưới co nhỏ hơn nội dung bên trong */
.pd-lower > *,
.info-grid > *,
.news-grid > *,
.blog-layout > *,
.cat-layout > * {
    min-width: 0;
}

/* 2. Vùng nội dung soạn thảo: không cho phần tử nào rộng quá khung */
.pd-desc-content,
.pd-short-desc,
.pd-specs-content,
.post-content {
    overflow-wrap: anywhere;
}

.pd-desc-content img,
.pd-short-desc img,
.post-content img {
    max-width: 100% !important;
    height: auto !important;
}

.pd-desc-content iframe,
.pd-desc-content video,
.post-content iframe,
.post-content video {
    max-width: 100%;
}

.pd-desc-content table,
.post-content table {
    max-width: 100%;
}

@media (max-width: 767px) {
    /* Kích thước cứng viết inline (style="width:884px") */
    .pd-desc-content [style*="width"],
    .pd-short-desc [style*="width"],
    .post-content [style*="width"] {
        max-width: 100% !important;
    }

    /* Bảng từ Word: ép vừa khung, ô tự xuống dòng */
    .pd-desc-content table,
    .post-content table {
        width: 100% !important;
    }
    .pd-desc-content td,
    .pd-desc-content th,
    .post-content td,
    .post-content th {
        width: auto !important;
    }

    /* Bản đồ nhúng: full bề ngang */
    .pd-desc-content iframe,
    .post-content iframe {
        width: 100% !important;
    }
}

/* Thuộc tính hidden chỉ được ẩn bằng CSS mặc định của trình duyệt
   (độ ưu tiên thấp), nên .cat-active-filters { display:flex } trong
   app.css đè lên và hàng "Lọc đang dùng" hiện ra dù không lọc gì. */
.cat-active-filters[hidden] { display: none !important; }

/* ============================================================
   Khối "Sản phẩm theo danh mục" ở trang chủ — mobile
   ------------------------------------------------------------
   Trên điện thoại phần đầu khối (tiêu đề, 3 nút lọc nhanh, "Xem tất
   cả", tab danh mục con) xuống tới 7-8 dòng, chiếm gần nửa màn hình
   trước khi thấy sản phẩm đầu tiên. Gọn lại thành 3 dòng:
     [ TIÊU ĐỀ ........................ Xem tất cả > ]
     [ Đang giảm giá | Mới nhất | Giá rẻ nhất  → vuốt ]
     [ Tất cả | Socket 1150 | Socket 1151 ...  → vuốt ]
   Chỉ áp cho .hcs-wrapper (trang chủ); khối "sản phẩm liên quan" ở
   trang chi tiết cũng dùng .hcs-header nhưng không nằm trong đó.
   ============================================================ */

@media (max-width: 767px) {
    .hcs-wrapper .hcs-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
        margin-bottom: 8px;
    }

    .hcs-wrapper .hcs-title {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-size: .95rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hcs-wrapper .hcs-view-all {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
        font-size: .8rem;
    }

    /* Hai hàng vuốt ngang: tràn sát mép thẻ, mờ dần ở mép phải */
    .hcs-wrapper .hcs-header-links,
    .hcs-wrapper .hcs-tabs {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        /* giu lai le trai 12px, neu khong snap se day tab dau dinh sat mep */
        scroll-padding-left: 12px;
        scrollbar-width: none;
        margin-left: -12px;
        margin-right: -12px;
        padding: 2px 32px 2px 12px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    }
    .hcs-wrapper .hcs-header-links::-webkit-scrollbar,
    .hcs-wrapper .hcs-tabs::-webkit-scrollbar { display: none; }

    .hcs-wrapper .hcs-header-links {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 6px;
    }

    .hcs-wrapper .hcs-hlink,
    .hcs-wrapper .hcs-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .hcs-wrapper .hcs-hlink {
        padding: 5px 10px;
        font-size: .76rem;
    }

    .hcs-wrapper .hcs-tabs {
        gap: 6px;
        margin-bottom: 12px;
    }

    .hcs-wrapper .hcs-tab {
        padding: 5px 12px;
        font-size: .78rem;
    }

    /* "Xem tất cả" đã có ở dòng tiêu đề */
    .hcs-wrapper .hcs-tab-see-all { display: none; }
}

/* ============================================================
   [2026-09] Khối "Sản phẩm theo danh mục" trang chủ
   Bỏ 3 nhãn lọc nhanh, tab danh mục con lên chung dòng tiêu đề:
     [ TIÊU ĐỀ | Tất cả | Socket 1150 | Socket 1151 ... | Xem tất cả > ]
   Mobile (<768px) vẫn dùng khối @media phía trên:
     [ TIÊU ĐỀ .................. Xem tất cả > ]
     [ Tất cả | Socket 1150 | ...     → vuốt  ]
   ============================================================ */
@media (min-width: 768px) {
    .hcs-wrapper .hcs-header-inline {
        flex-wrap: nowrap;
        align-items: center;
        gap: 14px;
        margin-bottom: 14px;
    }
    .hcs-wrapper .hcs-header-inline .hcs-title {
        flex: 0 0 auto;
        margin: 0;
        white-space: nowrap;
    }
    .hcs-wrapper .hcs-header-inline .hcs-tabs {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        gap: 6px;
        flex-wrap: wrap;
    }
    .hcs-wrapper .hcs-header-inline .hcs-tab {
        padding: 4px 12px;
        font-size: .8rem;
    }
    .hcs-wrapper .hcs-header-inline .hcs-view-all { margin-left: 0; }
}
@media (max-width: 767px) {
    .hcs-wrapper .hcs-header-inline { margin-bottom: 12px; }
    .hcs-wrapper .hcs-header-inline .hcs-tabs {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-bottom: 0;
    }
}

/* ============================================================
   [2026-09] Trang chi tiết — "Sản phẩm liên quan" ở cột phải
   (thay cho khối Tin tức mới nhất)
   ============================================================ */
.pd-related-side { padding-bottom: 8px; }
.pd-rel-list { list-style: none; margin: 0; padding: 0; }
.pd-rel-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borderLight);
}
.pd-rel-item:last-child { border-bottom: none; }
.pd-rel-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-rel-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-rel-info { flex: 1 1 auto; min-width: 0; padding-right: 40px; }
.pd-rel-name {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--titleColor);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 3px;
}
.pd-rel-name:hover { color: var(--mainColor); }
.pd-rel-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.pd-rel-sale { color: var(--mainColor); font-weight: 700; font-size: .92rem; }
.pd-rel-old { color: var(--textMuted); font-size: .78rem; text-decoration: line-through; }
.pd-rel-stock { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; margin-top: 2px; }
.pd-rel-stock.in-stock { color: var(--stockInColor); }
.pd-rel-stock.no-stock { color: var(--dangerColor); }
.pd-rel-add {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mainColor), var(--mainColorLight));
    color: #fff;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s;
}
.pd-rel-add:hover { transform: translateY(-50%) scale(1.1); }
@media (max-width: 480px) {
    .pd-rel-thumb { flex-basis: 60px; width: 60px; height: 60px; }
}
.header-utils{
font-family: "Manrope", sans-serif;
}
.pd-meta-row, .pd-badge-row, .pd-lower-right .pd-section-card:first-child, .phpop-meta {
	display: none;
}
/* ── Trang chi tiết SP: Trong kho | Bảo hành (giống web cũ, nằm trên mô tả ngắn) ── */
.pd-stock-info {
    display: flex; flex-wrap: wrap; gap: 6px 28px;
    list-style: none; margin: 0 0 10px; padding: 10px 0 0;
    border-top: 1px solid var(--borderColor);
    font-size: .9rem; color: var(--textColor);
}
.pd-stock-info li { position: relative; padding-left: 14px; }
.pd-stock-info li::before {
    content: "\203A"; position: absolute; left: 0; top: -1px;
    color: var(--textMuted); font-size: 1rem;
}
.pd-stock-info__label { font-weight: 700; color: var(--titleColor); }
.pd-stock-info__value.in-stock  { color: var(--subColor); }
.pd-stock-info__value.pre-stock { color: var(--hotColorDark); }
.pd-stock-info__value.no-stock  { color: var(--dangerColor); font-weight: 600; }

/* ── Mô tả ngắn: mỗi dòng (mỗi lần Enter) tự có ô tích đỏ ở đầu ── */
.pd-info .pd-short-desc { border-top: 0; padding-top: 0; }
.pd-short-desc ul, .pd-short-desc ol { list-style: none; padding-left: 0; margin: 0; }
.pd-short-desc p, .pd-short-desc li {
    position: relative; margin: 0 0 4px; padding-left: 24px;
}
.pd-short-desc p::before, .pd-short-desc li::before {
    content: "\f14a"; /* square-check */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 0;
    color: var(--mainColor); font-size: 1rem;
}
/* Dòng trống do Enter 2 lần trong trình soạn thảo thì không gắn ô tích */
.pd-short-desc p:empty { display: none; }

/* ── Tình trạng "Đặt trước / 2-3 ngày" trên thẻ SP ── */
.pc-instock.pre-stock, .hcs-stock.pre-stock, .pd-rel-stock.pre-stock { color: var(--hotColorDark); }

/* ── Ẩn logo reCAPTCHA nổi góc phải (vẫn giữ bảo vệ form) ── */
.grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* ── Tablet: 2 khối sidebar không kéo dãn cao bằng nhau (tránh khoảng trắng thừa) ── */
@media (max-width: 1100px) {
    .pd-sidebar { align-items: flex-start; }
}
/* ── Mobile: ẩn "Yên tâm mua hàng" & "Liên hệ kinh doanh online" như web cũ ── */
@media (max-width: 767px) {
    .pd-sidebar { display: none !important; }
}

/* ── SP hết hàng: nhãn thay nút "Chọn" trong Xây dựng cấu hình ── */
.product-item__button .bp-outstock {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--labelColorSoft); color: var(--dangerColor);
    border: 1px solid var(--mainColorBorder); cursor: not-allowed; font-weight: 600;
}