/* Tùy chỉnh UG5: sửa ở đây, giữ nguyên hai file CSS được bàn giao. */

/* ==========================================================================
   1. Quy tắc chung & Chuyển tiếp cơ bản (Transitions)
   ========================================================================== */
a {
  color: #106365;
  transition: color 0.22s ease, text-decoration-color 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
}
a:hover {
  color: #188e90;
}
.content-block a,
.page-content a:not(.action):not(.tag-list a):not(.pagination a) {
  text-underline-offset: 4px;
}
.content-block a:hover,
.page-content a:not(.action):not(.tag-list a):not(.pagination a):hover {
  color: #0b4547;
  text-decoration: underline;
  text-decoration-color: #188e90;
}

.preview-note{padding:8px 16px;text-align:center;background:#e7f5f5;color:#106365;font-size:12px}
.ug5-header{background:#fbfaf6;border-bottom:1px solid #d9e7e6}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}

/* Logo Wordmark có hiệu ứng phóng to nhẹ khi di chuột */
.wordmark {
  display: inline-block;
  font-size: 34px;
  font-weight: 850;
  text-decoration: none;
  letter-spacing: -2px;
  color: #0b4547;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.wordmark:hover {
  transform: scale(1.03);
  opacity: 0.95;
}
.wordmark span{color:#d97706}
.wordmark small{display:block;font-size:10px;letter-spacing:1px;margin-top:6px;font-weight:600}

/* Menu điều hướng chính: hiệu ứng nổi nhẹ & gạch chân mềm mại */
.header-inner nav{display:flex;flex-wrap:wrap;gap:20px}
.header-inner nav a {
  position: relative;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  color: #14312f;
  padding-block: 4px;
  transition: color 0.22s ease, transform 0.2s ease, text-decoration-color 0.2s ease;
}
.header-inner nav a:hover {
  color: #106365;
  transform: translateY(-1px);
  text-decoration: underline;
  text-decoration-color: #188e90;
  text-underline-offset: 7px;
}
.header-inner nav a[aria-current]{
  color:#106365;
  text-decoration:underline;
  text-underline-offset:7px;
}

.menu-toggle {
  font:inherit;
  border:1px solid #106365;
  background:white;
  border-radius:8px;
  padding:8px 14px;
  color:#106365;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.menu-toggle:hover {
  background: #e7f5f5;
  border-color: #0b4547;
  color: #0b4547;
  transform: translateY(-1px);
}

.home-hero{background:#f0f4eb;padding:72px 0 80px}.hero-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase;color:#106365}
.home-hero h1{font-size:clamp(42px,5.4vw,72px);line-height:1.08;letter-spacing:-2px;margin:18px 0 24px}.home-hero h1 span{color:#106365}
.hero-subtitle{font-size:22px;font-weight:650}.home-hero p:not(.eyebrow){max-width:590px;line-height:1.75}

/* Nút hành động kêu gọi (CTA Buttons): nâng lên, đổ bóng sang trọng, lướt mũi tên */
.action {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  padding:13px 21px;
  border-radius:99px;
  background:#106365;
  color:white;
  font-weight:700;
  text-decoration:none;
  border:1px solid #106365;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.action:hover {
  background:#0b4547;
  border-color:#0b4547;
  color:white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 99, 101, 0.28);
}
.action:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(16, 99, 101, 0.18);
}
.action span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.action:hover span[aria-hidden="true"] {
  transform: translateX(4px);
}
.action--outline{
  background:transparent;
  color:#106365;
  border-color:#106365;
}
.action--outline:hover {
  background:#106365;
  color:white;
  border-color:#106365;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 99, 101, 0.22);
}

/* Thẻ poster giá trị trang chủ */
.value-poster {
  background:#0b4547;
  color:#fff;
  border-radius:28px;
  padding:32px;
  transform:rotate(2deg);
  box-shadow:12px 12px 0 #dde8d7;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.value-poster:hover {
  transform: rotate(0deg) scale(1.015);
  box-shadow: 16px 16px 0 #c2d6ba;
}
.poster-label{font-size:11px;letter-spacing:2px;color:#d4eeee}.poster-row{display:flex;gap:24px;align-items:center;border-bottom:1px solid #ffffff30;padding:14px 0}.poster-row span{color:#f7bc6e;font-size:13px}.poster-row strong{font-size:26px}.poster-note{color:#d4eeee;font-size:13px;margin:22px 0 0}

/* Thẻ giá trị 5 điều: nâng thẻ, phát sáng viền trên theo màu giá trị */
.value-number{font-weight:800;font-size:24px;color:var(--ug5-value-color)}
.ug5-value {
  padding:20px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ug5-value:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(16, 99, 101, 0.12);
  border-color: var(--ug5-value-color, #188e90);
}
.ug5-value__text{font-size:14px;line-height:1.65;color:#435b58}

.split-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.quote-panel {
  border-left:4px solid #d97706;
  padding:24px;
  font-size:24px;
  line-height:1.5;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.quote-panel:hover {
  border-color: #f79820;
  transform: translateX(4px);
}
.quote-panel a {
  font-size:15px;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}
.quote-panel a:hover {
  color: #0b4547;
  transform: translateX(3px);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.two-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.feature-card {
  border:1px solid #d9e7e6;
  background:#fff;
  border-radius:16px;
  padding:28px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 99, 101, 0.1);
  border-color: #a9c3bc;
}
.feature-card h2,.feature-card h3{font-size:22px;margin:12px 0}
.feature-card a {
  font-weight:700;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}
.feature-card a:hover {
  color: #0b4547;
  transform: translateX(3px);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.closing{text-align:center;max-width:720px}.closing p{font-size:19px;line-height:1.7;margin-bottom:28px}
.page-intro{background:#e7f5f5;padding:48px 0}.page-intro h1{font-size:42px;margin:12px 0}.page-content{padding-block:40px 72px}.content-block{max-width:820px;margin-block:0 40px;line-height:1.8}.content-block h2{font-size:26px;margin-top:32px}.page-content .ug5-values{margin-bottom:48px}.ug5-pending{margin-bottom:32px}.ug5-pending p{margin:0}
.source-links{columns:2;line-height:2}
.ug5-footer{background:#0b4547;color:#e7f5f5;padding:40px 0}
.ug5-footer a{
  color:#fff;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.ug5-footer a:hover {
  color: #f7bc6e;
}
.footer-layout{display:flex;justify-content:space-between;gap:32px}
.ug5-footer nav{display:flex;flex-direction:column;gap:12px}
.ug5-footer nav a {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.ug5-footer nav a:hover {
  color: #f7bc6e;
  transform: translateX(4px);
}
.footer-note{font-size:13px;color:#c6dfdc}
.skip-link{position:absolute;top:-100px;left:16px;z-index:20;background:#fff;padding:12px;transition: top 0.2s ease;}.skip-link:focus{top:12px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[id]{scroll-margin-top:20px}
@media(max-width:900px){.hero-layout,.split-layout{grid-template-columns:1fr;gap:32px}.home-hero{padding:40px 0 56px}.value-poster{transform:none;max-width:500px}.header-inner{flex-wrap:wrap}.header-inner nav{gap:14px}.two-cards{grid-template-columns:1fr}.footer-layout{flex-wrap:wrap}}
@media(max-width:600px){.header-inner{gap:16px}.header-inner nav{width:100%}.menu-toggle:not([hidden]){display:block}.js-menu #menu-chinh:not(.is-open){display:none}.js-menu #menu-chinh.is-open{display:flex;flex-direction:column}.hero-layout{gap:36px}.value-poster{padding:24px}.page-intro h1{font-size:32px}.source-links{columns:1}.footer-layout{flex-direction:column}.home-hero h1{letter-spacing:-1px}}

@media(min-width:601px){.menu-toggle{display:none}}

/* ==========================================================================
   2. Video: hiệu ứng di chuột cho khung video, thẻ video và trình phát
   ========================================================================== */
.video-player {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 12px;
  background: #102f32;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-bottom: 48px; }
.video-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d9e7e6;
  border-radius: 16px;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(16, 99, 101, 0.15);
  border-color: #a9c3bc;
}
.video-card .video-player { border-radius: 0; }
.video-card:hover .video-player,
.video-player:hover {
  box-shadow: 0 8px 24px rgba(11, 69, 71, 0.28);
}
.video-description {
  margin: 0;
  padding: 18px 20px;
  color: #435b58;
  font-size: 15px;
  line-height: 1.7;
  transition: color 0.2s ease;
}
.video-card:hover .video-description {
  color: #14312f;
}
@media (max-width: 700px) { .video-grid { grid-template-columns: 1fr; gap: 24px; } }

.ug5-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #0d2929;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ug5-video:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(11, 69, 71, 0.25);
}
video {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
video:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(11, 69, 71, 0.25);
}

/* ==========================================================================
   3. Tin tức & Hình ảnh: Phóng to ảnh mượt mà, nâng card và liên kết
   ========================================================================== */
.news-filters{display:flex;align-items:end;gap:18px;flex-wrap:wrap;padding:22px;border:1px solid #d9e7e6;border-radius:14px;margin-bottom:32px;background:#fff}
.news-filters label{display:block;font-size:14px;font-weight:600;flex:1;min-width:180px}
.news-filters input,.news-filters select{display:block;width:100%;padding:11px 12px;margin-top:8px;border:1px solid #a9c3bc;border-radius:8px;background:white;color:#173a3a;font:inherit;transition:border-color 0.2s ease,box-shadow 0.2s ease}
.news-filters input:hover,.news-filters select:hover{border-color:#106365}
.news-filters button{
  padding:11px 20px;
  background:#106365;
  color:#fff;
  border:0;
  border-radius:8px;
  font:inherit;
  cursor:pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.news-filters button:hover {
  background: #0b4547;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 99, 101, 0.25);
}
.news-filters a{font-size:14px;padding-bottom:10px;transition:color 0.2s ease}
.news-filters a:hover{color:#0b4547;text-decoration:underline}

.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:36px}
.news-card {
  background:white;
  border:1px solid #d9e7e6;
  border-radius:16px;
  overflow:hidden;
  min-width:0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(16, 99, 101, 0.14);
  border-color: #a9c3bc;
}
.news-card > a[tabindex="-1"],
.news-card a:has(img) {
  display: block;
  overflow: hidden;
}
/* Hiệu ứng phóng to ảnh bài viết khi di chuột vào card */
.news-card img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}
.news-card:hover img {
  transform: scale(1.06);
  filter: brightness(1.03);
}
.news-card__body{padding:24px}
.news-card h2{font-size:22px;line-height:1.4;margin:10px 0 14px}
.news-card h2 a{
  text-decoration:none;
  color:#0b4547;
  transition: color 0.2s ease;
}
.news-card h2 a:hover{
  color: #106365;
  text-decoration:underline;
  text-underline-offset: 4px;
}
.news-card p{line-height:1.7}
.news-meta{font-size:13px;color:#60716e}
.news-card__body a:last-child {
  display: inline-block;
  margin-top: 8px;
  font-weight: 650;
  transition: transform 0.2s ease, color 0.2s ease;
}
.news-card__body a:last-child:hover {
  transform: translateX(4px);
  color: #0b4547;
}

.news-featured{margin-bottom:36px}
.news-card--featured:has(img){display:grid;grid-template-columns:1.2fr 1fr}
.news-card--featured img{height:100%;min-height:260px}
.news-empty{padding:38px;background:#f0f4eb;border-radius:18px;max-width:820px}.news-empty h2{margin-top:0}
.news-detail{max-width:820px;margin:0 auto 48px;line-height:1.85}
.news-detail figure{margin:28px 0; overflow: hidden; border-radius: 14px;}

/* Ảnh bìa bài viết chi tiết */
.article-cover {
  display:block;
  width:100%;
  max-height:580px;
  object-fit:contain;
  border-radius:14px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}
.article-cover:hover {
  transform: scale(1.015);
  box-shadow: 0 16px 36px rgba(16, 99, 101, 0.16);
  filter: brightness(1.02);
}
.news-detail figcaption{font-size:13px;color:#60716e;margin-top:8px}
.article-summary{font-size:21px;font-weight:600;color:#0b4547}
.article-body h2{margin-top:36px;font-size:26px}
.article-body p{white-space:normal}
.article-sources{background:#f0f4eb;padding:20px 24px;border-radius:12px;margin:32px 0;overflow-wrap:anywhere}
.article-sources h2{font-size:20px;margin-top:0}
.faq-item{border-bottom:1px solid #d9e7e6;padding:15px 0;transition: background-color 0.2s ease;}
.faq-item:hover{background: rgba(231, 245, 245, 0.35);}
.faq-item summary{cursor:pointer;font-weight:600;transition: color 0.2s ease;}
.faq-item summary:hover{color: #106365;}

/* Thẻ tags chủ đề: nổi lên và đổ màu */
.tag-list{display:flex;gap:10px;flex-wrap:wrap}
.tag-list a {
  background:#e7f5f5;
  border-radius:99px;
  padding:6px 13px;
  text-decoration:none;
  font-size:14px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tag-list a:hover {
  background: #106365;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 99, 101, 0.22);
}

/* Nút phân trang */
.pagination{display:flex;gap:8px;justify-content:center;margin:32px 0;flex-wrap:wrap}
.pagination a {
  border:1px solid #a9c3bc;
  border-radius:8px;
  padding:8px 14px;
  text-decoration:none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pagination a:not([aria-current]):hover {
  background: #e7f5f5;
  border-color: #106365;
  color: #106365;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.pagination a[aria-current]{background:#106365;color:white}
.related-news{margin-top:48px}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d97706;outline-offset:3px}
@media(max-width:900px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.news-card--featured:has(img){grid-template-columns:1fr}}
@media(max-width:600px){.news-grid{grid-template-columns:1fr}.news-filters{flex-direction:column;align-items:stretch}.news-filters label{min-width:0}.news-empty{padding:24px}.article-summary{font-size:18px}.page-intro h1{overflow-wrap:anywhere}}

/* Thẻ hoạt động */
.activity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.activity-card {
  padding:24px;
  border:1px solid #d9e7e6;
  border-radius:14px;
  background:#fff;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 99, 101, 0.1);
  border-color: #a9c3bc;
}
.activity-card h3{margin:8px 0 12px;line-height:1.4;font-size:21px}
.activity-card h3 a{
  text-decoration:none;
  transition: color 0.2s ease;
}
.activity-card h3 a:hover{
  color: #106365;
  text-decoration:underline;
  text-underline-offset: 4px;
}
.activity-card p{margin-bottom:0}
.activity-source{font-size:13px;color:#526d6f}
@media(max-width:700px){.activity-grid{grid-template-columns:1fr}.activity-card{padding:20px}}

/* Thư viện ảnh hoạt động trường học: hiệu ứng phóng to ảnh và bóng đổ nhẹ */
.activity-section{max-width:none}.activity-layout{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(240px,1fr);gap:28px;align-items:start}
.school-gallery{min-width:0;padding:20px;background:#e7f5f5;border:1px solid #d9e7e6;border-radius:18px}
.school-gallery__label{margin:0 0 18px;font-weight:700;font-size:18px;color:#0b4547}
.school-gallery figure {
  margin:0 0 20px;
  overflow: hidden;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.school-gallery figure:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(16, 99, 101, 0.14);
}
.school-gallery img {
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}
.school-gallery figure:hover img {
  transform: scale(1.06);
  filter: brightness(1.03);
}
.school-gallery figcaption{font-size:14px;line-height:1.6;margin-top:9px;color:#435b58}
.school-gallery__source {
  display:inline-block;
  font-size:12px;
  line-height:1.6;
  transition: color 0.2s ease, transform 0.2s ease;
}
.school-gallery__source:hover {
  color: #0b4547;
  transform: translateX(3px);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media(max-width:950px){.activity-layout{grid-template-columns:1fr}.school-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.school-gallery__label,.school-gallery__source{grid-column:1/-1}.school-gallery figure{margin:0}.school-gallery__label{margin:0}}
@media(max-width:600px){.school-gallery{grid-template-columns:1fr}.activity-layout{gap:24px}}

.honors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.honors-grid .news-card img{object-fit:contain;background:#e7f5f5}

/* Nút thả tim / quan tâm: hiệu ứng tương tác nhún & bóng mờ */
.honor-interest {
  padding:9px 15px;
  border:1px solid #106365;
  border-radius:99px;
  background:#fff;
  color:#106365;
  font:inherit;
  cursor:pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.honor-interest:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 99, 101, 0.2);
  border-color: #0b4547;
}
.honor-interest:active {
  transform: translateY(0);
}
.honor-interest[aria-pressed=true]{background:#106365;color:white}
.honor-interest:focus-visible{outline:3px solid #d97706;outline-offset:3px}
@media(max-width:700px){.honors-grid{grid-template-columns:1fr}}

/* ==========================================================================
   4. Hỗ trợ người dùng giảm chuyển động (Accessibility / Reduced Motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* Homepage: real photography, sticky navigation and action cards. */
.ug5-header{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.97);box-shadow:0 4px 22px #0b454709;backdrop-filter:blur(12px)}
[id]{scroll-margin-top:130px}
.home-hero{background:linear-gradient(120deg,#f6f5ee,#e8f1eb);padding:64px 0 54px;overflow:hidden}
.hero-layout{grid-template-columns:1fr 1.12fr;gap:52px}.home-hero h1{font-size:clamp(42px,4.8vw,68px);max-width:600px}
.hero-photo{position:relative;margin:0;min-width:0}.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:28px 28px 28px 6px;box-shadow:0 24px 60px #164c491c}
.hero-photo-note{display:flex;align-items:center;gap:10px;position:relative;width:fit-content;max-width:94%;margin:-28px 16px 0;padding:15px 18px;background:#fff;border-radius:12px;box-shadow:0 8px 30px #0b454717;color:#0b4547;font-weight:700;font-size:14px}.hero-note-dot{width:10px;height:10px;border-radius:50%;background:#d58c34;flex:none}
.hero-photo figcaption{margin:14px 16px 0;font-size:11px;color:#526963;line-height:1.5}.hero-photo figcaption a{color:inherit;text-underline-offset:3px}
.home-stats{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:0;padding-block:40px;border-bottom:1px solid #dce6df}.stats-intro{padding-right:24px}.stats-intro .eyebrow{font-size:11px}.stats-intro h2{font-size:23px;line-height:1.3;margin:10px 0}
.stat-item{display:flex;flex-direction:column;justify-content:center;gap:7px;text-decoration:none;padding:8px 28px;border-left:1px solid #dce6df;color:#0b4547}.stat-number{font-size:54px;line-height:1;letter-spacing:-2px;font-weight:750}.stat-item>span:not(.sr-only){font-size:15px;font-weight:700}.stat-item small{font-size:12px;color:#526963}.stat-item:hover .stat-number{color:#b87525}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ug5-values{gap:18px}.ug5-value{display:flex;flex-direction:column;border-radius:18px;padding:25px 22px;min-width:0;background:#fff;box-shadow:0 8px 22px #0b454706;transition:transform .2s,box-shadow .2s}.ug5-value:hover{transform:translateY(-5px);box-shadow:0 15px 35px #0b454710}
.value-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.value-icon{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;flex:none;border-radius:16px;background:#edf3f1;background:color-mix(in srgb,var(--ug5-value-color,#106365) 12%,white);color:var(--ug5-value-color,#106365)}
.value-top .value-number{position:static;font-size:13px;opacity:.45}.ug5-value__title{font-size:22px}.ug5-value__text{font-size:14px;line-height:1.75}.value-action{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;color:#0b4547;text-decoration:none}.value-action:hover{text-decoration:underline;text-underline-offset:4px}
.practice-today{margin-bottom:56px}.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.practice-grid article{padding:24px;background:#f1f6f2;border:1px solid #dce6df;border-radius:18px}.practice-grid h3{margin:18px 0 10px}.practice-grid p{margin:0;line-height:1.75}
.ug5-footer{padding:58px 0 0}.footer-layout{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px;padding-bottom:42px}.ug5-footer nav h2{color:#fff;font-size:15px;margin:0 0 8px}.ug5-footer nav a{font-size:13px;text-decoration:none}.footer-brand p{font-size:14px;line-height:1.8}.footer-brand .wordmark small{color:#bad4cd}.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid #ffffff20;padding-block:22px;font-size:11px;color:#b9d2cc}.footer-bottom p{margin:0}.footer-bottom a{white-space:nowrap}
@media(min-width:1100px){.ug5-values{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1000px){.hero-layout{gap:30px}.header-inner{gap:14px;padding-block:15px}.header-inner nav{gap:14px}.header-inner nav a{font-size:13px}.home-stats{grid-template-columns:repeat(3,1fr)}.stats-intro{grid-column:1/-1;margin-bottom:22px}.stats-intro h2 br{display:none}.stat-item:first-of-type{border-left:0;padding-left:0}.footer-layout{gap:24px;grid-template-columns:repeat(2,1fr)}}
@media(max-width:750px){.hero-layout{grid-template-columns:1fr}.home-hero{padding:36px 0}.home-hero h1{font-size:48px}.hero-photo{margin-top:10px}.hero-photo img{max-height:none}.home-stats{padding-block:28px}.stat-item{padding:8px 14px}.stat-number{font-size:42px}.stat-item small{font-size:11px}.practice-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.header-inner{flex-wrap:wrap}.home-hero h1{font-size:43px}.hero-subtitle{font-size:19px}.hero-photo-note{font-size:12px;padding:12px;margin-top:-22px}.home-stats{grid-template-columns:1fr}.stats-intro{margin-bottom:12px}.stat-item,.stat-item:first-of-type{padding:18px 0;border-left:0;border-top:1px solid #dce6df;display:grid;grid-template-columns:64px 1fr;gap:5px 16px}.stat-number{grid-row:1/3}.stat-item small{grid-column:2}.footer-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column}.practice-grid{grid-template-columns:1fr}.hero-layout{gap:24px}}
@media(prefers-reduced-motion:reduce){.ug5-value{transition:none}.ug5-value:hover{transform:none}}

/* School navigation and verified contact details */
.ug5-header{background:rgba(251,250,246,.88);-webkit-backdrop-filter:blur(12px)}
.header-inner{gap:24px}.header-inner nav{gap:20px;align-items:center}.header-inner nav a{font-size:14px;white-space:nowrap}
.header-inner nav .header-cta{background:#0b6668;color:#fff;padding:12px 17px;border-radius:999px;border:1px solid #0b6668;text-decoration:none;font-size:13px}.header-inner nav .header-cta:hover{background:#084c4e;color:#fff}.header-cta span{margin-left:6px}
.footer-layout{grid-template-columns:1.2fr .8fr 1.25fr 1.15fr;gap:32px}.ug5-footer h2{font-size:15px;color:#fff;margin:0 0 20px}.footer-owner{font-size:12px!important;color:#bdd8d4}.footer-owner strong{color:#fff;font-size:14px}.footer-campuses address{font-style:normal;font-size:12px;line-height:1.7;display:grid;gap:5px}.footer-campuses address strong:not(:first-child){margin-top:12px}.footer-campuses>a{display:inline-block;margin-top:18px;font-size:12px}.footer-contact{display:flex;flex-direction:column;gap:10px;min-width:0}.footer-contact>a{font-size:12px;text-decoration:none;overflow-wrap:anywhere}.footer-contact .footer-hotline{font-size:26px;font-weight:700;color:#fff;line-height:1.2}.footer-contact p{margin:0;font-size:11px}.footer-contact p:not(:first-of-type){margin-top:2px}.footer-social{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.footer-social a{border:1px solid #ffffff40;border-radius:8px;padding:8px 12px;font-size:12px;text-decoration:none}.footer-social a:hover{background:#ffffff15}.footer-bottom>div{max-width:85%}.footer-bottom p+p{margin-top:7px;line-height:1.7}.header-cta:focus-visible,.ug5-footer a:focus-visible{outline:3px solid #f5b54a;outline-offset:4px}
@media(max-width:1200px){.header-inner nav{gap:12px}.header-inner nav a{font-size:12px}.header-inner{gap:14px}.header-inner .wordmark{font-size:36px}.header-inner .wordmark small{font-size:9px}}
@media(max-width:1000px){.footer-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.header-inner{justify-content:space-between}.header-inner nav{width:100%;justify-content:space-between;flex-wrap:wrap}}
@media(max-width:600px){.header-inner nav{align-items:stretch;gap:14px}.header-inner nav a{font-size:14px}.header-inner nav .header-cta{text-align:center}.footer-layout{grid-template-columns:1fr;gap:34px}.footer-brand{grid-column:auto}.footer-bottom>div{max-width:100%}.footer-campuses address{font-size:13px}.footer-contact>a{font-size:13px}}

/* ==========================================================================
   5. Trang chủ: Đa phương tiện, Khoảnh khắc thực tế & Hành trình cuộc thi
   ========================================================================== */
.home-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-bottom: 36px;
}
.home-video-card {
  background: #fff;
  border: 1px solid #d9e7e6;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 99, 101, 0.06);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.home-video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(16, 99, 101, 0.14);
  border-color: #a9c3bc;
}
.home-video-card .video-player {
  border-radius: 0;
}
.home-video-body {
  padding: 24px 26px;
}
.video-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  background: #e7f5f5;
  color: #106365;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.home-video-body h3 {
  font-size: 20px;
  line-height: 1.4;
  margin: 0 0 10px;
  color: #0b4547;
}
.home-video-body p {
  margin: 0;
  color: #435b58;
  font-size: 14px;
  line-height: 1.7;
}

.home-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}
.home-photo-item {
  margin: 0;
  background: #fff;
  border: 1px solid #d9e7e6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(16, 99, 101, 0.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.home-photo-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 99, 101, 0.12);
}
.home-photo-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}
.home-photo-item:hover img {
  transform: scale(1.05);
}
.home-photo-item figcaption {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #435b58;
  background: #fff;
}
.home-photo-item figcaption strong {
  color: #106365;
}

.home-section-action {
  text-align: center;
  margin-top: 32px;
}

.home-news-grid {
  justify-content: center;
}
@media (min-width: 901px) {
  .home-news-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 480px));
    justify-content: center;
  }
}

.comp-journey-card {
  background: #fff;
  border: 1px solid #d9e7e6;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(16, 99, 101, 0.08);
}
.comp-journey-title {
  margin: 0 0 18px;
  font-size: 20px;
  color: #0b4547;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comp-steps {
  margin: 0 0 24px;
  padding-left: 20px;
  color: #2b4542;
  font-size: 14px;
  line-height: 1.85;
}
.comp-steps li {
  margin-bottom: 10px;
}
.comp-steps strong {
  color: #106365;
}
.comp-source-note {
  margin: -12px 0 16px;
  font-size: 13px;
  color: #5b6f6c;
  font-style: italic;
}
.comp-status-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff7e8;
  border: 1px solid #fae0b8;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: #8a4b00;
  line-height: 1.5;
  font-weight: 600;
}
.comp-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d97706;
  flex: none;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
}

@media (max-width: 900px) {
  .home-media-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .home-photo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-photo-strip .home-photo-item:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .home-photo-strip {
    grid-template-columns: 1fr;
  }
  .home-photo-strip .home-photo-item:last-child {
    grid-column: auto;
  }
  .home-video-body {
    padding: 18px 20px;
  }
  .home-video-body h3 {
    font-size: 18px;
  }
  .comp-journey-card {
    padding: 24px 20px;
  }
}