/* home-news.css — khối "TIN TỨC" trang chủ kiểu tab + bài nổi bật (Includes/HomeNews.ascx, js/home-news.js; docs/module-news/60, Phase 56).
   Tông xanh bệnh viện: #139cd0 (chính), #0f86b4 (đậm), #dff1f9 (nền nhạt). Mọi luật bó trong .hn-sec; tiền tố html body để thắng portal.css (ngoài Git, ép !important nhiều chỗ). */
html body .hn-sec { background: #fff; padding: 34px 0 44px; font-family: var(--bv-font, 'Roboto Condensed', Tahoma, Arial, sans-serif); color: #1e3a4c; }

/* ---- Tiêu đề: chữ TIN TỨC, bên dưới là gạch xanh ngắn hai bên + 3 chấm tròn ở giữa ---- */
html body .hn-sec .hn-head { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 150px; margin: 0 auto 18px; }
html body .hn-sec .hn-line { flex: 1 1 0; height: 2px; background: #139cd0; border-radius: 2px; }
html body .hn-sec .hn-dots { flex: none; display: inline-flex; gap: 5px; }
html body .hn-sec .hn-dots i { width: 6px; height: 6px; border-radius: 50%; background: #139cd0; display: block; }
html body .hn-sec h2.hn-title { margin: 0 0 9px; text-align: center; color: #139cd0; font-size: 23px; font-weight: 700; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; border: 0; padding: 0; background: none; }

/* ---- Tab viên thuốc ---- */
html body .hn-sec .hn-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 0 0 4px; }
html body .hn-sec .hn-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: #7f95a3; font: 600 14px/1 var(--bv-font, 'Roboto Condensed', Tahoma, Arial, sans-serif); padding: 9px 14px; border-radius: 999px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
html body .hn-sec .hn-tab:hover { color: #139cd0; background: #f0f9fd; }
html body .hn-sec .hn-tab[aria-selected="true"] { background: #dff1f9; color: #0f86b4; }
html body .hn-sec .hn-tab:focus-visible { outline: 2px solid #0f86b4; outline-offset: 2px; }
html body .hn-sec .hn-panel[hidden] { display: none; }
html body .hn-sec .hn-empty { text-align: center; color: #7f95a3; padding: 40px 0; margin: 0; }

/* ---- Lưới: trái (nổi bật + 2 bài nhỏ) | phải (danh sách cuộn riêng) ---- */
html body .hn-sec .hn-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px; margin-top: 22px; align-items: stretch; }
html body .hn-sec a.hn-feat, html body .hn-sec a.hn-sub, html body .hn-sec a.hn-row { text-decoration: none; color: inherit; }

/* Ô ảnh: nền dự phòng xanh nhạt + dấu thập mờ; ảnh phủ lên trên (ảnh thiếu/hỏng -> thấy nền dự phòng) */
html body .hn-sec .hn-th { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #e6f5fb; }
html body .hn-sec .hn-ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #eaf7fc, #c3e6f5); color: rgba(19, 156, 208, .38); }
html body .hn-sec .hn-ph svg { width: 34%; max-width: 90px; height: auto; display: block; }
html body .hn-sec .hn-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
html body .hn-sec a:hover .hn-th img { transform: scale(1.04); }

html body .hn-sec .hn-th-feat { aspect-ratio: 16 / 9; box-shadow: 0 6px 22px rgba(19, 156, 208, .20); }
html body .hn-sec .hn-ft { display: block; margin: 16px 2px 8px; font-size: 19px; font-weight: 500; line-height: 1.4; color: #1e3a4c; transition: color .2s ease; }
html body .hn-sec a.hn-feat:hover .hn-ft { color: #139cd0; }

html body .hn-sec .hn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: #8aa3b2; font-size: 12.5px; font-weight: 400; line-height: 1.3; }
html body .hn-sec .hn-mi { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
html body .hn-sec .hn-i { flex: none; opacity: .9; }

/* 2 bài nhỏ dưới bài nổi bật: chữ trái, ảnh phải */
html body .hn-sec .hn-subs { margin-top: 14px; border-top: 1px solid #e3eef4; }
html body .hn-sec a.hn-sub { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 16px 2px; border-bottom: 1px solid #e3eef4; }
html body .hn-sec .hn-st { flex: 1 1 auto; min-width: 0; display: block; }
html body .hn-sec .hn-stt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 9px; font-size: 15px; font-weight: 500; line-height: 1.45; color: #1e3a4c; transition: color .2s ease; }
html body .hn-sec a.hn-sub:hover .hn-stt { color: #139cd0; }
html body .hn-sec .hn-th-sub { flex: 0 0 116px; width: 116px; height: 74px; border-radius: 10px; }

/* Danh sách bên phải: cao bằng cột trái, cuộn riêng, thanh cuộn mảnh xanh */
html body .hn-sec .hn-right { position: relative; min-height: 340px; }
html body .hn-sec ul.hn-list { list-style: none; margin: 0; padding: 0 10px 0 0; position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8fcbe6 transparent; }
html body .hn-sec ul.hn-list::-webkit-scrollbar { width: 6px; }
html body .hn-sec ul.hn-list::-webkit-scrollbar-thumb { background: #8fcbe6; border-radius: 6px; }
html body .hn-sec ul.hn-list li { list-style: none; margin: 0; padding: 0; }
html body .hn-sec a.hn-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 2px; border-bottom: 1px solid #e3eef4; }
html body .hn-sec ul.hn-list li:first-child a.hn-row { padding-top: 2px; }
html body .hn-sec .hn-th-row { flex: 0 0 86px; width: 86px; height: 66px; border-radius: 10px; }
html body .hn-sec .hn-rt { flex: 1 1 auto; min-width: 0; display: block; }
html body .hn-sec .hn-rtt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 5px; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: #1e3a4c; transition: color .2s ease; }
html body .hn-sec a.hn-row:hover .hn-rtt { color: #139cd0; }
html body .hn-sec .hn-rd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; font-size: 13px; line-height: 1.4; color: #6c8b9d; }

/* Nút Xem thêm */
html body .hn-sec .hn-more { text-align: center; margin-top: 28px; }
html body .hn-sec .hn-more a { display: inline-block; border: 1.5px solid #139cd0; color: #139cd0; border-radius: 999px; padding: 8px 24px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
html body .hn-sec .hn-more a:hover, html body .hn-sec .hn-more a:focus-visible { background: #139cd0; color: #fff; }

/* ---- Máy tính bảng và điện thoại ---- */
@media (max-width: 991px) {
    html body .hn-sec { padding: 26px 0 34px; }
    html body .hn-sec .hn-grid { grid-template-columns: 1fr; gap: 6px; }
    html body .hn-sec .hn-right { min-height: 0; }
    html body .hn-sec ul.hn-list { position: static; overflow: visible; padding: 0; }
    html body .hn-sec ul.hn-list li:first-child a.hn-row { padding-top: 14px; }
    html body .hn-sec ul.hn-list li:nth-child(n+7) { display: none; }   /* màn nhỏ không cuộn riêng: chỉ 6 dòng, còn lại xem ở nút Xem thêm */
}
@media (max-width: 575px) {
    html body .hn-sec { padding: 22px 0 30px; }
    html body .hn-sec h2.hn-title { margin: 0 0 8px; }
    html body .hn-sec .hn-head { max-width: 130px; margin-bottom: 14px; }
    html body .hn-sec .hn-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 4px; padding: 0 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    html body .hn-sec .hn-tabs::-webkit-scrollbar { display: none; }
    html body .hn-sec .hn-tab { flex: none; padding: 10px 16px; font-size: 14px; }
    html body .hn-sec .hn-grid { margin-top: 14px; }
    html body .hn-sec .hn-ft { font-size: 17px; margin-top: 12px; }
    html body .hn-sec .hn-th-feat { border-radius: 14px; }
    html body .hn-sec .hn-th-sub { flex-basis: 96px; width: 96px; height: 64px; }
    html body .hn-sec .hn-th-row { flex-basis: 78px; width: 78px; height: 60px; }
    html body .hn-sec .hn-stt { font-size: 14.5px; }
    html body .hn-sec .hn-rtt { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .hn-sec .hn-th img, html body .hn-sec .hn-tab, html body .hn-sec .hn-ft, html body .hn-sec .hn-stt, html body .hn-sec .hn-rtt, html body .hn-sec .hn-more a { transition: none; }
    html body .hn-sec a:hover .hn-th img { transform: none; }
}

/* ---- Bài nổi bật KHÔNG có ảnh (vd. tab Thông báo): thẻ xanh, tiêu đề chữ trắng ---- */
html body .hn-sec .hn-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: 250px; padding: 26px 30px; border-radius: 16px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #139cd0, #0e7fae); box-shadow: 0 6px 22px rgba(19, 156, 208, .25); transition: background .2s ease; }
html body .hn-sec .hn-card-ph { position: absolute; right: -26px; top: -26px; width: 200px; color: rgba(255, 255, 255, .13); }
html body .hn-sec .hn-card-ph svg { width: 100%; height: auto; display: block; }
html body .hn-sec .hn-card-t { position: relative; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 23px; font-weight: 600; line-height: 1.35; color: #fff; }
html body .hn-sec .hn-card .hn-meta { position: relative; color: rgba(255, 255, 255, .88); }
html body .hn-sec a.hn-feat-text:hover .hn-card { background: linear-gradient(135deg, #1aa7dc, #0f86b4); }
@media (max-width: 575px) {
    html body .hn-sec .hn-card { min-height: 190px; padding: 20px; border-radius: 14px; }
    html body .hn-sec .hn-card-t { font-size: 19px; }
}

/* ---- Hover mượt hơn (ghi đè cuối file): cùng một đường cong chuyển động, thời gian dài hơn, ảnh phóng nhẹ + chữ nhích sang phải, nút/thẻ chuyển màu dần ---- */
html body .hn-sec { --hn-ease: cubic-bezier(.22, .61, .36, 1); }
html body .hn-sec .hn-th { isolation: isolate; transition: box-shadow .5s var(--hn-ease); }
html body .hn-sec .hn-th img { transition: transform .8s var(--hn-ease); will-change: transform; backface-visibility: hidden; }
html body .hn-sec a:hover .hn-th img, html body .hn-sec a:focus-visible .hn-th img { transform: scale(1.06); }
html body .hn-sec a.hn-feat:hover .hn-th-feat, html body .hn-sec a.hn-feat:focus-visible .hn-th-feat { box-shadow: 0 12px 30px rgba(19, 156, 208, .30); }
html body .hn-sec .hn-ft, html body .hn-sec .hn-stt, html body .hn-sec .hn-rtt { transition: color .35s var(--hn-ease), transform .45s var(--hn-ease); }
html body .hn-sec a.hn-feat:hover .hn-ft, html body .hn-sec a.hn-sub:hover .hn-stt, html body .hn-sec a.hn-row:hover .hn-rtt,
html body .hn-sec a.hn-feat:focus-visible .hn-ft, html body .hn-sec a.hn-sub:focus-visible .hn-stt, html body .hn-sec a.hn-row:focus-visible .hn-rtt { transform: translateX(4px); }
html body .hn-sec a.hn-row, html body .hn-sec a.hn-sub { transition: border-color .35s var(--hn-ease); }
html body .hn-sec a.hn-row:hover, html body .hn-sec a.hn-sub:hover { border-bottom-color: #b9def0; }
html body .hn-sec .hn-tab { transition: background-color .35s var(--hn-ease), color .35s var(--hn-ease), transform .35s var(--hn-ease); }
html body .hn-sec .hn-tab:hover { transform: translateY(-1px); }
html body .hn-sec .hn-more a { transition: background-color .35s var(--hn-ease), color .35s var(--hn-ease), box-shadow .35s var(--hn-ease), transform .35s var(--hn-ease); }
html body .hn-sec .hn-more a:hover, html body .hn-sec .hn-more a:focus-visible { box-shadow: 0 6px 16px rgba(19, 156, 208, .28); transform: translateY(-2px); }
/* thẻ xanh chữ trắng: không chuyển được gradient -> phủ lớp sáng hơn, hiện dần bằng opacity */
html body .hn-sec .hn-card { transition: box-shadow .45s var(--hn-ease), transform .45s var(--hn-ease); }
html body .hn-sec .hn-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #1aa7dc, #0f86b4); opacity: 0; transition: opacity .5s var(--hn-ease); pointer-events: none; }
html body .hn-sec a.hn-feat-text:hover .hn-card { background: linear-gradient(135deg, #139cd0, #0e7fae); box-shadow: 0 12px 30px rgba(19, 156, 208, .35); transform: translateY(-2px); }
html body .hn-sec a.hn-feat-text:hover .hn-card::before { opacity: 1; }
@media (hover: none) {
    html body .hn-sec a:hover .hn-th img { transform: none; }
    html body .hn-sec a:hover .hn-ft, html body .hn-sec a:hover .hn-stt, html body .hn-sec a:hover .hn-rtt { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html body .hn-sec .hn-th, html body .hn-sec .hn-th img, html body .hn-sec .hn-ft, html body .hn-sec .hn-stt, html body .hn-sec .hn-rtt, html body .hn-sec a.hn-row, html body .hn-sec a.hn-sub, html body .hn-sec .hn-tab, html body .hn-sec .hn-more a, html body .hn-sec .hn-card, html body .hn-sec .hn-card::before { transition: none; }
    html body .hn-sec a:hover .hn-th img, html body .hn-sec a:hover .hn-ft, html body .hn-sec a:hover .hn-stt, html body .hn-sec a:hover .hn-rtt, html body .hn-sec .hn-tab:hover, html body .hn-sec .hn-more a:hover, html body .hn-sec a.hn-feat-text:hover .hn-card { transform: none; }
}

/* ===== Khung ảnh thu nhỏ tỉ lệ 16:9, ảnh phủ đều (2026-11-03) ===== */
/* Ảnh bài viết đa số là 16:9 (480x270, 800x450…) nên khung nhỏ cũng 16:9 (trước đây 86x66 ≈ 4:3 làm ảnh bị cắt/thừa viền, nhìn không đều).
   Ảnh phủ kín khung (cover, canh giữa ngang, lệch lên trên 25% theo chiều dọc để giữ tiêu đề poster) — ảnh 2:1 / 4:3 chỉ bị xén nhẹ. Áp dụng cho danh sách bên phải và 2 bài nhỏ bên trái; ảnh nổi bật lớn giữ nguyên. */
html body .hn-sec .hn-th-row { flex: 0 0 128px; width: 128px; height: 80px; }   /* 2026-11-10 tăng từ 112x63 theo yêu cầu người dùng */
html body .hn-sec .hn-th-sub { flex: 0 0 120px; width: 120px; height: 68px; }
html body .hn-sec .hn-th-row, html body .hn-sec .hn-th-sub { background: #e6f5fb; box-shadow: none; }
html body .hn-sec .hn-th-row img, html body .hn-sec .hn-th-sub img { object-fit: cover; object-position: center 25%; padding: 0; background: none; }
@media (max-width: 575px) {
    html body .hn-sec .hn-th-row, html body .hn-sec .hn-th-sub { flex-basis: 96px; width: 96px; height: 54px; }
}
/* 2026-11-09 hàng danh sách bên phải (máy tính): các hàng cao bằng nhau (home-news.js fit()). Cả KHỐI ảnh + chữ canh giữa dọc trong hàng,
   còn ảnh và chữ thì canh THẲNG ĐẦU với nhau (align-items:flex-start) -> ảnh luôn ngang với dòng chữ đầu. Đường kẻ chuyển lên <li> để nằm đúng đáy hàng. */
@media (min-width: 992px) {
    html body .hn-sec ul.hn-list li { display: flex; align-items: center; border-bottom: 1px solid #e3eef4; }
    html body .hn-sec a.hn-row { flex: 1 1 auto; align-items: flex-start; border-bottom: 0; }
}
/* 2026-11-09 đồng đều hàng: khi JS thêm .hn-tight (cột hẹp) mô tả mỗi bài chỉ 1 dòng */
@media (min-width: 992px) {
    html body .hn-sec .hn-panel.hn-tight .hn-rd { -webkit-line-clamp: 1; }
}

/* 2026-11-10 điện thoại (≤575px): làm đều khối TIN TỨC.
   - bài nhỏ (hn-sub) dùng CÙNG bố cục với danh sách: ảnh bên trái, chữ bên phải (trước: bài nhỏ ảnh phải, danh sách ảnh trái -> lộn xộn);
   - ảnh thu nhỏ 112x70 (trước 96x54), khoảng cách các hàng thống nhất;
   - thanh tab cuộn ngang: mờ dần mép phải để biết còn tab, chừa đệm phải để tab cuối không bị mờ khi cuộn hết. */
@media (max-width: 575px) {
    html body .hn-sec .hn-th-row, html body .hn-sec .hn-th-sub { flex: 0 0 112px; width: 112px; height: 70px; }
    html body .hn-sec a.hn-sub { justify-content: flex-start; gap: 12px; padding: 14px 2px; }
    html body .hn-sec a.hn-sub .hn-th-sub { order: -1; }
    html body .hn-sec a.hn-row { gap: 12px; padding: 14px 2px; }
    html body .hn-sec .hn-tabs { padding-right: 32px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
}