.dragScroll {
	overflow-x: scroll !important;
	width: 100%;
	scrollbar-width: thin !important;
}

#cell_6,
#cell_7,
#cell_8 {
	min-height: 122px !important;
}
#Navigation_Links_1 {
	margin-left: 60px !important;
}

.desktop-header {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}

.mobile_header {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	background: #00539f;
	display: flex;
	justify-content: center; /* logo giữa */
	align-items: center;
	color: white;
	z-index: 1000;
}

.menu-icon {
	position: absolute;
	right: 20px;
	width: 30px;
	height: 24px;
	cursor: pointer;
}

/* 3 gạch hamburger */
.bar {
	display: block;
	width: 80%;
	height: 2px;
	background: white;
	margin: 5px 0;
}

/* 2 thanh dấu X */
.close-line {
	position: absolute;
	top: 10px;
	left: 0;
	width: 100%;
	height: 3px;
	background: white;
	display: none;
}

.close-line:nth-child(4) {
	transform: rotate(45deg);
}

.close-line:nth-child(5) {
	transform: rotate(-45deg);
}

/* Khi active → ẩn 3 gạch, hiện X */
.menu-icon.active .bar {
	display: none;
}

.menu-icon.active .close-line {
	display: block;
}

/* ========================= */
/* FULL SCREEN MENU */
/* ========================= */
.full-menu {
	position: fixed;
	top: 45px; /* dÆ°á»›i header */
	left: 0;
	width: 100%;
	height: calc(100vh - 45px);
	background: white; /* nền mặc định trắng */
	display: none;
	padding: 20px;
	box-sizing: border-box;
}

.full-menu.active {
	display: block;
}

.full-menu a {
	display: block;
	padding: 15px 0;
	text-decoration: none;
	color: #333;
	font-size: 20px;
	border-bottom: 1px solid #eee;
}

#banner_desktop_1_0 {
	margin-top: 72px !important;
}

#__0 {
	display: contents !important;
}
#__157,
#__371 {
	display: none !important;
}

@media (min-width: 992px) {
	#__0 {
		display: none !important;
	}
	#__157 {
		display: contents !important;
	}
}

@media (min-width: 1440px) {
	#__157 {
		display: none !important;
	}
	#__371 {
		display: contents !important;
	}

	/* Ẩn trên thiết bị khác */
	.mobile-sticky-bottom {
		display: none !important;
	}
}

@media (min-width: 1024px) {
    .mobile-sticky-bottom {
        display: none !important;
    }
}

@media (max-width: 1416px) {
	#Navigation_Links_1 {
		margin-left: 0 !important;
	}
}


#l_tr_nh {
  overflow: hidden;
}

#Frame_1707486885 {
  flex-shrink: 1 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#Frame_1707486916 {
  min-width: 0 !important;
}

#Frame_1707486882 {
  min-width: 0 !important;
}

@media (max-width: 360px) {
	#Frame_427322472 {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

.mobile-sticky-bottom {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9998;
  background: #00539f;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  box-sizing: border-box;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

.sticky-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.sticky-btn--outline {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.sticky-btn--solid {
  background: #e8192c;
  border: none;
  color: #ffffff;
}

@media (max-width: 1023px) {
  body {
    padding-bottom: 60px;
  }
}

/* =============================================
   FIX: Form đăng ký tư vấn - TVF classes
   ============================================= */

/* Wrapper */
.tvf-wrap {
  width: 100%;
}

/* 2-column grid */
.tvf-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  width: 100%;
}

/* Each column */
.tvf-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}

/* Section headings */
.tvf-heading {
  font-family: 'SVN-Apercu Pro', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  color: #1a1c1e;
  margin: 0 0 16px 0;
  padding: 0;
}

/* Labels */
.tvf-label {
  display: block;
  font-family: 'SVN-Apercu Pro', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #00539f;
  margin: 12px 0 8px 0;
}

/* First label after heading - no top margin */
.tvf-heading + .tvf-label {
  margin-top: 0;
}

/* Inputs, Selects */
.tvf-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 11px 15px;
  border: 1px solid #e2e2e5;
  border-radius: 4px;
  font-family: 'SVN-Apercu Pro', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1a1c1e;
  background-color: #fff;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.tvf-input::placeholder {
  color: #76777a;
}

select.tvf-input {
  -webkit-appearance: auto;
  appearance: auto;
  cursor: pointer;
}

.tvf-input:focus {
  border-color: #00539f;
}

/* Full-width row (textarea) */
.tvf-full {
  margin-top: 16px;
  width: 100%;
}

.tvf-full .tvf-label {
  margin-top: 0;
}

.tvf-full textarea.tvf-input {
  height: auto;
  min-height: 99px;
  resize: vertical;
}

/* Submit button wrapper */
.tvf-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  width: 100%;
}

/* Submit button */
.tvf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  background-color: #d8173b;
  color: #fff;
  font-family: 'SVN-Apercu Pro', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
}

.tvf-btn:hover {
  background-color: #b8142f;
}

/* Mobile: stack form to 1 column */
@media (max-width: 600px) {
  .tvf-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* =============================================
   FIX: mobile-sticky-bottom bị body grid chặn
   Body có display:grid (inline style từ figma.to.website)
   nên sticky bar trở thành grid item. Cần force fixed.
   ============================================= */
#_ > .mobile-sticky-bottom,
body > .mobile-sticky-bottom {
  position: fixed !important;
  display: flex !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9998 !important;
}

/* Đảm bảo ẩn trên desktop */
@media (min-width: 1024px) {
  #_ > .mobile-sticky-bottom,
  body > .mobile-sticky-bottom {
    display: none !important;
  }
}

/* =============================================
   FIX BẢNG HỌC PHÍ
   Dùng display:contents để flatten HTML
   rồi đặt tất cả vào 1 grid 3 cột duy nhất
   ============================================= */

/* Tắt scroll ngang */
#Frame_427322424_1 .dragScroll {
  overflow: visible !important;
}

/* Grid container chính - 3 cột, 4 hàng */
#Frame_427322462_1 {
  display: grid !important;
  grid-template-columns: 2fr 2fr 2fr !important;
  grid-template-rows: auto auto auto auto !important;
  min-width: 0 !important;
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #f0f0f4 !important;
  flex-flow: unset !important;
  flex-shrink: unset !important;
}

/* Flatten các wrapper trung gian */
#Frame_427322461_0,
#Frame_427322462_2 {
  display: contents !important;
}

/* ---- HÀNG 1: Học phí công bố ---- */
/* cell_3: cột 1+2, hàng 1 */
#cell_3 {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  background-color: #00539f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.2) !important;
}

/* cell_4: cột 3, hàng 1 */
#cell_4 {
  grid-column: 3 / 4 !important;
  grid-row: 1 !important;
  background-color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 14px 12px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
}

/* ---- HÀNG 2-4: body bảng ---- */

/* cell_5: "Chính sách ưu đãi..." cột 1, span hàng 2→4 */
#cell_5 {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 5 !important;
  background-color: #53D5FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 10px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  border-right: 1px solid rgba(255,255,255,0.2) !important;
}

/* Flatten Frame_427322478 và Frame_427322479 */
#Frame_427322478,
#Frame_427322479 {
  display: contents !important;
  flex-flow: unset !important;
}

/* cell_6: kỳ hạn 1 - cột 2, hàng 2 */
#cell_6 {
  grid-column: 2 / 3 !important;
  grid-row: 2 !important;
  background-color: #53D5FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 8px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 80px !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  border-right: 1px solid rgba(255,255,255,0.2) !important;
  flex-grow: unset !important;
  flex-basis: unset !important;
}

/* cell_7: kỳ hạn 2 - cột 2, hàng 3 */
#cell_7 {
  grid-column: 2 / 3 !important;
  grid-row: 3 !important;
  background-color: #53D5FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 8px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 80px !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  border-right: 1px solid rgba(255,255,255,0.2) !important;
  flex-grow: unset !important;
  flex-basis: unset !important;
}

/* cell_8: kỳ hạn 3 - cột 2, hàng 4 */
#cell_8 {
  grid-column: 2 / 3 !important;
  grid-row: 4 !important;
  background-color: #53D5FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 8px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 80px !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  border-right: 1px solid rgba(255,255,255,0.2) !important;
  flex-grow: unset !important;
  flex-basis: unset !important;
  color: #003B71 !important;
}

/* cell_9: số tiền 1 - cột 3, hàng 2 */
#cell_9 {
  grid-column: 3 / 4 !important;
  grid-row: 2 !important;
  background-color: #B1ECFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-top: 1px solid #f0f0f4 !important;
  flex-grow: unset !important;
  flex-basis: unset !important;
}

/* cell_10: số tiền 2 - cột 3, hàng 3 */
#cell_10 {
  grid-column: 3 / 4 !important;
  grid-row: 3 !important;
  background-color: #CDF3FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-top: 1px solid #f0f0f4 !important;
  flex-grow: unset !important;
  flex-basis: unset !important;
}

/* cell_11: số tiền 3 - cột 3, hàng 4 */
#cell_11 {
  grid-column: 3 / 4 !important;
  grid-row: 4 !important;
  background-color: #D9F6FF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-top: 1px solid #f0f0f4 !important;
  flex-grow: unset !important;
  flex-basis: unset !important;
}

/* Text trong cell */
#cell_3 #Frame_603_3,
#cell_5 #Frame_603_5 {
  width: auto !important;
  /* flex-grow: unset !important; */
}

/* =============================================
   FIX: Stretch các cell full chiều cao
   ============================================= */

/* Grid container: các cell tự stretch theo chiều cao */
#Frame_427322462_1 {
  align-items: stretch !important;
}

/* cell_5 "Chính sách ưu đãi..." - full chiều cao */
#cell_5 {
  align-self: stretch !important;
  height: auto !important;
}

/* Các cell số tiền - full chiều cao row */
#cell_9,
#cell_10,
#cell_11 {
  align-self: stretch !important;
  height: auto !important;
}

/* Các cell kỳ hạn - full chiều cao row */
#cell_6,
#cell_7,
#cell_8 {
  align-self: stretch !important;
  height: auto !important;
}

/* =============================================
   FIX: Cell width/height 100% để fill đầy ô
   ============================================= */

/* cell_5 "Chính sách..." - full width + height */
#cell_5 {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Các cell giá tiền - full width + height */
#cell_9,
#cell_10,
#cell_11 {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Các cell kỳ hạn - full width */
#cell_6,
#cell_7,
#cell_8 {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* cell_4 "521,514,000" - full height hàng 1 */
#cell_4 {
  width: 100% !important;
  /* min-width: 0 !important; */
  box-sizing: border-box !important;
}

/* cell_3 "Học phí công bố" - full */
#cell_3 {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Override width/height auto từ inline CSS gốc */
#cell_3 *,
#cell_4 *,
#cell_5 *,
#cell_6 *,
#cell_7 *,
#cell_8 *,
#cell_9 *,
#cell_10 *,
#cell_11 * {
  max-width: 100% !important;
}

/* Override margin -.5px từ CSS gốc trên tất cả các cell */
#cell_3,
#cell_4,
#cell_5,
#cell_6,
#cell_7,
#cell_8,
#cell_9,
#cell_10,
#cell_11 {
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Padding cho #Form_Fields ở tất cả màn hình mobile */
@media (max-width: 1023px) {
    #Frame_427322472 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =============================================
   FIX: input[type="date"] tràn ra ngoài trên Safari iOS
   Root cause: Grid cell thiếu min-width: 0, khiến cell
   tự giãn theo intrinsic width của native date picker
   ============================================= */

/* Fix grid cell cha - quan trọng nhất */
#tvForm2025 .tvf-grid > div {
    min-width: 0;         /* Ghi đè min-width: auto mặc định của grid item */
    overflow: hidden;     /* Chặn nội dung con tràn ra ngoài cell */
}

/* Bổ sung cho bản thân input date - đảm bảo fill đầy cell */
#tvForm2025 input[type="date"].tvf-input,
#tvForm2025 #birthday {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ===== Fix logo slider biến mất khi scroll trên iOS Safari ===== */
/*
 * iOS Safari pause/kill CSS animations khi element ra khỏi viewport.
 * Fix: dùng will-change + translateZ(0) để force GPU layer,
 * và đảm bảo animation không bị interrupt khi scroll.
 */
.logo-slider {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
 
.logo-track {
    -webkit-animation: scroll 60s linear infinite !important;
    animation: scroll 60s linear infinite !important;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Ngăn iOS pause animation khi scroll */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
 
/* Đảm bảo keyframe có webkit prefix */
@-webkit-keyframes scroll {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
 
@keyframes scroll {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* Thiết lập mặc định (dành cho Máy tính) */
.mobile-only-img {
    display: none; /* Ẩn hoàn toàn bức ảnh tĩnh trên Máy tính */
    width: 100%; height: auto; object-fit: contain; margin-top: 16px;
}
/* Thiết lập khi màn hình nhỏ hơn 768px (Điện thoại/Tablet nhỏ) */
@media screen and (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
    .mobile-only-img {
        display: block !important;
    }
}