/* =============================================================================
   KHỐI TRÌNH CHIẾU ĐẦU TRANG — bản dựng bằng Swiper, dùng cho TRANG CHỦ MÁY TÍNH.

   Vì sao có tệp này (2026-08-12, user chốt: "giữ kiểu trình diễn theo từng mẫu như cũ nhưng thay thư
   viện", "giống bản rp đang làm"): bộ `amazingslider` cũ bắt buộc kéo theo **jQuery 1.12.4**, mà tệp
   đó GHI ĐÈ `window.jQuery` của bản 3.5.1 ⇒ đo được trên /homegd6: `slick` · `sticky` · `shorten` ·
   `lazy` · `fancybox` · `$.fn.carousel` ĐỀU biến mất trên trang chủ máy tính của mọi mẫu có trình
   chiếu. Không tách global ra được (đã thử, vỡ hoạt ảnh — xem `_JsTrinhChieu.cshtml`), nên phải bỏ
   hẳn amazingslider.

   Kiểu dáng ở đây LẤY NGUYÊN của bản rp (`qi-home-rp.css`), vốn đã dựng lại trung thực skin "Events"
   theo đúng số đo trong `initslider.js`: ảnh 669×345 phủ kín · dải chú thích #333 mờ 60% dính đáy ảnh
   · dải ảnh nhỏ 185×100 viền trắng 2px mờ .8 cách nhau 8px, KÈM tiêu đề · mũi tên hiện khi trỏ chuột ·
   thanh thời gian 2px · tự chạy 5000ms, dừng khi trỏ chuột.

   🔴 Đã thay ba biến của bộ rp bằng giá trị thật (`--qirp-bo` → 3px, `--qirp-font` → inherit,
   `--qirp-giancach` → -0.01em) để tệp tự đứng được: trang máy tính KHÔNG nạp `qi-home-rp.css`.
   ⚠️ Sửa kiểu dáng thì sửa CẢ HAI nơi, hoặc gộp lại sau khi bản rp và bản desktop đã khớp hẳn.
   ========================================================================== */

.qirp-tieudiem { display: block; }

.qirp-slide { width: 100%; overflow: hidden; border-radius: 3px; background: #000; }

.qirp-slide-anh {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 669 / 345;   /* initslider.js: width 669 · height 345 */
    overflow: hidden;
}

.qirp-slide-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dải chú thích dính đáy ảnh — bản gốc: textbgcss `background-color:#333333; opacity:0.6`,
   textcss `padding:12px`, textpositionstatic "bottom". Ở đây dùng rgba (cùng kết quả nhìn) để chữ
   không bị mờ theo nền như khi đặt opacity cho cả khối. */
.qirp-slide-chu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    background: rgba(51, 51, 51, .6);
    color: #fff;
    font-family: inherit;
    text-align: left;
}

.qirp-slide-tit {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #fff;
}

/* bản gốc: descriptioncss `margin-top:4px; font:12px …; color:#fff` */
.qirp-slide-mota {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: rgba(255, 255, 255, .92);
}

/* Nút trái/phải: dùng khung của Swiper nhưng vẽ LẠI mũi tên.
   Lý do: Swiper.css trong repo đặt `content:'next'/'prev'` với bộ chữ biểu tượng `swiper-icons`, mà
   tệp này KHÔNG kèm @font-face của bộ đó ⇒ để nguyên sẽ hiện đúng chữ "next"/"prev". Vẽ mũi tên bằng
   viền CSS nên không phụ thuộc bộ chữ nào (Font Awesome ở đây có nhiều phiên bản, không chắc chắn). */
.qirp-slide .qirp-slide-nut {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    padding: 0;
    /* bản gốc arrowstyle "mouseover": chỉ hiện khi trỏ chuột vào khung ảnh */
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease;
}

.qirp-slide:hover .qirp-slide-nut, .qirp-slide-nut:focus-visible { opacity: 1; }
/* thiết bị chạm không có trạng thái hover ⇒ luôn hiện, nếu không sẽ không có cách lùi tin */
@media (hover: none) {
    .qirp-slide .qirp-slide-nut { opacity: 1; }
}

.qirp-slide .qirp-slide-nut:after {
    content: "" !important;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.qirp-slide .swiper-button-next:after { transform: rotate(45deg); margin-left: -3px; }
.qirp-slide .swiper-button-prev:after { transform: rotate(-135deg); margin-right: -3px; }
.qirp-slide .qirp-slide-nut:hover { background: var(--mau-md, #0071a6); }

/* Thanh thời gian 2px ở đáy ảnh (bản gốc showtimer/timerheight:2/timercolor #fff/timeropacity .6).
   Swiper 8 không có đồng hồ đếm ngược nên dùng pagination kiểu "progressbar" — cùng vị trí, cùng độ
   dày, chạy theo tin đang xem thay vì theo thời gian còn lại. */
.qirp-slide .qirp-slide-timer {
    top: auto;
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, .25);
}

.qirp-slide .qirp-slide-timer .swiper-pagination-progressbar-fill { background: rgba(255, 255, 255, .85); }

/* ---------- dải ảnh nhỏ (bản gốc: navstyle "thumbnails" ở đáy, kèm TIÊU ĐỀ) ----------
   Đo thật trên /homegd147: mỗi ô 181×186 = ảnh 181×96 + chữ 181×90; chữ theo navthumbtitlecss
   `bold 12px/16 #004175, padding 10px 4px, căn trái`. */
.qirp-slide-thumb { width: 100%; margin-top: 8px; }              /* navspacing 8 */
.qirp-slide-thumb .swiper-slide {
    width: 185px;                                                 /* navwidth 185 */
    height: auto;
    opacity: .8;                                                  /* navopacity 0.8 */
    border: 2px solid #fff;                                       /* navborder 2 · navbordercolor #fff */
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

.qirp-slide-thumb .swiper-slide img { width: 100%; height: 96px; object-fit: cover; display: block; }

/*  🔴 CHIỀU CAO PHẢI LÀ BỘI SỐ CỦA `line-height`, KÈM `-webkit-line-clamp`.
    Trước đây: cao 90px − đệm 20px = 70px chỗ chữ, mà mỗi dòng 16px ⇒ 4,375 dòng ⇒ dòng thứ 5 bị
    CẮT NGANG THÂN CHỮ, còn lại mấy vạch xám mảnh dưới ô ảnh nhỏ — đúng thứ user gọi là
    "thừa gạch" (báo 2026-08-06 trên /homehcmrp; bản điện thoại còn rõ hơn: 50px chỗ chữ / 15px
    = 3,33 dòng). Nay 4 dòng × 16 + đệm = 84px và clamp đúng 4 dòng ⇒ không còn dòng cụt. */
.qirp-slide-thumb .qirp-thumb-tit {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    /*  KHÔNG có đệm DƯỚI: `overflow:hidden` cắt ở mép PADDING, nên còn đệm dưới là dòng kế tiếp
        vẫn ló vào đúng vùng đệm đó thành vạch mảnh. Cao = đệm trên 10 + 4 dòng × 16 = 74px.
        (`-webkit-line-clamp` KHÔNG dùng được ở đây: `.swiper-slide` là flex container nên thẻ con bị
        blockify, `display:-webkit-box` biến thành `flow-root` ⇒ clamp mất tác dụng.) */
    height: 74px;
    overflow: hidden;
    padding: 10px 4px 0;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    /*  MÀU CHỮ = ĐÚNG BẢN CŨ (user 2026-08-07: "chỉnh màu chữ slide tin tức giống trang homehcm").
        `initslider.js` khai navthumbtitlecss màu #004175, NHƯNG bộ skin dùng chung của amazingslider
        (`/js/home/slidehome/style.css` dòng 2851) đè lại bằng
        `.amazingslider-nav-thumbnail-tite-0 > a { color:#1c1c1c !important }` — mà tệp skin đó do MỌI
        mẫu có slideshow nạp ⇒ #1c1c1c mới là màu người dùng thật sự nhìn thấy ở bản cũ.
        (Giữ nguyên 12px/16px của bản rp: chiều cao ô 74px = đệm 10 + 4 dòng × 16 đã tính theo số này.) */
    color: #1c1c1c;
}

/*  Ô ảnh nhỏ ĐANG CHỌN: chỉ sáng lên, KHÔNG viền màu (user chốt 2026-08-11 — Sở GD&ĐT TP.HCM nhắn
    "bỏ viền đỏ đi anh").
    Trước đây tô `border-color: var(--mau-md)` = màu thương hiệu của đơn vị, theo tham số
    `navselectedbordercolor` của amazingslider bản cũ. Đơn vị dùng tông ĐỎ (hcmedu #da251c) thì ô đang
    chọn viền đỏ chói giữa dải ảnh trắng, nhìn như đang báo lỗi.
    🔑 VẪN GIỮ `border: 2px solid #fff` của quy tắc gốc — bỏ hẳn đường viền thì ô hụt 4px bề ngang và
    cả dải ảnh nhỏ xô đi mỗi lần đổi ảnh. Nay viền luôn trắng, trùng nền, coi như không có.
    Dấu hiệu "đang chọn" còn lại là độ mờ: ô khác 0.8, ô đang chọn 1. */
.qirp-slide-thumb .swiper-slide-thumb-active { opacity: 1; }

@media (max-width: 575.98px) {
    /* 1,94:1 trên máy 390px chỉ cao 201px, quá dẹt ⇒ dùng 3:2 cho điện thoại */
    .qirp-slide-anh { aspect-ratio: 3 / 2; }
    .qirp-slide-tit { font-size: 15px; line-height: 21px; }
    .qirp-slide-mota { display: none; }        /* chỗ hẹp: giữ tiêu đề cho rõ, như bản mobile cũ */
    .qirp-slide .qirp-slide-nut { width: 28px; height: 28px; margin-top: -14px; }
    /* điện thoại: thu ô ảnh nhỏ nhưng VẪN giữ tiêu đề (3 dòng) như bản desktop */
    .qirp-slide-thumb .swiper-slide { width: 140px; }
    .qirp-slide-thumb .swiper-slide img { height: 76px; }
    /* 3 dòng × 15px + đệm 12px = 57px (xem ghi chú ở rule gốc: cao phải là bội số của line-height,
       nếu không dòng cuối bị cắt ngang thành vạch xám). */
    .qirp-slide-thumb .qirp-thumb-tit {
        height: 51px;              /* đệm trên 6 + 3 dòng × 15 = 51, KHÔNG đệm dưới */
        padding: 6px 4px 0;
        line-height: 15px;
        font-size: 11.5px;
        -webkit-line-clamp: 3;
    }
}

/* ---------- khi đang dùng VỎ MOBILE (thanh công cụ cố định của /homemb) ----------
   .snap-content của bản mobile được đẩy xuống dưới thanh công cụ; trang chủ mobile cũ đặt 115 px vì
   có banner + menu cuộn + chữ chạy — bản responsive dùng đúng bộ đó nên giữ cùng số đo. */
.qirp-snap { top: 46px; }
.qirp-mb { padding: 10px; }
.qirp-mb .qirp-luoi { grid-template-columns: minmax(0, 1fr); }