@charset "UTF-8";
/* ============================================================================
   FILE:      hungphuoc-custom.css
   MỤC ĐÍCH:  Ghi đè giao diện Cổng thông tin điện tử xã Hưng Phước
              (https://hungphuoc.dongnai.gov.vn) bằng CSS, KHÔNG sửa HTML.
   PHIÊN BẢN: 1.2  -  Ngày 05/9/2026  (đã kiểm thử trên trang chủ,
              trang danh mục tin và trang chi tiết tin)
   ----------------------------------------------------------------------------
   CÁCH NHÚNG: đặt thẻ  dưới đây SAU TẤT CẢ các file css hiện có
               của theme (đặt cuối cùng trong ):
   !!! QUAN TRỌNG - THỨ TỰ NẠP:
       File này PHẢI được nạp SAU CÙNG, sau tất cả các file css khác,
       đặc biệt là sau: jquery.metisMenu.css, custom_menu_all.css,
       dongnai.css và color_default.css.
       Lý do: các file đó cũng dùng !important. Khi hai khai báo cùng
       !important và cùng độ ưu tiên chọn lọc, file nạp SAU sẽ thắng.
       Nếu đặt file này ở giữa, một số chỗ (ví dụ menu dọc cột phải)
       sẽ bị các file sau ghi đè trở lại -> chữ trắng trên nền trắng.
       Bản 1.1 đã nâng độ ưu tiên chọn lọc cho các chỗ đã biết xung đột,
       nhưng đặt đúng SAU CÙNG vẫn là cách an toàn nhất.

   GỠ BỎ:      xoá đúng 1 dòng  trên -> trang trở lại nguyên trạng.
   ----------------------------------------------------------------------------
   NGUYÊN TẮC: mọi khai báo đều có !important để thắng CSS gốc của theme.
               Muốn đổi toàn bộ tông màu: chỉ sửa các biến ở MỤC 2.
   ========================================================================== */
/* ==========================================================================
   1. FONT CHỮ TIẾNG VIỆT
   Be Vietnam Pro: đủ bộ dấu tiếng Việt, thiết kế cho chữ Việt.
   Orbitron: font chữ số kiểu kỹ thuật số, dùng riêng cho khối
   "Thống kê truy cập" (xem MỤC 12d).
   >>> Nếu mạng nội bộ chặn Google Fonts: XOÁ dòng @import bên dưới,
       trang sẽ tự dùng Segoe UI / Roboto (vẫn chuẩn dấu tiếng Việt),
       riêng khối thống kê sẽ lùi về font 'Digital-7 Mono' có sẵn trên
       máy chủ - vẫn ra kiểu chữ số điện tử.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Orbitron:wght@700;800&display=swap');
/* ==========================================================================
   2. BẢNG MÀU & THÔNG SỐ CHUNG  (sửa ở đây là đổi cả trang)
   ========================================================================== */
:root {
  --hp-primary:       #0B4F9E;   /* Xanh công vụ - màu chủ đạo            */
  --hp-primary-dark:  #083C79;   /* Xanh đậm - thanh menu, menu footer    */
  --hp-primary-light: #E9F1FB;   /* Xanh rất nhạt - nền khi rê chuột      */
  --hp-accent:        #C41E22;   /* Đỏ cờ - gạch chân tiêu đề, điểm nhấn  */
  --hp-gold:          #E9A319;   /* Vàng - viền focus bàn phím            */
  --hp-link-footer:   #FFD98A;   /* Vàng nhạt - liên kết trong footer     */

  --hp-ink:           #1B2733;   /* Chữ chính                             */
  --hp-muted:         #5A6779;   /* Chữ phụ: ngày tháng, chú thích        */
  --hp-border:        #DCE3ED;   /* Đường viền thẻ                        */
  --hp-page:          #F3F6FA;   /* Nền trang                             */
  --hp-card:          #FFFFFF;   /* Nền thẻ                               */

  --hp-radius:        10px;      /* Bo góc thẻ                            */
  --hp-radius-sm:     8px;       /* Bo góc nút, ô nhập                    */
  --hp-shadow:        0 1px 2px rgba(16,32,64,.06), 0 6px 18px rgba(16,32,64,.07);
  --hp-shadow-hover:  0 10px 24px rgba(11,79,158,.16);
}
/* ==========================================================================
   3. NỀN, CHỮ, LIÊN KẾT CHUNG
   Lưu ý: KHÔNG dùng "body *" để đổi font, vì sẽ phá vỡ các bộ font biểu
   tượng (FontAwesome, Glyphicons, slick, JWPlayer) -> icon thành ô vuông.
   ========================================================================== */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, td, th, span, div, label, strong, b, blockquote,
input, button, select, textarea,
.btn, .form-control {
  font-family: 'Be Vietnam Pro', 'Inter', 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Trả lại font biểu tượng cho trình phát video JWPlayer */
.jwplayer, .jwplayer div, .jwplayer span, .jwplayer button {
  font-family: Arial, Helvetica, sans-serif !important;
}
.jwplayer [class*="jw-icon"], .jwplayer .jw-icon {
  font-family: jw-icons !important;
}
/* Trả lại font biểu tượng cho FontAwesome / Glyphicons / slick */
.fa, .fas, .far, .fal, .fab, em.fa, i.fa,
[class^="fa-"], [class*=" fa-"] {
  font-family: FontAwesome !important;
}
.glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"] {
  font-family: 'Glyphicons Halflings' !important;
}
.slick-prev:before, .slick-next:before, .slick-dots li button:before {
  font-family: 'slick' !important;
}

body {
  background: var(--hp-page) !important;
  color: var(--hp-ink) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
}

a {
  color: var(--hp-primary) !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}
a:hover { color: var(--hp-accent) !important; }

#body { background: transparent !important; }
/* ==========================================================================
   4. HEADER & MENU CHÍNH
   ========================================================================== */

/* Giữ ảnh nền sông Đồng Nai, phủ thêm lớp chuyển sắc xanh để logo và
   dòng chữ "ĐẢNG ỦY - HĐND - UBND" nổi rõ trên nền ảnh. */
header {
  background-image:
    linear-gradient(90deg, rgba(8,60,121,.92) 0%, rgba(11,79,158,.72) 45%, rgba(11,79,158,.35) 100%),
    url("https://hungphuoc.dongnai.gov.vn/uploads/hungphuoc/header-hp_1.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Thanh menu chính */
.section-nav {
  background: var(--hp-primary-dark) !important;
  box-shadow: 0 2px 10px rgba(8,60,121,.25) !important;
}
#menusite .custom_menu_all { background: transparent !important; }

#menusite ul.slimmenucs > li > a {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  padding: 13px 16px !important;
  border-radius: var(--hp-radius-sm) !important;
  transition: background .15s ease !important;
}
#menusite ul.slimmenucs > li > a:hover,
#menusite ul.slimmenucs > li:hover > a,
#menusite ul.slimmenucs > li.active > a {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}

/* Menu con đổ xuống: thẻ trắng bo góc, có đổ bóng */
#menusite ul.slimmenucs ul {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-radius) !important;
  box-shadow: 0 12px 28px rgba(8,60,121,.18) !important;
  padding: 6px !important;
}
#menusite ul.slimmenucs ul li a {
  color: var(--hp-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  text-transform: none !important;
}
#menusite ul.slimmenucs ul li a:hover {
  background: var(--hp-primary-light) !important;
  color: var(--hp-primary) !important;
}
/* ==========================================================================
   5. THANH NGÀY THÁNG & DÒNG CHỮ CHẠY
   ========================================================================== */
.third-nav .bg {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-radius) !important;
  padding: 10px 16px !important;
  box-shadow: var(--hp-shadow) !important;
  color: var(--hp-muted) !important;
}
.third-nav .clearfix { background: transparent !important; }

/* Chữ chạy: đổi từ đỏ chói sang xanh đậm cho dễ đọc */
.my_marquee span {
  color: var(--hp-primary-dark) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
}
/* ==========================================================================
   6. THẺ TIN (PANEL) & TIÊU ĐỀ KHỐI
   ========================================================================== */
.panel,
.news_column .panel {
  background: var(--hp-card) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-shadow) !important;
  margin-bottom: 22px !important;
  overflow: hidden !important;
}

/* Tiêu đề khối: bỏ kiểu "tab xanh chữ trắng",
   chuyển sang chữ xanh đậm + gạch chân đỏ 3px */
/* Có 2 kiểu tiêu đề khối trong theme:
     (a) <div class="panel-heading"><h4><a><span>Tiêu đề</span></a></h4></div>
         -> phần lớn các khối tin ở cột giữa
     (b) <div class="panel-heading">Tiêu đề</div>  (chữ trần, không có span)
         -> các khối cột phải: Lịch làm việc, Thông báo, Thăm dò ý kiến,
            Thống kê truy cập
   Phải xử lý CẢ HAI, nếu chỉ tô màu cho span thì kiểu (b) giữ nguyên
   chữ trắng của theme -> trắng trên nền trắng, không đọc được. */
.panel-heading {
  background: #fff !important;
  color: var(--hp-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  padding: 14px 18px 12px !important;
  border-bottom: 1px solid var(--hp-border) !important;
  border-radius: 0 !important;
}
/* Kiểu (a): gạch chân đỏ chỉ nằm dưới dòng chữ.
   margin-bottom âm kéo đường gạch xuống sát mép dưới của khối tiêu đề. */
.panel-heading span {
  background: transparent !important;
  color: var(--hp-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  padding: 0 0 12px !important;
  margin: 0 0 -12px !important;
  border-bottom: 3px solid var(--hp-accent) !important;
  display: inline-block !important;
  border-radius: 0 !important;
}
/* Kiểu (b): gạch chân đỏ chạy hết chiều ngang khối tiêu đề.
   Dùng :has() - trình duyệt cũ (trước 2023) bỏ qua dòng này,
   khi đó tiêu đề vẫn đọc tốt, chỉ không có vạch đỏ. */
.panel-heading:not(:has(span)) {
  border-bottom: 3px solid var(--hp-accent) !important;
}

.panel-body { padding: 18px !important; }
.panel-body img { border-radius: var(--hp-radius-sm) !important; }

/* Tiêu đề tin trong thẻ */
.panel-body a,
.news_column .panel-body a {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  color: var(--hp-ink) !important;
}
.news_column .panel-body a:hover { color: var(--hp-primary) !important; }
/* ==========================================================================
   7. TAB "TIN MỚI / TIN XEM NHIỀU"
   ========================================================================== */
.slide-tab .nav-tabs,
.slide-tab .nav.nav-tabs {
  background: #fff !important;
  border-radius: var(--hp-radius) var(--hp-radius) 0 0 !important;
}
.nav-tabs { border-bottom: 1px solid var(--hp-border) !important; }
.nav-tabs > li > a {
  background: #fff !important;
  color: var(--hp-muted) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
  background: #fff !important;
  color: var(--hp-primary) !important;
  border-bottom: 3px solid var(--hp-accent) !important;
}
/* ==========================================================================
   8. Ô TÌM KIẾM & MENU CỘT PHẢI
   ========================================================================== */
.kttt-search {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-shadow) !important;
  padding: 14px !important;
  margin-bottom: 20px !important;
}
.kttt-search .form-control {
  height: 44px !important;                        /* đủ chuẩn vùng chạm */
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-radius-sm) 0 0 var(--hp-radius-sm) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.kttt-search .form-control:focus {
  border-color: var(--hp-primary) !important;
  box-shadow: 0 0 0 3px rgba(11,79,158,.15) !important;
}
.kttt-search .btn {
  background: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
  color: #fff !important;
  height: 44px !important;
  border-radius: 0 var(--hp-radius-sm) var(--hp-radius-sm) 0 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 0 18px !important;
}
.kttt-search .btn:hover { background: var(--hp-primary-dark) !important; }
.form-control::placeholder { color: #8A94A6 !important; opacity: 1 !important; }

/* Menu dọc cột phải: từ nền đen #333 -> thẻ trắng */
aside.sidebar {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-radius) !important;
  box-shadow: var(--hp-shadow) !important;
  overflow: hidden !important;
}
.sidebar-nav, aside.sidebar nav, aside.sidebar ul { background: #fff !important; }
/* CHÚ Ý: file jquery.metisMenu.css của theme có rule
     .metismenu a { color: #fff !important; }
   cùng độ ưu tiên chọn lọc với ".metismenu a". Nếu file này nạp trước
   file đó thì chữ sẽ trở lại màu trắng -> trắng trên nền trắng.
   Vì vậy dùng chuỗi chọn lọc dài hơn để luôn thắng, bất kể thứ tự nạp. */
.metismenu aside.sidebar nav ul li a {
  background: #fff !important;
  color: var(--hp-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 13px 18px !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--hp-border) !important;
  border-left: 3px solid transparent !important;
}
.metismenu aside.sidebar nav ul li a:hover,
.metismenu aside.sidebar nav ul li a:focus,
.metismenu aside.sidebar nav ul li a:active {
  background: var(--hp-primary-light) !important;
  color: var(--hp-primary) !important;
  border-left-color: var(--hp-accent) !important;
}
.metismenu aside.sidebar nav ul li:last-child a { border-bottom: 0 !important; }
.metismenu .arrow { color: var(--hp-muted) !important; }
/* ==========================================================================
   9. Ô DỊCH VỤ NHANH (Chuyển đổi số, DVC trực tuyến, 1022, ...)
   ========================================================================== */
.item_quick_link {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-left: 4px solid var(--hp-primary) !important;
  border-radius: var(--hp-radius) !important;
  padding: 14px !important;
  box-shadow: var(--hp-shadow) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.item_quick_link:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--hp-shadow-hover) !important;
  border-left-color: var(--hp-accent) !important;
}
.item_quick_link a,
.item_quick_link h3 a {
  color: var(--hp-primary-dark) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}
/* Icon vốn là ảnh PNG màu trắng -> đặt trong khối nền xanh để nhìn thấy rõ */
.item_quick_link .item_td {
  background: var(--hp-primary) !important;
  border-radius: var(--hp-radius-sm) !important;
  padding: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.item_quick_link:hover .item_td { background: var(--hp-accent) !important; }

/* Xếp icon và chữ trên một hàng, chữ dài không tràn ra ngoài ô */
.item_quick_link .item_head_landing {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.item_quick_link .item_td { float: none !important; flex: 0 0 auto !important; margin: 0 !important; }
.item_quick_link h3, .item_quick_link .m2 {
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* ==========================================================================
   10. BANNER LIÊN KẾT CỘT PHẢI
   ========================================================================== */
.nv-block-banners {
  background: #fff !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-radius-sm) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.nv-block-banners img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
/* ==========================================================================
   11. NÚT BẤM CHUNG
   ========================================================================== */
.btn { border-radius: var(--hp-radius-sm) !important; font-weight: 600 !important; }
.btn-primary, .btn-info {
  background: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-info:hover {
  background: var(--hp-primary-dark) !important;
  border-color: var(--hp-primary-dark) !important;
}
.btn-success {                                   /* nút "Bình chọn" */
  background: #137A45 !important;
  border-color: #137A45 !important;
  color: #fff !important;
}
/* ==========================================================================
   12. FOOTER
   Trước: chữ trắng/đỏ trên nền cyan #3BC3F5 -> tương phản ~2.2:1 (không đạt).
   Sau:   chữ trắng trên nền xanh #0B4F9E    -> tương phản ~8.3:1 (đạt AA/AAA).
   ========================================================================== */
.custom-menu-footer { background: var(--hp-primary-dark) !important; }
.custom-menu-footer a {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

footer#footer {
  background: var(--hp-primary) !important;
  color: #E7EEF8 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  padding: 32px 0 !important;
}
footer#footer h1, footer#footer h2, footer#footer h3,
footer#footer strong, footer#footer b, footer#footer span { color: #fff !important; }
footer#footer a { color: var(--hp-link-footer) !important; }

/* Nút "Lên đầu trang" */
.footer-bttop .bttop a, .bttop a {
  background: var(--hp-accent) !important;
  color: #fff !important;
}
/* ==========================================================================
   12b. ĐƯỜNG DẪN ĐIỀU HƯỚNG (breadcrumb) - các trang con
   ========================================================================== */
.breadcrumbs li a {
  background: var(--hp-primary-light) !important;
  color: var(--hp-primary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.breadcrumbs li a:after { border-left-color: var(--hp-primary-light) !important; }
.breadcrumbs li a:hover { background: var(--hp-primary) !important; color: #fff !important; }
.breadcrumbs li a:hover:after { border-left-color: var(--hp-primary) !important; }
.breadcrumbs li.active a,
.breadcrumbs li:last-child a { background: var(--hp-primary) !important; color: #fff !important; }
.breadcrumbs li.active a:after,
.breadcrumbs li:last-child a:after { border-left-color: var(--hp-primary) !important; }
/* ==========================================================================
   12c. TRANG CHI TIẾT TIN / VĂN BẢN
   ========================================================================== */
h1.title {
  font-size: 26px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--hp-ink) !important;
}
.bodytext {
  font-size: 16.5px !important;
  line-height: 1.8 !important;
  color: #26313F !important;
}
.bodytext p { margin-bottom: 14px !important; }
.bodytext a {
  color: var(--hp-primary) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
}
.bodytext img {
  border-radius: var(--hp-radius-sm) !important;
  max-width: 100% !important;
  height: auto !important;
}
.bodytext table { max-width: 100% !important; }
/* ==========================================================================
   12d. KHỐI "THỐNG KÊ TRUY CẬP" - CHỮ SỐ KIỂU KỸ THUẬT SỐ
   Cấu trúc HTML gốc:
     <div class="counter hitcounter">
       <p><b>Hôm nay</b></p>          <div class="hitngay">1,730</div>
       <p><b>Tổng lượt truy cập</b></p><div class="hittatca">589,531</div>
     </div>
   Font: Orbitron (chữ số vuông vức, hiện đại).
   Dự phòng: 'Digital-7 Mono' - font 7 đoạn CÓ SẴN trên máy chủ của trang
   (theme đã khai báo @font-face nhưng chưa dùng), nên kể cả khi không tải
   được Google Fonts thì chữ số vẫn ra kiểu điện tử.
   Đã kiểm tra: hiển thị vừa khung tới 8 chữ số (12,345,678).
   ========================================================================== */
.hitcounter { text-align: center !important; }
.hitcounter p { margin: 0 0 8px !important; }
.hitcounter p b {
  font-family: 'Be Vietnam Pro', 'Inter', 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hp-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

/* Bảng số: nền xanh rất nhạt + các vạch dọc mảnh tạo cảm giác bảng điện tử,
   viền trái đỏ làm điểm nhấn, viền trong sáng ở mép trên cho có chiều sâu. */
.hitcounter .hitngay,
.hitcounter .hittatca {
  font-family: 'Orbitron', 'Digital-7 Mono', 'Be Vietnam Pro', sans-serif !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;   /* mọi chữ số cùng bề rộng */
  text-align: center !important;
  line-height: 1.15 !important;
  letter-spacing: 1px !important;
  margin: 0 0 16px !important;
  padding: 12px 8px !important;
  border-radius: var(--hp-radius-sm) !important;
  background-color: #EFF5FD !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(233,241,251,.6)),
    repeating-linear-gradient(90deg, rgba(11,79,158,.07) 0 1px, transparent 1px 14px) !important;
  border: 1px solid #CFDDF0 !important;
  border-left: 4px solid var(--hp-accent) !important;
  box-shadow: inset 0 1px 0 #fff !important;
  overflow: hidden !important;
}
.hitcounter .hitngay  { font-size: 26px !important; color: var(--hp-primary) !important; }
.hitcounter .hittatca { font-size: 32px !important; color: var(--hp-accent) !important; margin-bottom: 0 !important; }

@media (max-width: 380px) {
  .hitcounter .hitngay  { font-size: 22px !important; }
  .hitcounter .hittatca { font-size: 27px !important; }
}
/* ==========================================================================
   13. KHẢ NĂNG TIẾP CẬN (người dùng bàn phím, người khiếm thị)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--hp-gold) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}
/* ==========================================================================
   14. MÀN HÌNH NHỎ (điện thoại, máy tính bảng)
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 15.5px !important; }
  .panel-heading span { font-size: 15px !important; padding: 12px 14px 10px !important; }
  .panel-body { padding: 14px !important; }
  .panel, .news_column .panel { margin-bottom: 16px !important; }
  #menusite ul.slimmenucs > li > a {
    border-radius: 0 !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
  }
  .kttt-search { padding: 12px !important; }
  footer#footer { padding: 24px 12px !important; font-size: 14.5px !important; }
}
/* ==========================================================================
   15. TÙY CHỌN - ĐANG TẮT
   Chuẩn hoá ảnh trong thẻ tin về cùng tỷ lệ 16:9 cho đều nhau.
   Ưu điểm: trang gọn hơn hẳn. Nhược điểm: có thể cắt bớt ảnh dọc.
   >>> Muốn bật: xoá dòng bắt đầu bằng   (*   và dòng   *)   ở dưới.
   ========================================================================== */
/*
.news_column .panel-body img,
.two_column .panel-body img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  float: none !important;
  margin: 0 0 10px 0 !important;
}
*/

/* ======================== HẾT FILE hungphuoc-custom.css =================== */
/* ==========================================================================
   17. ẢNH TIN NỔI BẬT TRONG SLIDER TRANG CHỦ
   ========================================================================== */
.item_s img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: var(--hp-radius, 10px) !important;
}
/* ==========================================================================
   18. ẢNH THU NHỎ DANH SÁCH "TIN MỚI / TIN XEM NHIỀU"
   ========================================================================== */
.list_news .img-thumbnail,
.img-thumbnail {
  border-radius: 6px !important;
  border: 1px solid var(--hp-border, #DCE3ED) !important;
  padding: 0 !important;
  background: #fff !important;
}
/* ==========================================================================
   19. ẢNH BANNER LIÊN KẾT CỘT PHẢI - bo góc ảnh khớp với khung ngoài
   ========================================================================== */
.nv-block-banners img {
  border-radius: 7px !important;
}
/* ==========================================================================
   20. KHUNG VIDEO - bo góc cho khớp với thẻ chứa nó
   ========================================================================== */
.video-content .jwplayer,
.video-content video,
.videoplayer_bl {
  border-radius: var(--hp-radius, 10px) !important;
  overflow: hidden !important;
}
/* ==========================================================================
   21. KHỐI TIN ĐƯỢC QUAN TÂM - bố cục 2 cột, căn đều lề
   ========================================================================== */
.block_tophits {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.block_tophits > li {
  display: flex !important;              /* thay cho float -> hết chạy vòng chữ */
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 11px 8px !important;
}

/* Cột ảnh: rộng cố định 64px, mọi ảnh cùng khuôn 64x46 */
.block_tophits > li > a:first-child {
  flex: 0 0 64px !important;
  display: block !important;
  line-height: 0 !important;
}
.block_tophits img.img-thumbnail {
  float: none !important;                /* huỷ class pull-left của theme */
  margin: 0 !important;                  /* huỷ class mr-1 của theme */
  width: 64px !important;
  height: 46px !important;
  object-fit: cover !important;          /* ảnh ngang/dọc đều vừa khuôn, không méo */
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid var(--hp-border, #DCE3ED) !important;
  border-radius: 5px !important;
}

/* Cột chữ: chiếm phần còn lại, giới hạn 3 dòng cho các hàng đều nhau */
.block_tophits > li > a.show {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: var(--hp-ink, #1B2733) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;      /* muốn hiện nhiều hơn: đổi thành 4 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.block_tophits > li:hover > a.show { color: var(--hp-primary, #0B4F9E) !important; }
/* ==========================================================================
   22. PHÂN CÁCH GIỮA CÁC TIN - KIỂU A: ĐƯỜNG KẺ  (đang bật)
   ========================================================================== */
.block_tophits > li {
  border-bottom: 1px solid var(--hp-border, #DCE3ED) !important;
}
.block_tophits > li:last-child { border-bottom: 0 !important; }
.block_tophits > li:hover { background: var(--hp-primary-light, #E9F1FB) !important; }
/* ==========================================================================
   23. PHÂN CÁCH GIỮA CÁC TIN - KIỂU B: NỀN XEN KẼ  (đang tắt)
   Muốn dùng kiểu B: xoá nguyên MỤC 22 ở trên, rồi bỏ dấu chú thích
   (dòng bắt đầu bằng   (*   và dòng   *)  ) của khối dưới đây.
   ========================================================================== */

.block_tophits > li {
  border-bottom: 0 !important;
  border-radius: 8px !important;
}
.block_tophits > li:nth-child(odd)  { background: #F2F7FD !important; }
.block_tophits > li:hover           { background: var(--hp-primary-light, #E9F1FB) !important; }
/* ===================== HẾT PHẦN BỔ SUNG 1.4 ============================== */

#body .unit-logo {
  display: block !important;
  margin: 0 0 22px !important;      /* bằng khoảng cách giữa các thẻ tin */
  line-height: 0 !important;        /* khử khe hở dưới ảnh do inline gây ra */
  text-align: center !important;
}
#body .unit-logo img {
  display: block !important;        /* trước đây là inline -> hở chân ảnh */
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: 1px solid var(--hp-border, #DCE3ED) !important;
  border-radius: var(--hp-radius, 10px) !important;
  box-shadow: var(--hp-shadow, 0 1px 2px rgba(16,32,64,.06), 0 6px 18px rgba(16,32,64,.07)) !important;
}
/* Nếu sau này chèn một logo NHỎ (không phải băng-rôn ngang), dòng
   width:100% sẽ kéo giãn làm vỡ nét. Khi đó đổi thành:  width: auto !important;
   ảnh sẽ giữ đúng kích thước gốc và tự canh giữa. */