/* ==========================================================================
   InnoDay 2026 (Từ Tâm dụng Trí 2026) – CSS tùy chỉnh (font + màu thương hiệu)

   Nạp SAU cusstom.css trong layout contest_page và CHỈ áp dụng cho trang 2026
   (mọi rule đều bắt đầu bằng body.innoday2026), nên InnoDay 2024/2025 dùng
   chung layout vẫn giữ nguyên giao diện cũ.

   ---------------------------------------------------------------------------
   CÁCH BẬT/TẮT
   ---------------------------------------------------------------------------
   [0] TẮT TOÀN BỘ (không cần sửa file này)
       .env  ->  INNODAY2026_THEME=false   rồi restart Octane.
       Trang quay lại font SVN-Gilroy + màu cũ y như trước.

   [1] TẮT RIÊNG FONT hoặc RIÊNG MÀU – sửa 1 dòng ở khối BIẾN bên dưới:
         --shb-font-family: "SVN-Gilroy", sans-serif;    trả lại font cũ
         --shb-orange: #f47920;                          trả lại cam cũ
         --shb-navy:   #17265c;                          trả lại navy cũ
       Các rule vẫn chạy nhưng cho ra đúng giá trị cũ -> không cần xoá gì.

   [2] ĐỔI SANG TÔNG KHÁC: chỉ sửa giá trị 3 biến đó, toàn trang đổi theo.

   [3] TẮT RIÊNG TỪNG NHÓM: mỗi nhóm dưới đây có nhãn "NHÓM n" – comment cả
       nhóm lại là xong, các nhóm khác không ảnh hưởng.

   Lý do làm bằng CSS đè thay vì sửa blade: màu nằm trong class Tailwind
   arbitrary viết thẳng trên blade (444 lần dùng, rải khắp 20+ file).
   ========================================================================== */

/* ==========================================================================
   BIẾN – sửa ở đây là đổi toàn bộ (xem mục [1] và [2] phía trên)
   ========================================================================== */
body.innoday2026 {
  /* Font thương hiệu SHB Sans (khai @font-face ở NHÓM 1) */
  --shb-font-family: "SHB Sans", sans-serif;

  /* Brand Guidelines V1.0 */
  --shb-orange: #f37021;      /* CMYK 0 70 100 0   | RGB 243 112 33 | thay cho #F47920, #E5712A */
  --shb-navy: #31347b;        /* CMYK 100 100 20 0 | RGB 49 52 123  | thay cho #17265C, #162B75, #0C1D5E, #253D93, #22367E */
  --shb-midnight-navy-50: #DBE0FB;        /* CMYK 100 100 0 66 | RGB 0 0 87 */

  /* Cùng 2 màu thương hiệu nhưng tách kênh RGB, để ghép được độ mờ:
     rgb(var(--shb-navy-rgb) / .8). Bắt buộc phải có vì hex trong biến không
     ghép alpha được. Đổi màu thì sửa CẢ biến hex lẫn biến -rgb. */
  --shb-orange-rgb: 243 112 33;
  --shb-navy-rgb: 49 52 123;
}

/* ==========================================================================
   NHÓM 1 – KHAI BÁO FONT SHB Sans
   File woff2 ở public/fonts/shb/webfonts/ (cùng bộ với landing SHB Star 2026).
   Bộ này KHÔNG có Thin/Light/Black; các weight 100/300/900 mà giao diện đang
   dùng sẽ được trình duyệt tổng hợp từ weight gần nhất.
   TẮT: xoá/comment cả nhóm 1 + nhóm 2 (hoặc chỉ cần đổi --shb-font-family).
   ========================================================================== */
@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SHB Sans";
  src: url("../fonts/shb/webfonts/SHBSans-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   NHÓM 2 – ÁP FONT CHO TOÀN TRANG 2026
   TẮT: đổi --shb-font-family về "SVN-Gilroy", sans-serif.
   ========================================================================== */
body.innoday2026,
body.innoday2026 input,
body.innoday2026 select,
body.innoday2026 textarea,
body.innoday2026 button {
  font-family: var(--shb-font-family);
}

/* Vài chỗ trong blade khai cứng font-['SVN-Gilroy'] (list-contest) -> ép về biến */
body.innoday2026 [class*="font-['SVN-Gilroy']"],
body.innoday2026 [class*='font-["SVN-Gilroy"]'] {
  font-family: var(--shb-font-family);
}

/* Đồng hồ đếm ngược giữ font LCD riêng (khai bằng style inline trong blade) —
   inline style không !important nên không bị nhóm này đè. */

/* ==========================================================================
   NHÓM 3 – MÀU TRONG CLASS TAILWIND: CAM
   #F47920, #E5712A  ->  var(--shb-orange)

   Selector dùng [class~="..." i] chứ KHÔNG dùng [class*=...]:
   - ~=  khớp đúng MỘT token cách nhau bởi khoảng trắng
   - *=  khớp chuỗi con bất kỳ

   Với *=, chuỗi "text-[#f47920]" khớp luôn cả "hover:text-[#f47920]" và
   "from-[#F47920]/0" -> màu hover bị áp vĩnh viễn, còn alpha của gradient thì
   bị xoá. Dùng ~= là mỗi biến thể (thường / hover / có độ mờ) tự tách ra, khai
   riêng bên dưới.

   Cờ i gộp biến thể hoa/thường của mã màu (blade viết lẫn #17265c và #17265C).
   TẮT: đổi --shb-orange về #f47920.
   ========================================================================== */
body.innoday2026 [class~="text-[#f47920]" i] {
  color: var(--shb-orange) !important;
}

body.innoday2026 [class~="bg-[#f47920]" i] {
  background-color: var(--shb-orange) !important;
}

body.innoday2026 [class~="border-[#f47920]" i],
body.innoday2026 [class~="border-[#e5712a]" i] {
  border-color: var(--shb-orange) !important;
}

body.innoday2026 [class~="outline-[#f47920]" i] {
  outline-color: var(--shb-orange) !important;
}

body.innoday2026 [class~="fill-[#e5712a]" i] {
  fill: var(--shb-orange) !important;
}

/* Gradient: Tailwind đọc from-/to- qua biến --tw-gradient-*, không đọc color */
body.innoday2026 [class~="from-[#f47920]" i],
body.innoday2026 [class~="from-[#e5712a]" i] {
  --tw-gradient-from: var(--shb-orange) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}

body.innoday2026 [class~="to-[#f47920]" i],
body.innoday2026 [class~="to-[#e5712a]" i] {
  --tw-gradient-to: var(--shb-orange) !important;
}

/* ==========================================================================
   NHÓM 4 – MÀU TRONG CLASS TAILWIND: NAVY
   #17265C, #162B75, #0C1D5E, #253D93, #22367E  ->  var(--shb-navy)
   TẮT: đổi --shb-navy về #17265c.
   ========================================================================== */
body.innoday2026 [class~="text-[#17265c]" i],
body.innoday2026 [class~="text-[#162b75]" i],
body.innoday2026 [class~="text-[#0c1d5e]" i],
body.innoday2026 [class~="text-[#22367e]" i],
body.innoday2026 [class~="text-[#253d93]" i] {
  color: var(--shb-navy) !important;
}

body.innoday2026 [class~="bg-[#17265c]" i],
body.innoday2026 [class~="bg-[#162b75]" i],
body.innoday2026 [class~="bg-[#0c1d5e]" i],
body.innoday2026 [class~="bg-[#22367e]" i],
body.innoday2026 [class~="bg-[#253d93]" i] {
  background-color: var(--shb-navy) !important;
}

body.innoday2026 [class~="border-[#17265c]" i],
body.innoday2026 [class~="border-[#162b75]" i],
body.innoday2026 [class~="border-[#0c1d5e]" i] {
  border-color: var(--shb-navy) !important;
}

body.innoday2026 [class~="outline-[#162b75]" i],
body.innoday2026 [class~="outline-[#17265c]" i] {
  outline-color: var(--shb-navy) !important;
}

body.innoday2026 [class~="from-[#17265c]" i],
body.innoday2026 [class~="from-[#162b75]" i],
body.innoday2026 [class~="from-[#253d93]" i] {
  --tw-gradient-from: var(--shb-navy) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}

body.innoday2026 [class~="to-[#162b75]" i],
body.innoday2026 [class~="to-[#253d93]" i] {
  --tw-gradient-to: var(--shb-midnight-navy-50) !important;
}

/* ==========================================================================
   NHÓM 4B – BIẾN THỂ CÓ TRẠNG THÁI VÀ CÓ ĐỘ MỜ
   Mỗi biến thể là một token riêng nên phải khai riêng. Danh sách dưới đây lấy
   đúng những gì blade innoday2026 đang dùng, không thừa rule chết:

     hover:text-[#f47920]        26 chỗ      focus:border-[#17265c]      22 chỗ
     hover:border-[#f47920]       4 chỗ      hover:outline-[#E5712A]      4 chỗ
     hover:text-[#17265c]         1 chỗ      hover:bg-[#17265C]           1 chỗ
     peer-checked:from-[#F47920]/0 và peer-checked:to-[#F47920]/80  mỗi loại 4 chỗ
     from-[#162B75]/0 và to-[#162B75]/80                            mỗi loại 4 chỗ
     from-[#F47920]/0 và to-[#F47920]/80                            mỗi loại 4 chỗ

   Thêm class màu mới trong blade thì bổ sung vào đây, nếu không nó giữ màu cũ.
   ========================================================================== */

/* --- Trạng thái: chỉ đổi màu khi rê chuột / focus --- */
body.innoday2026 [class~="hover:text-[#f47920]" i]:hover {
  color: var(--shb-orange) !important;
}

body.innoday2026 [class~="hover:border-[#f47920]" i]:hover {
  border-color: var(--shb-orange) !important;
}

body.innoday2026 [class~="hover:outline-[#e5712a]" i]:hover {
  outline-color: var(--shb-orange) !important;
}

body.innoday2026 [class~="hover:text-[#17265c]" i]:hover {
  color: var(--shb-navy) !important;
}

body.innoday2026 [class~="hover:bg-[#17265c]" i]:hover {
  background-color: var(--shb-navy) !important;
}

body.innoday2026 [class~="focus:border-[#17265c]" i]:focus {
  border-color: var(--shb-navy) !important;
}

/* group-hover/main_nav: thẻ ô điều hướng trang chủ đổi màu icon và chữ khi rê chuột.
   Bắt buộc phải khai lại ở đây: các rule màu nền/chữ ở NHÓM 3-4 dùng !important nên
   đè luôn cả rule hover của Tailwind (rule đó không có !important) -> rê chuột vào ô
   mà nền icon vẫn xanh navy. Selector lặp lại đúng quan hệ cha-con mà Tailwind sinh ra. */
body.innoday2026 .group\/main_nav:hover [class~="group-hover/main_nav:bg-[#f47920]" i] {
  background-color: var(--shb-orange) !important;
}

body.innoday2026 .group\/main_nav:hover [class~="group-hover/main_nav:text-[#f47920]" i] {
  color: var(--shb-orange) !important;
}

/* --- Tiền tố "!" của Tailwind (sinh ra rule kèm !important) ---
   Cũng là token riêng nên không dính vào các rule ở trên. Hiện có:
     !text-[#f47920]   menu đang active (header_cuocthi / header_auth)
     !border-[#E5712A] 6 chỗ trong blade innoday2026
   Rule gốc đã !important, rule này cũng !important và nạp sau nên thắng. --- */
body.innoday2026 [class~="!text-[#f47920]" i] {
  color: var(--shb-orange) !important;
}

body.innoday2026 [class~="!border-[#e5712a]" i] {
  border-color: var(--shb-orange) !important;
}

/* --- Độ mờ: giữ nguyên alpha của thiết kế, chỉ đổi tông màu ---
   Hex trong biến không ghép được alpha nên dùng biến tách kênh --shb-*-rgb. --- */
body.innoday2026 [class~="from-[#f47920]/0" i],
body.innoday2026 [class~="from-[#e5712a]/0" i] {
  --tw-gradient-from: rgb(var(--shb-orange-rgb) / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(var(--shb-orange-rgb) / 0)) !important;
}

body.innoday2026 [class~="to-[#f47920]/80" i],
body.innoday2026 [class~="to-[#e5712a]/80" i] {
  --tw-gradient-to: rgb(var(--shb-orange-rgb) / 0.8) !important;
}

body.innoday2026 [class~="from-[#162b75]/0" i],
body.innoday2026 [class~="from-[#17265c]/0" i] {
  --tw-gradient-from: rgb(var(--shb-navy-rgb) / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(var(--shb-navy-rgb) / 0)) !important;
}

body.innoday2026 [class~="to-[#162b75]/80" i],
body.innoday2026 [class~="to-[#17265c]/80" i] {
  --tw-gradient-to: rgb(var(--shb-navy-rgb) / 0.8) !important;
}

/* --- peer-checked: lớp phủ cam khi thẻ hạng mục được chọn trong modal gửi bài.
   Tailwind sinh ra .peer:checked ~ .peer-checked\:from-... nên phải lặp lại
   đúng quan hệ anh-em đó, không thể đè bằng selector đơn. --- */
body.innoday2026 .peer:checked ~ [class~="peer-checked:from-[#f47920]/0" i] {
  --tw-gradient-from: rgb(var(--shb-orange-rgb) / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(var(--shb-orange-rgb) / 0)) !important;
}

body.innoday2026 .peer:checked ~ [class~="peer-checked:to-[#f47920]/80" i] {
  --tw-gradient-to: rgb(var(--shb-orange-rgb) / 0.8) !important;
}

/* ==========================================================================
   NHÓM 5 – SVG INLINE
   Màu khai bằng thuộc tính fill="#..." / stroke="#..." ngay trên thẻ <path>
   (15 chỗ trong blade). Đây là presentation attribute nên CSS thắng, không
   cần sửa blade.
   TẮT: comment cả nhóm 5.
   ========================================================================== */
body.innoday2026 svg [fill="#f47920" i],
body.innoday2026 svg [fill="#e5712a" i],
body.innoday2026 svg[fill="#f47920" i],
body.innoday2026 svg[fill="#e5712a" i] {
  fill: var(--shb-orange) !important;
}

body.innoday2026 svg [fill="#17265c" i],
body.innoday2026 svg [fill="#162b75" i],
body.innoday2026 svg [fill="#0c1d5e" i],
body.innoday2026 svg[fill="#17265c" i],
body.innoday2026 svg[fill="#162b75" i],
body.innoday2026 svg[fill="#0c1d5e" i] {
  fill: var(--shb-navy) !important;
}

body.innoday2026 svg [stroke="#f47920" i],
body.innoday2026 svg [stroke="#e5712a" i] {
  stroke: var(--shb-orange) !important;
}

body.innoday2026 svg [stroke="#17265c" i],
body.innoday2026 svg [stroke="#162b75" i],
body.innoday2026 svg [stroke="#0c1d5e" i] {
  stroke: var(--shb-navy) !important;
}

/* ==========================================================================
   NHÓM 6 – CSS DÙNG CHUNG (cusstom.css, home_contest.css)
   Các file này cũng chứa màu cũ nhưng InnoDay 2024/2025 đang dùng chung
   -> không sửa file gốc, đè tại đây.
   TẮT: comment cả nhóm 6.
   ========================================================================== */
body.innoday2026 .slick-dots li.slick-active button:before {
  background-color: var(--shb-orange) !important;
}

/* ĐÃ GỠ: body.innoday2026 a:hover { color: ... !important }
   Rule đó ép MỌI thẻ <a> đổi màu chữ khi rê chuột, kể cả nút nền cam chữ trắng
   -> chữ trùng màu nền, nhìn như mất chữ (nút "Tiếp tục" trong modal gửi bài).
   Nó cũng không cần thiết: cusstom.css / home_contest.css không hề đặt
   a:hover { color }, chỉ đặt text-decoration. Muốn đổi màu hover của link thì
   nhắm đúng khối chứa link, đừng dùng selector toàn cục.

   ĐÃ GỠ luôn .btn-primary / .bg-primary / .text-primary: không tồn tại trong
   CSS dùng chung lẫn blade innoday2026 (đã kiểm tra). */

/* Viền mũi tên carousel tin liên quan */
body.innoday2026 .news-related .news-slider .slick-arrow {
  border-color: var(--shb-navy) !important;
}

/* ==========================================================================
   NHÓM 7 – NỘI DUNG NHẬP TỪ CMS (style inline)
   Editor lưu màu thẳng vào style của thẻ trong DB. CSS có !important thắng
   được inline style không !important. TinyMCE lưu ra dạng rgb() nên bắt cả
   hex lẫn rgb().
   TẮT: comment cả nhóm 7.
   ========================================================================== */
body.innoday2026 [style*="color: #17265c" i],
body.innoday2026 [style*="color:#17265c" i],
body.innoday2026 [style*="color: #162b75" i],
body.innoday2026 [style*="color:#162b75" i],
body.innoday2026 [style*="color: #0c1d5e" i],
body.innoday2026 [style*="color:#0c1d5e" i],
body.innoday2026 [style*="color: rgb(23, 38, 92)"],
body.innoday2026 [style*="color:rgb(23,38,92)"],
body.innoday2026 [style*="color: rgb(22, 43, 117)"],
body.innoday2026 [style*="color:rgb(22,43,117)"],
body.innoday2026 [style*="color: rgb(12, 29, 94)"],
body.innoday2026 [style*="color:rgb(12,29,94)"] {
  color: var(--shb-navy) !important;
}

body.innoday2026 [style*="color: #f47920" i],
body.innoday2026 [style*="color:#f47920" i],
body.innoday2026 [style*="color: #e5712a" i],
body.innoday2026 [style*="color:#e5712a" i],
body.innoday2026 [style*="color: rgb(244, 121, 32)"],
body.innoday2026 [style*="color:rgb(244,121,32)"],
body.innoday2026 [style*="color: rgb(229, 113, 42)"],
body.innoday2026 [style*="color:rgb(229,113,42)"] {
  color: var(--shb-orange) !important;
}

/* ==========================================================================
   NHÓM 8 – XANH CYAN NHẠT (ĐANG TẮT)
   #E4F5FC (12 lần, nền nhạt), #3FC3F3, #00B0F0 là xanh dương phụ trợ, khác hẳn
   navy; gom về navy sẽ mất tương phản ở những chỗ dùng làm nền.
   BẬT: bỏ dấu comment bao quanh khối dưới.
   ========================================================================== */
/*
body.innoday2026 [class~="bg-[#e4f5fc]" i],
body.innoday2026 [class~="bg-[#3fc3f3]" i],
body.innoday2026 [class~="bg-[#00b0f0]" i] {
  background-color: var(--shb-navy) !important;
}

body.innoday2026 [class~="text-[#e4f5fc]" i],
body.innoday2026 [class~="text-[#3fc3f3]" i],
body.innoday2026 [class~="text-[#00b0f0]" i] {
  color: var(--shb-navy) !important;
}

body.innoday2026 [class~="border-[#e4f5fc]" i],
body.innoday2026 [class~="border-[#3fc3f3]" i],
body.innoday2026 [class~="border-[#00b0f0]" i] {
  border-color: var(--shb-navy) !important;
}

body.innoday2026 [class~="fill-[#e4f5fc]" i],
body.innoday2026 [class~="fill-[#3fc3f3]" i],
body.innoday2026 [class~="fill-[#00b0f0]" i] {
  fill: var(--shb-navy) !important;
}
*/

/* Vàng #F9C623 (1 lần, dùng làm nền): giữ nguyên theo yêu cầu */

/* ==========================================================================
   NHÓM 9 – NỘI DUNG NHẬP TỪ CMS (trang Thể lệ + Giải thưởng)
   Hai trang cùng dùng class .contest-rich-text nên chỉ khai một lần.

   Vì sao cần cả khối này: dự án dùng Tailwind, mà Preflight của Tailwind reset
   sạch định dạng mặc định của trình duyệt — bảng mất đường kẻ (kể cả khi editor
   ghi border="1"), danh sách mất dấu chấm/số, thẻ h1..h6 co về cỡ chữ thường,
   liên kết mất gạch chân. Trong editor nhìn vẫn đẹp vì iframe của TinyMCE không
   dính Preflight, ra trang thật mới vỡ.

   LƯU Ý: bộ SHB Sans chỉ có weight 400..800, KHÔNG có 200. Khai 200 thì trình
   duyệt lấy weight gần nhất (400).

   Đổi kiểu chữ nội dung: sửa hai biến ngay dưới, không phải sờ vào selector.
   ========================================================================== */
body.innoday2026 {
  --shb-richtext-weight: 200;
  --shb-richtext-color: var(--shb-navy);
  --shb-richtext-border: #d9d9d9;
}

/* Bảng rộng hơn khung thì cuộn ngang, không đẩy vỡ bố cục trang */
body.innoday2026 .contest-rich-text {
  overflow-x: auto;
}

/* --- Chữ thường: đè font-semibold do controller chèn và <strong> của editor --- */
body.innoday2026 .contest-rich-text,
body.innoday2026 .contest-rich-text p,
body.innoday2026 .contest-rich-text span,
body.innoday2026 .contest-rich-text li,
body.innoday2026 .contest-rich-text td,
body.innoday2026 .contest-rich-text div,
body.innoday2026 .contest-rich-text strong,
body.innoday2026 .contest-rich-text b {
  font-weight: var(--shb-richtext-weight) !important;
  color: var(--shb-richtext-color) !important;
}

/* --- Tiêu đề trong nội dung: phải đậm và to hơn chữ thường mới phân cấp được --- */
body.innoday2026 .contest-rich-text h1,
body.innoday2026 .contest-rich-text h2,
body.innoday2026 .contest-rich-text h3,
body.innoday2026 .contest-rich-text h4,
body.innoday2026 .contest-rich-text h5,
body.innoday2026 .contest-rich-text h6 {
  margin: 24px 0 12px;
  font-weight: 700 !important;
  line-height: 1.3;
  color: var(--shb-navy) !important;
}

body.innoday2026 .contest-rich-text h1 { font-size: 32px; }
body.innoday2026 .contest-rich-text h2 { font-size: 28px; }
body.innoday2026 .contest-rich-text h3 { font-size: 24px; }
body.innoday2026 .contest-rich-text h4 { font-size: 20px; }
body.innoday2026 .contest-rich-text h5,
body.innoday2026 .contest-rich-text h6 { font-size: 18px; }

/* --- Đoạn văn --- */
body.innoday2026 .contest-rich-text p {
  margin: 0 0 12px;
  line-height: 1.6;
}

/* --- Danh sách: Preflight bỏ cả dấu đầu dòng lẫn thụt lề --- */
body.innoday2026 .contest-rich-text ul,
body.innoday2026 .contest-rich-text ol {
  margin: 0 0 12px;
  padding-left: 24px;
}

body.innoday2026 .contest-rich-text ul { list-style: disc outside; }
body.innoday2026 .contest-rich-text ol { list-style: decimal outside; }
body.innoday2026 .contest-rich-text ul ul { list-style: circle outside; }
body.innoday2026 .contest-rich-text ol ol { list-style: lower-alpha outside; }

body.innoday2026 .contest-rich-text li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* --- Bảng: editor ghi border="1" nhưng Preflight đặt border-width 0 --- */
body.innoday2026 .contest-rich-text table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
}

body.innoday2026 .contest-rich-text th,
body.innoday2026 .contest-rich-text td {
  padding: 10px 12px;
  border: 1px solid var(--shb-richtext-border);
  vertical-align: top;
  text-align: left;
}

body.innoday2026 .contest-rich-text th {
  font-weight: 600 !important;
  color: var(--shb-navy) !important;
  background: #fff8f1;
}

/* --- Ảnh: giữ tỉ lệ, không tràn khung; editor thường ghi width/height cứng --- */
body.innoday2026 .contest-rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* --- Liên kết: cùng màu chữ và không gạch chân thì không ai biết bấm được --- */
body.innoday2026 .contest-rich-text a {
  color: var(--shb-orange) !important;
  text-decoration: underline;
}

body.innoday2026 .contest-rich-text a:hover {
  text-decoration: none;
}

/* --- Trích dẫn --- */
body.innoday2026 .contest-rich-text blockquote {
  margin: 0 0 16px;
  padding: 8px 0 8px 16px;
  border-left: 3px solid var(--shb-orange);
}

/* --- Video nhúng --- */
body.innoday2026 .contest-rich-text iframe,
body.innoday2026 .contest-rich-text video {
  max-width: 100%;
}

/* ==========================================================================
   NHÓM 10 – Ô ĐIỀU HƯỚNG TRANG CHỦ (Thể lệ / Giải thưởng / BXH / Bài dự thi)

   Đặt bằng CSS thuần thay vì class Tailwind vì Tailwind chỉ sinh ra class nó
   quét thấy lúc build. Đã kiểm bundle FE hiện tại: lg:w-1/4, xl:w-1/4,
   items-stretch, sm:flex-wrap, xl:flex-nowrap ĐỀU KHÔNG TỒN TẠI — viết vào blade
   thì trình duyệt bỏ qua im lặng, bố cục chỉ trông có vẻ đúng nhờ flex-shrink
   mặc định. Sửa ở đây thì chỉ cần F5, không phải chạy npm run build.

   .section-main__nav--4 = có bật Bảng xếp hạng trong CMS (4 ô thay vì 3).
   ========================================================================== */
body.innoday2026 .section-main__nav .content {
  flex-wrap: wrap;
  align-items: stretch;   /* nhãn dài ngắn khác nhau -> ô phải cao bằng nhau */
}

/* Từ sm trở lên mới xếp hàng ngang; dưới đó Tailwind đã để flex-col, mỗi ô 1 hàng */
@media (min-width: 640px) {
  /* 3 ô: chia đều 1 hàng. Trừ đi phần gap (gap-5 = 20px, lg:gap-10 = 40px) */
  body.innoday2026 .section-main__nav:not(.section-main__nav--4) .content > a {
    flex: 1 1 calc(33.3333% - 14px);
  }

  /* 4 ô: 2 cột ở tablet cho nhãn đủ chỗ, tới xl mới dàn 4 cột */
  body.innoday2026 .section-main__nav--4 .content > a {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (min-width: 1024px) {
  body.innoday2026 .section-main__nav:not(.section-main__nav--4) .content > a {
    flex: 1 1 calc(33.3333% - 27px);
  }

  body.innoday2026 .section-main__nav--4 .content > a {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (min-width: 1280px) {
  body.innoday2026 .section-main__nav--4 .content {
    flex-wrap: nowrap;
  }

  body.innoday2026 .section-main__nav--4 .content > a {
    flex: 1 1 calc(25% - 30px);
  }
}

/* --------------------------------------------------------------------------
   Cỡ chữ nhãn — phải đi kèm số ô. Ô hẹp lại còn ~206px chỗ chứa chữ, giữ 32px
   thì "THỂ LỆ CUỘC THI" cần 268px nên vỡ thành 2 dòng.
   -------------------------------------------------------------------------- */
body.innoday2026 .section-main__nav .nav-box-label {
  font-size: 20px;
}

/* 3 ô — ô rộng, giữ nguyên thang cỡ chữ của thiết kế gốc */
@media (min-width: 1024px) {
  body.innoday2026 .section-main__nav:not(.section-main__nav--4) .nav-box-label {
    font-size: 24px;
  }
}

@media (min-width: 1280px) {
  body.innoday2026 .section-main__nav:not(.section-main__nav--4) .nav-box-label {
    font-size: 32px;
  }
}

/* 4 ô — thang nhỏ hơn để nhãn dài nhất vẫn nằm gọn 1 dòng */
@media (min-width: 1280px) {
  body.innoday2026 .section-main__nav--4 .nav-box-label {
    font-size: 22px;
  }
}

@media (min-width: 1536px) {
  body.innoday2026 .section-main__nav--4 .nav-box-label {
    font-size: 26px;
  }
}

/* --------------------------------------------------------------------------
   Icon trong ô điều hướng — ép về đúng một khổ.
   Bốn file icon không cùng tỉ lệ (96x96, 96x96, 84x96, 70x96) và thẻ <img>
   không bị ràng buộc kích thước: flex bóp chiều ngang về 56px còn chiều cao
   chạy theo tỉ lệ, nên 2 icon cao 64px và 77px, tràn hẳn ra ngoài vòng tròn
   80px. object-fit: contain giữ nguyên tỉ lệ từng icon bên trong khổ chung.

   Vòng tròn nhỏ hơn ở mobile (56px, padding 12px -> lòng 32px) nên khổ icon
   phải nhỏ theo, để 48px là icon chọc ra ngoài nền navy.
   -------------------------------------------------------------------------- */
body.innoday2026 .section-main__nav .icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

@media (min-width: 1024px) {
  body.innoday2026 .section-main__nav .icon img {
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   NHÓM 11 – POPUP ĐẾM NGƯỢC (gửi bài / sửa bài / bình chọn)
   Khổ 560x320 theo Figma. Đặt bằng CSS thuần vì w-[560px] không có trong bundle
   Tailwind đã build (Tailwind chỉ sinh class nó quét thấy lúc build).

   Màn hẹp hơn 560+lề thì popup co theo bề ngang, tỉ lệ 560/320 giữ nguyên nhờ
   aspect-ratio nên ảnh nền không bị cắt lệch so với thiết kế.
   ========================================================================== */
body.innoday2026 .rk-countdown-popup {
  width: min(560px, calc(100vw - 32px));
}

body.innoday2026 .rk-countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 560 / 320;
  padding: 16px 24px;
}

/* Chữ trong popup co theo bề ngang popup để khổ nhỏ không vỡ bố cục.
   cqw = 1% bề ngang khối chứa -> khoá container-type ở phần tử cha. */
body.innoday2026 .rk-countdown-popup {
  container-type: inline-size;
}

body.innoday2026 .rk-countdown-box h4 {
  margin-bottom: 2cqw;
  font-size: clamp(13px, 3.4cqw, 20px);
}

body.innoday2026 .rk-countdown-box .rk-countdown td {
  width: 17cqw;
}

body.innoday2026 .rk-countdown-box .rk-countdown tr:first-child td {
  font-size: clamp(34px, 13cqw, 75px);
}

body.innoday2026 .rk-countdown-box .rk-countdown tr:last-child td {
  font-size: clamp(11px, 3cqw, 20px);
}

/* --------------------------------------------------------------------------
   Màu popup cấu hình trong CMS (từng popup một bộ riêng)

   Blade xuất --rk-cd-bg / --rk-cd-digit / --rk-cd-text vào style của .rk-countdown-box.
   Admin để trống ô nào thì biến đó KHÔNG được xuất, var() rơi về giá trị mặc định
   phía sau dấu phẩy -> giao diện y như trước khi có tính năng này.

   Phải có !important: chữ và số trong popup mang sẵn class text-[#162b75] /
   text-[#F47920], mà NHÓM 3 và NHÓM 4 đã đặt !important cho hai class đó. Không
   có !important ở đây thì màu admin chọn không bao giờ thắng.
   -------------------------------------------------------------------------- */
body.innoday2026 .rk-countdown-box {
  /* Đè class bg-white sẵn có trên thẻ (0,2,1 thắng 0,1,0) */
  background-color: var(--rk-cd-bg, #fff);
}

body.innoday2026 .rk-countdown-box .rk-countdown tr:first-child td {
  color: var(--rk-cd-digit, var(--shb-orange)) !important;
}

body.innoday2026 .rk-countdown-box h4,
body.innoday2026 .rk-countdown-box .rk-countdown tr:last-child td {
  color: var(--rk-cd-text, var(--shb-navy)) !important;
}