/* ============================================================
   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; }
}