/* ================================
   Hero Slider
================================ */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #ffffff;
}

.hero,
.hero-track,
.hero-slide,
.hero-slide-image,
.hero-slide-inner {
  min-height: 520px;
}

.hero-slider {
  isolation: isolate;
  cursor: grab;
}

.hero-slider.is-dragging {
  cursor: grabbing;
}

.hero-track {
  position: relative;
  width: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.01);
  transition:
    opacity 0.65s ease,
    visibility 0.65s ease,
    transform 0.9s ease;
}

.hero-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.hero-slide-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* ================================
   Slide đầu: campus / cover image
================================ */

.hero-slide.is-cover .hero-slide-image,
.hero-slide.has-content .hero-slide-image {
  object-fit: cover;
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      90deg,
      rgba(3, 27, 78, 0.93) 0%,
      rgba(3, 27, 78, 0.74) 42%,
      rgba(3, 27, 78, 0.2) 100%
    ),
    radial-gradient(
      circle at 18% 24%,
      rgba(20, 121, 255, 0.28),
      transparent 34%
    );
  pointer-events: none;
}

.hero-slide-inner {
  position: relative;
  z-index: 5;
  display: grid;
  align-items: center;
  padding: 20px 0 94px;
  pointer-events: none;
}

.hero-content {
  max-width: 820px;
  pointer-events: auto;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  margin-bottom: 16px;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  backdrop-filter: blur(14px);
}

.hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2.7rem, 5vw, 4.35rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.hero h1 span {
  display: block;
  margin-top: 15px;
  color: #dbeafe;
  font-size: clamp(1.35rem, 2.45vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.hero p {
  max-width: 720px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-click-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
}

.hero-slide.has-content .hero-click-layer {
  z-index: 2;
}

/* =========================================================
   IU Banner Hero Final
   - Tất cả slide dùng format banner giữa + decor 2 bên
   - Decor tự tính đúng phần gutter còn lại nên không bị hở khoảng trắng
   - Giảm chiều cao theo kiểu gọn như Bách Khoa
========================================================= */

.iu-hero {
  --iu-hero-frame-width: min(82vw, 1680px);
  --iu-hero-height: clamp(360px, 24vw, 455px);
  --iu-hero-banner-width: calc(var(--iu-hero-frame-width) * 0.82);
  --iu-side-decor-width: calc((var(--iu-hero-frame-width) - var(--iu-hero-banner-width)) / 2);

  min-height: var(--iu-hero-height) !important;
  height: var(--iu-hero-height);
  background: #ffffff;
}

@media (min-width: 1600px) {
  .iu-hero {
    --iu-hero-frame-width: min(84vw, 1760px);
    --iu-hero-height: 455px;
  }
}

@media (min-width: 1920px) {
  .iu-hero {
    --iu-hero-frame-width: min(84vw, 1820px);
    --iu-hero-height: 470px;
  }
}

.iu-hero .hero-track,
.iu-hero .hero-slide {
  min-height: var(--iu-hero-height) !important;
  height: var(--iu-hero-height);
}

.iu-hero .hero-slide.is-cover.has-content .hero-slide-image,
.iu-hero .hero-slide.has-content .hero-slide-image {
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: var(--iu-hero-height) !important;
  object-fit: cover;
  object-position: center;
}

.iu-hero .hero-slide.is-banner-white,
.iu-hero .hero-slide.is-banner-only {
  overflow: hidden;
  color: var(--iu-blue-950);
  background: #ffffff;
}

/*
 * Layer nền decor.
 * Điểm sửa chính:
 * - Trước đây decor đang dùng width cố định 162px.
 * - Khi đổi chiều cao / frame, nó có thể tạo cảm giác bị hở hoặc lệch.
 * - Bản này dùng --iu-side-decor-width tự tính theo frame và banner.
 */
.iu-hero .hero-slide.is-banner-white::before,
.iu-hero .hero-slide.is-banner-only::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: var(--iu-hero-frame-width);
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;

  background-repeat: no-repeat;
  background-position:
    left top,
    right top;
  background-size:
    var(--iu-side-decor-width) 100%,
    var(--iu-side-decor-width) 100%;

  background-image:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(241, 249, 255, 0.82) 10%,
      rgba(177, 222, 252, 0.78) 22%,
      rgba(78, 170, 230, 0.84) 45%,
      rgba(12, 92, 188, 0.94) 72%,
      rgba(3, 43, 108, 0.99) 100%
    ),
    linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(241, 249, 255, 0.82) 10%,
      rgba(177, 222, 252, 0.78) 22%,
      rgba(78, 170, 230, 0.84) 45%,
      rgba(12, 92, 188, 0.94) 72%,
      rgba(3, 43, 108, 0.99) 100%
    );
}

/*
 * Layer line/dot decor.
 * Background-size cũng dùng --iu-side-decor-width để luôn fill đúng chiều cao
 * và đúng bề rộng gutter hai bên.
 */
.iu-hero .hero-slide.is-banner-white::after,
.iu-hero .hero-slide.is-banner-only::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: var(--iu-hero-frame-width);
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;

  background-repeat: no-repeat;
  background-position:
    left top,
    right top;
  background-size:
    var(--iu-side-decor-width) 100%,
    var(--iu-side-decor-width) 100%;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='560' viewBox='0 0 180 560' fill='none'%3E%3Crect width='180' height='560' fill='none'/%3E%3Cg opacity='0.95'%3E%3Cpath d='M0 46C38 42 68 56 106 44C132 36 150 18 178 10' stroke='%23DDF2FF' stroke-width='1.55' opacity='0.58'/%3E%3Cpath d='M0 104C42 100 76 118 112 106C134 98 154 84 178 70' stroke='%23A9DFFF' stroke-width='1.6' opacity='0.48'/%3E%3Cpath d='M0 170C38 160 76 182 114 166C136 158 154 142 178 126' stroke='%23EAF8FF' stroke-width='1.35' opacity='0.46'/%3E%3Cpath d='M0 238C44 228 80 250 118 236C140 228 156 214 178 198' stroke='%23BCE7FF' stroke-width='1.5' opacity='0.46'/%3E%3Cpath d='M0 312C40 302 82 326 120 310C142 302 158 286 178 270' stroke='%23EAF8FF' stroke-width='1.35' opacity='0.42'/%3E%3Cpath d='M0 384C44 374 82 398 120 382C144 372 160 356 178 342' stroke='%23BCE7FF' stroke-width='1.5' opacity='0.44'/%3E%3Cpath d='M0 456C38 446 80 470 118 454C142 444 158 430 178 414' stroke='%23EAF8FF' stroke-width='1.35' opacity='0.4'/%3E%3Cpath d='M0 520C42 510 84 532 124 516C146 508 162 492 178 480' stroke='%23DDF2FF' stroke-width='1.5' opacity='0.48'/%3E%3C/g%3E%3Cg opacity='0.7'%3E%3Cpath d='M28 0V560' stroke='%23F7FCFF' stroke-width='1' opacity='0.18'/%3E%3Cpath d='M154 0V560' stroke='%239FD3FF' stroke-width='1' opacity='0.24'/%3E%3C/g%3E%3Cg opacity='0.88'%3E%3Cpath d='M32 82H96L130 52H178' stroke='%23527FC8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='96' cy='82' r='4.6' fill='%23527FC8'/%3E%3Ccircle cx='130' cy='52' r='4.6' fill='%23527FC8'/%3E%3Cpath d='M0 146H76L116 106' stroke='%236D99DB' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' opacity='0.86'/%3E%3Ccircle cx='76' cy='146' r='4.4' fill='%236D99DB'/%3E%3Cpath d='M18 210H66' stroke='%23BDE4FF' stroke-width='3' stroke-linecap='round' opacity='0.72'/%3E%3Cpath d='M0 282H88L122 316H178' stroke='%23527FC8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='88' cy='282' r='4.5' fill='%23527FC8'/%3E%3Ccircle cx='122' cy='316' r='4.5' fill='%23527FC8'/%3E%3Cpath d='M18 356H108L138 386H178' stroke='%236D99DB' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' opacity='0.86'/%3E%3Ccircle cx='108' cy='356' r='4.4' fill='%236D99DB'/%3E%3Ccircle cx='138' cy='386' r='4.4' fill='%236D99DB'/%3E%3Cpath d='M18 430H64' stroke='%23BDE4FF' stroke-width='3' stroke-linecap='round' opacity='0.72'/%3E%3Cpath d='M0 500H84L126 532H178' stroke='%23527FC8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='84' cy='500' r='4.5' fill='%23527FC8'/%3E%3Ccircle cx='126' cy='532' r='4.5' fill='%23527FC8'/%3E%3C/g%3E%3Cg opacity='0.72'%3E%3Cpath d='M38 168C58 144 90 144 110 168C90 192 58 192 38 168Z' stroke='%23DDF2FF' stroke-width='1.35'/%3E%3Cpath d='M38 168H110' stroke='%23DDF2FF' stroke-width='1.05' opacity='0.68'/%3E%3Cpath d='M74 132V204' stroke='%23DDF2FF' stroke-width='1.05' opacity='0.68'/%3E%3Ccircle cx='74' cy='168' r='3.1' fill='%23F7FCFF' opacity='0.95'/%3E%3C/g%3E%3Cg fill='%23F7FCFF' opacity='0.74'%3E%3Ccircle cx='56' cy='126' r='3'/%3E%3Ccircle cx='104' cy='198' r='2.7'/%3E%3Ccircle cx='48' cy='256' r='2.8'/%3E%3Ccircle cx='112' cy='334' r='3'/%3E%3Ccircle cx='56' cy='412' r='2.8'/%3E%3Ccircle cx='98' cy='486' r='2.7'/%3E%3C/g%3E%3Cg fill='%239FE3FF' opacity='0.58'%3E%3Ccircle cx='68' cy='72' r='2.1'/%3E%3Ccircle cx='116' cy='146' r='2.2'/%3E%3Ccircle cx='70' cy='228' r='2.1'/%3E%3Ccircle cx='120' cy='388' r='2.2'/%3E%3Ccircle cx='72' cy='548' r='2.1'/%3E%3C/g%3E%3C/svg%3E"),
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="180" height="560" viewBox="0 0 180 560" fill="none"%3E%3Cg transform="translate(180 0) scale(-1 1)"%3E%3Crect width="180" height="560" fill="none"/%3E%3Cg opacity="0.95"%3E%3Cpath d="M0 46C38 42 68 56 106 44C132 36 150 18 178 10" stroke="%23DDF2FF" stroke-width="1.55" opacity="0.58"/%3E%3Cpath d="M0 104C42 100 76 118 112 106C134 98 154 84 178 70" stroke="%23A9DFFF" stroke-width="1.6" opacity="0.48"/%3E%3Cpath d="M0 170C38 160 76 182 114 166C136 158 154 142 178 126" stroke="%23EAF8FF" stroke-width="1.35" opacity="0.46"/%3E%3Cpath d="M0 238C44 228 80 250 118 236C140 228 156 214 178 198" stroke="%23BCE7FF" stroke-width="1.5" opacity="0.46"/%3E%3Cpath d="M0 312C40 302 82 326 120 310C142 302 158 286 178 270" stroke="%23EAF8FF" stroke-width="1.35" opacity="0.42"/%3E%3Cpath d="M0 384C44 374 82 398 120 382C144 372 160 356 178 342" stroke="%23BCE7FF" stroke-width="1.5" opacity="0.44"/%3E%3Cpath d="M0 456C38 446 80 470 118 454C142 444 158 430 178 414" stroke="%23EAF8FF" stroke-width="1.35" opacity="0.4"/%3E%3Cpath d="M0 520C42 510 84 532 124 516C146 508 162 492 178 480" stroke="%23DDF2FF" stroke-width="1.5" opacity="0.48"/%3E%3C/g%3E%3Cg opacity="0.7"%3E%3Cpath d="M28 0V560" stroke="%23F7FCFF" stroke-width="1" opacity="0.18"/%3E%3Cpath d="M154 0V560" stroke="%239FD3FF" stroke-width="1" opacity="0.24"/%3E%3C/g%3E%3Cg opacity="0.88"%3E%3Cpath d="M32 82H96L130 52H178" stroke="%23527FC8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Ccircle cx="96" cy="82" r="4.6" fill="%23527FC8"/%3E%3Ccircle cx="130" cy="52" r="4.6" fill="%23527FC8"/%3E%3Cpath d="M0 146H76L116 106" stroke="%236D99DB" stroke-width="2.05" stroke-linecap="round" stroke-linejoin="round" opacity="0.86"/%3E%3Ccircle cx="76" cy="146" r="4.4" fill="%236D99DB"/%3E%3Cpath d="M18 210H66" stroke="%23BDE4FF" stroke-width="3" stroke-linecap="round" opacity="0.72"/%3E%3Cpath d="M0 282H88L122 316H178" stroke="%23527FC8" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/%3E%3Ccircle cx="88" cy="282" r="4.5" fill="%23527FC8"/%3E%3Ccircle cx="122" cy="316" r="4.5" fill="%23527FC8"/%3E%3Cpath d="M18 356H108L138 386H178" stroke="%236D99DB" stroke-width="2.05" stroke-linecap="round" stroke-linejoin="round" opacity="0.86"/%3E%3Ccircle cx="108" cy="356" r="4.4" fill="%236D99DB"/%3E%3Ccircle cx="138" cy="386" r="4.4" fill="%236D99DB"/%3E%3Cpath d="M18 430H64" stroke="%23BDE4FF" stroke-width="3" stroke-linecap="round" opacity="0.72"/%3E%3Cpath d="M0 500H84L126 532H178" stroke="%23527FC8" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/%3E%3Ccircle cx="84" cy="500" r="4.5" fill="%23527FC8"/%3E%3Ccircle cx="126" cy="532" r="4.5" fill="%23527FC8"/%3E%3C/g%3E%3Cg opacity="0.72"%3E%3Cpath d="M38 168C58 144 90 144 110 168C90 192 58 192 38 168Z" stroke="%23DDF2FF" stroke-width="1.35"/%3E%3Cpath d="M38 168H110" stroke="%23DDF2FF" stroke-width="1.05" opacity="0.68"/%3E%3Cpath d="M74 132V204" stroke="%23DDF2FF" stroke-width="1.05" opacity="0.68"/%3E%3Ccircle cx="74" cy="168" r="3.1" fill="%23F7FCFF" opacity="0.95"/%3E%3C/g%3E%3Cg fill="%23F7FCFF" opacity="0.74"%3E%3Ccircle cx="56" cy="126" r="3"/%3E%3Ccircle cx="104" cy="198" r="2.7"/%3E%3Ccircle cx="48" cy="256" r="2.8"/%3E%3Ccircle cx="112" cy="334" r="3"/%3E%3Ccircle cx="56" cy="412" r="2.8"/%3E%3Ccircle cx="98" cy="486" r="2.7"/%3E%3C/g%3E%3Cg fill="%239FE3FF" opacity="0.58"%3E%3Ccircle cx="68" cy="72" r="2.1"/%3E%3Ccircle cx="116" cy="146" r="2.2"/%3E%3Ccircle cx="70" cy="228" r="2.1"/%3E%3Ccircle cx="120" cy="388" r="2.2"/%3E%3Ccircle cx="72" cy="548" r="2.1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

/* Banner chính: nằm chính giữa, khớp đúng phần còn lại giữa 2 decor */
.iu-hero .hero-slide.is-banner-white .hero-slide-image,
.iu-hero .hero-slide.is-banner-only .hero-slide-image {
  z-index: 20;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: var(--iu-hero-banner-width);
  height: var(--iu-hero-height);
  min-height: 0 !important;
  object-fit: fill;
  object-position: center;
  transform: translate(-50%, -50%);
  filter: none;
}

/* ================================
   Slider dots
================================ */

.hero-dots {
  position: absolute;
  z-index: 22;
  left: 50%;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(180, 198, 220, 0.58);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(3, 27, 78, 0.12);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

.hero-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  overflow: hidden;
  background: rgba(100, 116, 139, 0.38);
  border: 0;
  border-radius: 999px;
  transition:
    width 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}

.hero-dot:hover {
  background: var(--iu-blue-700);
  transform: scale(1.12);
}

.hero-dot.is-active {
  width: 34px;
  background: var(--iu-blue-800);
}