/* ==========================================================================
   CSS TỔNG HỢP — TAM HIỆP / THEME ĐỒNG NAI / NUKEVIET
   Thay toàn bộ CSS tùy chỉnh cũ bằng nội dung này.
   Giữ nguyên các file CSS và JavaScript mặc định của theme.
   ========================================================================== */

/* ==========================================================================
   1. BIẾN VÀ HIỆU ỨNG
   ========================================================================== */

@property --cyber-angle {
  syntax: "";
  initial-value: 0deg;
  inherits: false;
}

@keyframes cyberBorderOrbit {
  to {
    --cyber-angle: 360deg;
  }
}

/* Chấm cyan dịu, phóng nhẹ theo nhịp 3 giây */
@keyframes cyberLedPulseGrow {
  0%, 100% {
    transform: translateY(-50%) scale(0.9);
    opacity: 0.8;
    box-shadow:
      0 0 3px rgba(125, 211, 252, 0.4),
      0 0 7px rgba(56, 189, 248, 0.25);
  }
  50% {
    transform: translateY(-50%) scale(1.12);
    opacity: 1;
    box-shadow:
      0 0 4px rgba(125, 211, 252, 0.55),
      0 0 10px rgba(56, 189, 248, 0.35);
  }
}

@keyframes neuralDepthShift {
  0% {
    transform: perspective(800px) rotateX(9deg) translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: perspective(800px) rotateX(5deg) translateY(-18px);
    opacity: 1;
  }
  100% {
    transform: perspective(800px) rotateX(10deg) translateY(8px);
    opacity: 0.85;
  }
}

@keyframes synapseFlow {
  0% {
    background-position: center, -150% -150%;
    opacity: 0;
  }
  20%, 80% {
    opacity: 0.8;
  }
  100% {
    background-position: center, 250% 250%;
    opacity: 0;
  }
}

/* ==========================================================================
   2. NỀN CÔNG NGHỆ
   ========================================================================== */

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background-color: #e2eaf7;
  background-image:
    radial-gradient(
      circle at 50% 0%,
      rgba(14, 165, 233, 0.22),
      transparent 55%
    ),
    radial-gradient(
      circle at 85% 85%,
      rgba(30, 64, 175, 0.20),
      transparent 60%
    ),
    radial-gradient(
      circle at 10% 70%,
      rgba(6, 182, 212, 0.14),
      transparent 50%
    ),
    linear-gradient(180deg, #f0f7ff 0%, #e2eaf7 40%, #cddcf0 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::before {
  inset: 0;
  background-image:
    radial-gradient(
      circle,
      rgba(14, 165, 233, 0.6) 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle,
      rgba(56, 189, 248, 0.7) 1.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle,
      rgba(2, 132, 199, 0.3) 2.5px,
      transparent 4px
    ),
    linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.05) 1px, transparent 1px);
  background-size:
    137px 173px,
    211px 241px,
    313px 307px,
    50px 50px,
    50px 50px;
  background-position: 15px 23px, 57px 91px, 120px 45px, 0 0, 0 0;
  transform-origin: top center;
  animation: neuralDepthShift 24s ease-in-out infinite alternate;
  z-index: -2;
}

body::after {
  inset: 0;
  background-image:
    radial-gradient(
      800px circle at 15% 15%,
      rgba(56, 189, 248, 0.18),
      transparent 65%
    ),
    linear-gradient(
      135deg,
      transparent 35%,
      rgba(255, 255, 255, 0.3) 48%,
      rgba(14, 165, 233, 0.2) 51%,
      transparent 58%
    );
  background-size: 100% 100%, 300% 300%;
  mix-blend-mode: overlay;
  animation: synapseFlow 14s ease-in-out infinite;
  z-index: -1;
}

/* ==========================================================================
   3. BOX NỘI DUNG
   Không áp dụng cho .box-topnews hoặc phần tử bên trong.
   ========================================================================== */

#body :is(.panel, .portlet, .box-border):not(.box-topnews):not(.box-topnews *) {
  position: relative !important;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(2, 132, 199, 0.24) !important;
  border-radius: 6px !important;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, 0.08),
    0 4px 16px rgba(2, 132, 199, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Viền nằm trong box, không làm tăng chiều rộng */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #body :is(.panel, .portlet, .box-border):not(.box-topnews):not(.box-topnews *)::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    box-sizing: border-box;
    background: conic-gradient(
      from var(--cyber-angle),
      transparent 70%,
      rgba(2, 132, 199, 0.25) 82%,
      #0284c7 90%,
      #38bdf8 96%,
      #fff 100%
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: cyberBorderOrbit 8s linear infinite;
    pointer-events: none;
    z-index: 2;
  }
}

/* ==========================================================================
   4. TIÊU ĐỀ BOX VÀ ĐÈN TÍN HIỆU
   ========================================================================== */

#body :is(.panel-heading, .box-header, .portlet-header, h3.title-box):not(.box-topnews *) {
  position: relative;
  box-sizing: border-box;
  height: auto !important;
  min-height: 44px;
  padding: 11px 12px 11px 36px !important;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid rgba(125, 211, 252, 0.8) !important;
  background: linear-gradient(110deg, #063b70 0%, #0369a1 55%, #0284c7 100%) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(56, 189, 248, 0.35),
    0 3px 10px rgba(2, 132, 199, 0.18);
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.5 !important;
}

/* Gỡ nền riêng của nhãn để tiêu đề có một nền thống nhất */
#body .panel-heading:not(.box-topnews *) > span,
#body .panel-heading:not(.box-topnews *) .cat-icon span {
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0;
  color: inherit !important;
  white-space: normal;
}

#body .panel-heading:not(.box-topnews *) .cat-icon {
  margin: 0 !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

#body :is(.panel-heading, .box-header, .portlet-header, h3.title-box):not(.box-topnews *) a {
  color: #fff !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 25, 60, 0.4);
  white-space: normal;
  overflow-wrap: anywhere;
}

#body :is(.panel-heading, .box-header, .portlet-header, h3.title-box):not(.box-topnews *)::before {
  content: "";
  display: block;
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid rgba(125, 211, 252, 0.75);
  border-radius: 50%;
  background: radial-gradient(circle, #e0f7ff 0%, #b5edfa 40%, #38bdf8 100%);
  opacity: 0.9;
  box-shadow:
    0 0 3px rgba(125, 211, 252, 0.4),
    0 0 7px rgba(56, 189, 248, 0.25);
  transform: translateY(-50%);
  transform-origin: center;
  animation: cyberLedPulseGrow 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   5. BANNER VÀ THỐNG KÊ
   ========================================================================== */

#body :is(.nv-block-banners, .banner-container):not(.box-topnews *) {
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);
}

#body :is(.hitcounter, .visitor-counter):not(.box-topnews *) {
  box-sizing: border-box;
  min-width: 0;
  padding: 12px;
  background: radial-gradient(
    circle at top left, #0f274a, #0b1a33
  ) !important;
  color: #e0f2fe !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.12);
}

#body .hitcounter :is(.hitngay, .hittatca),
#body .visitor-counter :is(strong, b) {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   6. HOVER TRÊN DESKTOP
   ========================================================================== */

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #body :is(.panel, .portlet, .box-border):not(.box-topnews):not(.box-topnews *):hover {
    transform: translateY(-2px);
    box-shadow:
      0 6px 20px rgba(14, 165, 233, 0.2),
      0 0 0 1px rgba(56, 189, 248, 0.35) !important;
  }
}

/* ==========================================================================
   7. TABLET VÀ MOBILE — TỐI ĐA 1024px
   ========================================================================== */

@media screen and (max-width: 1024px) {

  /* Nền công nghệ tĩnh, tránh lớp 3D toàn màn hình */
  body {
    background-color: #edf4fc !important;
    background-image:
      radial-gradient(
        circle at 15% 10%,
        rgba(14, 165, 233, 0.13),
        transparent 55%
      ),
      linear-gradient(rgba(14, 165, 233, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14, 165, 233, 0.04) 1px, transparent 1px),
      linear-gradient(180deg, #f0f7ff, #e2eaf7) !important;
    background-size:
      100% 100%, 40px 40px, 40px 40px, 100% 100% !important;
    background-attachment: scroll !important;
  }

  body::before,
  body::after {
    content: none !important;
    display: none !important;
    animation: none !important;
  }

  /* Giữ viền sáng, không dịch chuyển box */
  #body :is(.panel, .portlet, .box-border):not(.box-topnews):not(.box-topnews *) {
    transform: none !important;
    transition: none !important;
  }

  #body :is(.panel, .portlet, .box-border):not(.box-topnews):not(.box-topnews *)::before {
    animation-duration: 12s;
  }

  /* Chấm tiêu đề kế thừa pulse grow 3s trên mobile. */

  /* ------------------------------------------------------------------------
     MENU: GIỮ CƠ CHẾ MỞ/ĐÓNG CỦA THEME
     ------------------------------------------------------------------------ */

  #menusite .custom_menu_all .show_menu {
    width: min(88vw, 360px) !important;
    max-width: 100vw;
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  #menusite .custom_menu_all .show_menu.active {
    width: min(88vw, 360px) !important;
  }

  #menusite .custom_menu_all ul.slimmenucs li a {
    min-height: 44px;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.5 !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  #menusite .custom_menu_all ul.slimmenucs li.has-submenu > a {
    padding-right: 48px !important;
  }

  #menusite .custom_menu_all ul.slimmenucs li .sub-toggle {
    width: 44px !important;
    height: 44px !important;
    right: 0 !important;
  }

  #menusite .custom_menu_all .cscollapse-button {
    top: 50% !important;
    min-height: 44px;
  }

  /* ------------------------------------------------------------------------
     TAB TIN TỨC: GIỮ BẢN MOBILE ĐÃ SỬA
     ------------------------------------------------------------------------ */

  #body .box-topnews .tab-news {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    padding: 0 !important;
    margin: 0 0 12px !important;
  }

  #body .box-topnews .tab-news > li {
    flex: 1 1 140px;
    float: none !important;
    text-align: center;
  }

  #body .box-topnews .tab-news > li > a {
    min-height: 44px;
    padding: 12px 8px !important;
    white-space: normal;
    line-height: 1.4;
  }

  /* LOF slider thành danh sách tin; không tác động Slick banner */
  #body .box-topnews .lof-slidecontent,
  #body .box-topnews .lof-slidecontent .main-slider-content,
  #body .box-topnews .lof-slidecontent .sliders-wrapper,
  #body .box-topnews .lof-slidecontent ul.sliders-wrap-inner {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  #body .box-topnews .lof-slidecontent ul.sliders-wrap-inner {
    display: block !important;
    list-style: none;
  }

  #body .box-topnews .lof-slidecontent ul.sliders-wrap-inner > li {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    box-sizing: border-box;
    margin: 0 0 14px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid #dce6f0;
    overflow: visible !important;
  }

  #body .box-topnews .sliders-wrap-inner > li > a {
    display: block;
  }

  #body .box-topnews .sliders-wrap-inner > li > a > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px;
  }

  #body .box-topnews .lof-slidecontent .slider-description {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    padding: 10px 0 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #body .box-topnews .slider-description h4,
  #body .box-topnews .slider-description a.readmore {
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #12375b !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* Ẩn navigator trùng nội dung với danh sách phía trên */
  #body .box-topnews .lof-slidecontent .navigator-content,
  #body .box-topnews .lof-slidecontent .button-next,
  #body .box-topnews .lof-slidecontent .button-previous,
  #body .box-topnews .lof-slidecontent .button-control,
  #body .box-topnews .lof-slidecontent .preload {
    display: none !important;
  }
}

/* ==========================================================================
   8. ĐIỆN THOẠI — DƯỚI 768px
   ========================================================================== */

@media screen and (max-width: 767.98px) {

  body {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Khung trang */
  .wraper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #body.container {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #body .row {
    margin-left: -6px;
    margin-right: -6px;
  }

  #body .row > [class*="col-"] {
    min-width: 0;
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px;
  }

  #body > .row > .col-sm-16,
  #body > .row > .col-sm-8,
  #body .news_column.two_column {
    float: none !important;
    width: 100% !important;
  }

  /* Header */
  .section-header .header-gap {
    padding: 0 12px !important;
  }

  #header {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    height: auto !important;
    min-height: 0 !important;
  }

  #header .logo,
  #header .right-section {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 8px 0 !important;
    text-align: center;
  }

  #header .logo img,
  #header .unit-logo img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto;
  }

  #header .right-section .language {
    position: static !important;
    display: block;
    margin-top: 8px;
    text-align: right;
  }

  /* Banner giữ tỷ lệ ảnh */
  #body .custom--slide .div-poistion > img,
  #body .nv-block-banners img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  /* Không đặt width cho .slick-track hoặc .slick-slide */

  /* Nội dung box */
  #body .two_column .panel-body {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  #body .two_column .panel-body h3,
  #body .two_column .panel-body .related a {
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  #body .two_column .panel-body .min-height-p:empty {
    display: none;
  }

  #body .two_column .panel-body .related {
    clear: both;
    padding-top: 10px;
  }

  /* Thông báo tự cuộn lên như desktop.
     Không đặt transform:none vì sẽ vô hiệu hóa animation. */
  #body .marquee-container {
    position: relative;
    width: 100%;
    min-height: 150px !important;
    max-height: 250px !important;
    overflow: hidden !important;
  }

  #body .marquee-container .marquee-content {
    animation: tamHiepMarqueeUp 15s linear infinite !important;
  }

  /* Tạm dừng để người dùng đọc hoặc chọn liên kết. */
  #body .marquee-container:focus-within .marquee-content {
    animation-play-state: paused !important;
  }

  /* Tìm kiếm */
  #body .kttt-search .form-control,
  #menusite .kttt-search .form-control {
    height: 44px !important;
    font-size: 16px !important;
  }

  #body .kttt-search .btn,
  #menusite .kttt-search .btn {
    min-height: 44px;
  }

  /* Tiện ích */
  #body .item_content,
  #body .box_tab ul {
    grid-template-columns: minmax(0, 1fr);
  }

  #body .hitcounter .hitngay,
  #body .hitcounter .hittatca {
    font-size: clamp(28px, 10vw, 42px);
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   9. TÔN TRỌNG CHẾ ĐỘ GIẢM CHUYỂN ĐỘNG
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll !important;
  }

  body::before,
  body::after {
    animation: none !important;
  }

  #body :is(.panel, .portlet, .box-border):not(.box-topnews):not(.box-topnews *) {
    transform: none !important;
    transition: none !important;
  }

  #body :is(.panel, .portlet, .box-border):not(.box-topnews):not(.box-topnews *)::before,
  #body :is(.panel-heading, .box-header, .portlet-header, h3.title-box):not(.box-topnews *)::before {
    animation: none !important;
  }
}
/* ==========================================================================
   10. MARQUEE MOBILE — CUỘN TỰ ĐỘNG, TRÁNH HOVER BỊ GIỮ TRÊN CẢM ỨNG
   ========================================================================== */

@keyframes tamHiepMarqueeUp {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@media screen and (max-width: 767.98px) and (hover: hover) and (pointer: fine) {
  #body .marquee-container:hover .marquee-content {
    animation-play-state: paused !important;
  }
}

@media screen and (max-width: 767.98px) and (hover: none) {
  /* Ghi đè :hover của theme, tránh chạm một lần rồi đứng mãi. */
  #body .marquee-container:hover .marquee-content {
    animation-play-state: running !important;
  }

  #body .marquee-container:active .marquee-content,
  #body .marquee-container:focus-within .marquee-content {
    animation-play-state: paused !important;
  }
}

/* Khi thiết bị yêu cầu giảm chuyển động: cho phép cuộn tay. */
@media screen and (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  #body .marquee-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #body .marquee-container .marquee-content {
    animation: none !important;
    transform: none !important;
  }
}

/* Ẩn footer và khoảng trống của khối */
footer#footer.section-footer-top {
  display: none !important;
}