/* =========================================================
   88VBET – Responsive stylesheet
   - Desktop  : >= 1025px  (thiết kế gốc 1920, co giãn theo vw)
   - Tablet   : <= 1024px  (dùng CHUNG layout với mobile)
   - Mobile   : <= 1024px
   - Foldable : cover screen hẹp (<=380px), unfolded, dual-screen
   Mọi kích thước cố định đều được quy về clamp()/% / cqw
   để không có phần tử position nào rơi ra ngoài khung hình.
   ========================================================= */

/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

/* ---------- Design tokens (giá trị DESKTOP @1920) ---------- */
:root {
  /* khung nội dung */
  --content-max: 1520px;
  --shell-pad-x: clamp(16px, 4.17vw, 80px); /* 80px @1920 */
  --shell-pad-b: clamp(32px, 4.17vw, 80px);

  /* khoảng cách */
  --gap-xs: clamp(6px, 0.73vw, 14px); /* 14px */
  --gap-sm: clamp(8px, 0.83vw, 16px); /* 16px */
  --gap-md: clamp(12px, 1.25vw, 24px); /* 24px */
  --gap-lg: clamp(16px, 1.56vw, 30px); /* 30px */
  --gap-xl: clamp(16px, 2.08vw, 40px); /* 40px */

  /* padding card */
  --card-pad: clamp(8px, 0.83vw, 16px); /* 16px */
  --seo2-pad: clamp(14px, 1.56vw, 30px); /* 30px */

  /* typography */
  --fs-title: clamp(22px, 2.08vw, 40px); /* 40px */
  --fs-title-1: clamp(16px, 1.25vw, 24px); /* 24px */
  --fs-title-2: clamp(12px, 0.83vw, 16px); /* 16px */
  --fs-title-3: clamp(12px, 2.83vw, 21px);
  --fs-desc: clamp(14px, 1.25vw, 24px); /* 24px */
  --fs-desc-1: clamp(11px, 0.73vw, 14px); /* 14px */
  --fs-card-title: clamp(14px, 1.04vw, 20px); /* 20px */
  --fs-card-desc: clamp(11px, 0.68vw, 13px); /* 13px */
  --fs-btn: clamp(14px, 1.25vw, 24px); /* 24px */

  /* link items */
  --circle-size: clamp(96px, 8.85vw, 170px); /* 170px */
  --ring-label-fs: 8.2cqw;
  --ring-ms-fs: 12cqw;
}

/* ---------- Shell ---------- */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.desktop {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: url("./images/background.png") no-repeat center center;
  background-size: cover;
  background-color: #003D3D;
  position: relative;
  overflow-y: auto;
}

.menu-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2vh clamp(10px, 1.2vw, 24px);
  padding-bottom: clamp(80px, 9.4vw, 180px);
  min-width: 0;
}

.title-group {
  width: 100%;
  text-align: center;
  margin-top: 2vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.title-img {
  width: 35%;
  max-width: 660px;
  height: auto;
}

.title-banner-img {
  width: auto;
  height: auto;
}

.title-banner-img-mobile {
  display: none;
  width: auto;
  height: auto;
}

.title-banner-img img,
.title-banner-img-mobile img {
  width: 100%;
  object-fit: cover;
}

/* ---------- Social icons (fixed bên phải) ---------- */
.social-icons {
  position: fixed;
  right: clamp(6px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 100;
}

.social-icon {
  width: clamp(44px, 4vw, 110px);
  height: clamp(44px, 5vw, 110px);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Link Items ---------- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.neon-text {
  font-size: clamp(22px, 2.08vw, 40px);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  -webkit-text-stroke: 2px #00cfff;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 3px #00cfff) drop-shadow(0 0 7px #007fff) drop-shadow(0 0 15px #0044ff);
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px #00cfff) drop-shadow(0 0 7px #007fff) drop-shadow(0 0 15px #0044ff);
  }
  50% {
    filter: drop-shadow(0 0 3px #00efff) drop-shadow(0 0 24px #00aaff) drop-shadow(0 0 25px #0055ff) drop-shadow(0 0 35px #003aaa);
  }
}

.link-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: flex-end;
  justify-items: center;
  justify-content: center;
  gap: clamp(10px, 1.25vw, 24px);
  width: 100%;
}

.link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.5vw, 10px);
  cursor: pointer;
  min-width: 0;
  transition: transform 0.25s ease;
}

.link-item:hover {
  transform: scale(1.08);
}

.link-circle {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
}

/* Ring 1 — outer, full solid */
.link-ring-1 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  object-fit: cover;
  opacity: 1;
  width: 100%;
  height: 100%;
}

/* Ring 2 — middle, răng cưa (inset & độ dày theo %, co giãn cùng vòng tròn) */
.link-ring-2 {
  position: absolute;
  inset: 4.7%;
  border-radius: 50%;
  background: linear-gradient(180deg, #3AFFB0, #D5D5D5);
  -webkit-mask: repeating-conic-gradient(#000 0deg 4deg, transparent 4deg 6deg),
  radial-gradient(farthest-side, transparent 93.5%, #000 93.5%);
  mask: repeating-conic-gradient(#000 0deg 4deg, transparent 4deg 6deg),
  radial-gradient(farthest-side, transparent 93.5%, #000 93.5%);
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
  opacity: 0.9;
}

/* Ring 3 — inner, 70% arc, spinning */
.link-ring-3 {
  position: absolute;
  inset: 12.9%;
  border-radius: 50%;
  background: conic-gradient(var(--color) 252deg, transparent 252deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 92%, #000 92%);
  mask: radial-gradient(farthest-side, transparent 92%, #000 92%);
  animation: spin 2s linear infinite;
}

/* Center content */
.link-content {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.6;
  white-space: nowrap;
}

.link-content-1 {
  position: absolute;
  bottom: -1%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.link-content-1-ms {
  color: #fff;
  font-weight: 700;
  font-size: var(--ring-label-fs);
}

.link-ms {
  color: #016666;
  font-weight: 700;
  font-size: var(--ring-ms-fs);
}

.link-label img {
  width: 100%;
}

.link-label {
  position: relative;
  color: #3447F5;
  font-weight: 700;
  font-size: clamp(11px, 0.85vw, 16px);
}

.link-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

/* ---------- Link Section ---------- */
.link-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.link-section img {
  width: 100%;
  height: 100%;
  max-width: 55rem;
  max-height: 22rem;
  object-fit: contain;
}

/* ---------- Section desktop ---------- */
.section-desktop {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 1.05vw, 20px);
  width: 100%;
  min-width: 0;
}

.box-text {
  text-align: center;
}

.section-left-banner img {
  width: 100%;
  object-fit: cover;
}

.section-left-banner .speed-test {
  width: auto;
  object-fit: cover;
}

.section-left {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.05vw, 20px);
}

.section-right {
  width: 100%;
  max-width: 44rem;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 1;
}

.banner-right {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.banner-right-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: auto;
  object-fit: contain;
}

/* ---------- Download banner (desktop) ----------
   Dùng container query: mọi lớp overlay tính theo % chiều rộng
   của chính banner => không bao giờ lệch/rơi ra ngoài. */
.download-h5 {
  display: none !important;
}

/* Ảnh nền banner 1017x345:
   - khung viền vàng: x 40→980, y 35→305
   - ô cờ đuôi nheo bên trái (đặt QR): tâm x ≈ 16%
   - vùng bên phải (chữ + 2 nút):      tâm x ≈ 63.5%
   Tất cả overlay canh theo tâm các vùng đó => luôn khớp ở mọi kích thước. */
.download-app-new,
.download-app-new-h5 {
  position: relative;
  /* width bắt buộc: phần tử dùng container-type sẽ co về 0 nếu để shrink-to-fit */
  width: 100%;
  align-self: stretch;
  container-type: inline-size;
}

.download-app-new .qr-code,
.download-app-new-h5 .qr-code {
  position: absolute;
  top: 50%;
  left: 16%;
  transform: translate(-50%, -50%);
  width: 18%;
  max-width: none;
  height: auto;
}

.download-app-new .text-download,
.download-app-new-h5 .text-download {
  position: absolute;
  top: 33%;
  left: 63.5%;
  right: auto;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 900;
  font-size: clamp(10px, 5.4cqw, 35px);
  line-height: 1;
  white-space: nowrap;
}

.download-app-new .box-download,
.download-app-new-h5 .box-download {
  position: absolute;
  top: 64%;
  left: 63.5%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
}

.download-app-btn {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}

.download-app-btn img {
  width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
}

.speed-test {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.icon-ios {
  display: flex;
  align-items: center;
}

.icon-ios img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Download banner (H5) ---------- */
.download-app-new-h5 {
  display: none;
}

.download-app-new-h5 .download-app-btn img {
  width: 100%;
  height: auto;
  /* ảnh gốc 296x100: không cho render vượt kích thước thật (tránh mờ),
     giữ đúng tỉ lệ để không bị nội suy méo nét */
  max-width: 296px;
  aspect-ratio: 296 / 100;
  object-fit: contain;
  image-rendering: auto;
}

/* ---------- Social Buttons (H5) ---------- */
.social {
  display: none;
  flex-direction: column;
  gap: clamp(6px, 2vw, 14px);
  margin-top: clamp(10px, 3vw, 20px);
  align-items: center;
  width: 100%;
  /* mobile nhỏ lại (86vw), tablet vẫn chạm trần 560px như cũ */
  max-width: clamp(280px, 86vw, 560px);
  margin-left: auto;
  margin-right: auto;
}

.social-row {
  display: flex;
  flex-direction: row;
  gap: clamp(6px, 2vw, 14px);
  justify-content: space-between;
  width: 100%;
}

.social-btn-link {
  display: inline-block;
  text-align: -webkit-center;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-btn-link img {
  width: 65%;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.social-btn-link:hover {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* ---------- Typography ---------- */
.gradient {
  background: linear-gradient(90deg, #FFCB8D, #FD8902);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.title {
  font-size: var(--fs-title);
  font-weight: bold;
}

.title-1 {
  font-size: var(--fs-title-1);
  font-weight: bolder;
}

.title-2 {
  font-size: var(--fs-title-2);
}

.title-3 {
  font-size: var(--fs-title-3);
}

.text-description {
  font-size: var(--fs-desc);
}

.text-description-1 {
  font-size: var(--fs-desc-1);
}

.text-white {
  color: white;
}

.text-black {
  color: #2A2525;
}

.text-orange {
  background: linear-gradient(90deg, #FFCB8D 0%, #FD8902 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.text-green {
  color: #003D3D;
}

.text-center {
  text-align: center;
}

/* ---------- SEO shell ---------- */
.seo {
  width: 100%;
  overflow-x: hidden;
}

.seo-container {
  background-color: #184242;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  padding: 10px var(--shell-pad-x) var(--shell-pad-b);
}

.seo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Buttons ---------- */
.btn {
  height: clamp(40px, 4.27vw, 82px);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--fs-btn);
  font-weight: bold;
  padding: clamp(6px, 0.63vw, 12px) clamp(12px, 1.25vw, 24px);
}

.btn img {
  width: auto;
  height: auto;
}

.gradient-btn {
  background: linear-gradient(90deg, #FFCB8D 0%, #FD8902 100%);
  color: #272727;
  border: 2px solid #FFC079;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gradient-btn:hover {
  background: linear-gradient(90deg, #FFD7A7 0%, #FFA22C 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(253, 137, 2, 0.35);
}

.transparent-btn {
  background: transparent;
  border: 2px solid #FFC079;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.transparent-btn:hover {
  background: transparent;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(253, 137, 2, 0.35);
}

/* ---------- Flex utilities ---------- */
.flex-row-center {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

.flex-row-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  width: 100%;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-md);
  width: 100%;
  min-width: 0;
}

.items-center {
  align-items: center;
}

/* ---------- SEO SECTION 1 ---------- */
.seo-1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xl);
  width: 100%;
  max-width: var(--content-max);
  /* canh lề trái/phải bằng với phần nội dung bên trong .seo-2
     (padding 30px + border 2px) */
  padding-inline: calc(var(--seo2-pad) + 2px);
  margin-bottom: -27px;
}

.seo-1-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  flex: 1;
  width: 100%;
  min-width: 0;
}

.seo-1-1-img {
  width: 100%;
  height: 100%;
  flex: 1;
  min-width: 0;
}

.seo-1-1-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.seo-1-desktop {
  display: block;
}

.seo-1-mobile {
  display: none;
}

.hr-border-img {
  max-width: 765px;
}

/* ---------- Cards ---------- */
.card-custom {
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: 22px;
  border: 2px solid #D4AF37;
  background: #EEEEEE;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-custom:hover {
  transform: scale(1.02);
}

.card-padding {
  padding: var(--card-pad);
}

.card-flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
}

.card-flex-row-center {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

/* ---------- SEO SECTION 2 ---------- */
.seo-2 {
  width: 100%;
  max-width: var(--content-max);
  padding: var(--seo2-pad);
  border: 2px solid #D4AF37;
  border-radius: 22px;
  background: linear-gradient(90deg, #003D3D 0%, #017474 100%);
}

.seo-2-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 0;
}

.seo-container .seo-2-img {
  width: 20%;
  height: auto;
  max-width: 100px;
}

.seo-2-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  min-width: 0;
}

.seo-2-card-title {
  font-size: var(--fs-card-title);
  font-weight: bold;
}

.seo-2-card-description {
  font-size: var(--fs-card-desc);
  color: #2A2525;
}

/* ---------- SEO SECTION 3 ---------- */
.seo-3-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  min-width: 0;
}

.seo-3-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 0;
}

/* ---------- SEO SECTION 4 ---------- */
.seo-container .seo-4-img {
  width: 30%;
  height: auto;
  max-width: 151px;
}

.seo-4-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  text-align: center;
  min-width: 0;
}

.seo-4-card .card-custom {
  background: linear-gradient(90deg, #003D3D 0%, #017474 100%);
}

.seo-4-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  min-width: 0;
}

.seo-4-card-title {
  font-size: var(--fs-card-title);
  font-weight: bold;
}

.seo-4-card-description {
  font-size: var(--fs-card-desc);
  color: white;
}

.card-seo-4 {
  background: #1B75EF;
  border: 2px solid #58C4FF;
  height: 100%;
}

.card-seo-4 .seo-2-card-title {
  color: #FFF600;
}

.seo-4-card .seo-2-card-description {
  color: white;
}

/* ---------- SEO SECTION 5 ---------- */
.seo-5 {
  max-width: var(--content-max);
}
.seo-5-img {
  width: 20%;
  /* ảnh gốc chỉ 135px => không phóng to quá cỡ cho khỏi vỡ nét */
  max-width: 90px;
  min-width: 0;
  flex-shrink: 0;
}

.btn-img {
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 100%;
}

.btn-img:hover {
  transform: scale(1.03);
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.05vw, 20px);
  background: #007474;
  padding: clamp(20px, 2.08vw, 40px) 0;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 0.63vw, 12px);
  width: 100%;
  max-width: 1200px;
  padding: 0 clamp(10px, 1.05vw, 20px);
  box-sizing: border-box;
}

.footer-content img {
  width: clamp(48px, calc(10% - 11px), 110px);
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
  transform-origin: center;
}

.footer-content img:hover {
  transform: scale(1.08);
}

.footer-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.05vw, 20px);
  padding: 10px;
  margin-top: clamp(10px, 1.05vw, 20px);
  width: 100%;
}

.footer-end img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
  transform-origin: center;
  margin: 0 5px;
}

.footer-end img:hover {
  transform: scale(1.08);
}

.footer-end-content {
  display: flex;
  justify-content: center;
  margin: 0 3px;
}

.footer-end p {
  font-size: clamp(11px, 1vw, 16px) !important;
  white-space: nowrap;
}

.footer-desktop {
  display: block;
}

.footer-mobile {
  display: none;
}

.mw-1200 {
  width: 100%;
  max-width: 1200px;
}

.banner-speed-test {
  display: none;
}

/* ảnh tiêu đề "LINK TỐC ĐỘ CAO" thu còn 80% và canh giữa, áp dụng mọi thiết bị.
   :not(...) để không đụng tới ảnh nền của 2 banner tải app
   (chúng cũng dùng chung class .speed-test) */
.box-text:not(.download-app-new):not(.download-app-new-h5) > .speed-test {
  width: 80%;
}

/* =========================================================
   TABLET + MOBILE  (<= 1024px) – dùng chung một layout
   Toàn bộ token được ghi đè => mọi thành phần tự co giãn
   liên tục từ 280px (màn hình gập đóng) đến 1024px.
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    --shell-pad-x: clamp(12px, 4.3vw, 32px); /* 16px @375 */
    --shell-pad-b: clamp(16px, 4.3vw, 32px);

    --gap-xs: clamp(6px, 2.1vw, 14px);
    --gap-sm: clamp(8px, 3.2vw, 18px);
    --gap-md: clamp(10px, 4.3vw, 24px);
    --gap-lg: clamp(10px, 4.3vw, 24px);
    --gap-xl: clamp(10px, 4.3vw, 24px);

    --card-pad: clamp(8px, 2.7vw, 18px);
    --seo2-pad: clamp(10px, 3.2vw, 22px);

    --fs-title: clamp(15px, 4.3vw, 30px);
    --fs-title-1: clamp(14px, 4.5vw, 26px);
    --fs-title-2: clamp(11px, 3.2vw, 20px);
    --fs-desc: clamp(11px, 3.2vw, 20px);
    --fs-desc-1: clamp(11px, 3.2vw, 18px);
    --fs-card-title: clamp(16px, 6.6vw, 30px);
    --fs-card-desc: clamp(12px, 4.3vw, 22px);
    --fs-btn: clamp(11px, 3.2vw, 18px);

    --circle-size: clamp(90px, 36vw, 200px);
    --ring-label-fs: 9cqw;
    --ring-ms-fs: 11cqw;
  }

  .desktop {
    background: url('./images/background-h5.png') no-repeat top center;
    background-size: cover;
    background-color: #161920;
  }

  .menu-container {
    padding-bottom: clamp(16px, 6vw, 40px);
  }

  .title-img {
    width: 60%;
    max-width: 420px;
  }

  /* --- Link items: 2 cột trên cả tablet & mobile --- */
  .link-items {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: clamp(6px, 2.4vw, 20px);
  }

  .link-section img {
    width: 100%;
    height: 100%;
  }

  .link-label {
    font-size: clamp(10px, 3.2vw, 18px);
  }

  /* --- Banner / download --- */
  .banner-speed-test {
    display: block;
  }

  .banner-speed-test img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .download-pc {
    display: none;
  }

  .download-h5 {
    display: block !important;
  }

  .download-app-new {
    display: none;
  }

  .download-app-new-h5 {
    display: block;
    /* banner kéo dài ra: thoát khỏi khối 720px + padding của menu-container,
       chạy hết bề ngang máy (tablet giới hạn 900px cho khỏi quá khổ).
       align-self: center => phần dôi ra chia đều 2 bên, không lệch. */
    width: min(100vw, 900px);
    max-width: none;
    align-self: center;
  }

  /* banner nhỏ hơn desktop nhiều => nới cỡ chữ cho dễ đọc,
     vẫn giữ nguyên tâm canh 16% / 63.5% nên không bị lệch */
  .download-app-new-h5 .text-download {
    font-size: clamp(11px, 6.8cqw, 50px);
  }

  /* 2 nút store: ảnh gốc chỉ 296x100, trên tablet màn Retina bị kéo vượt
     độ phân giải thật => mờ. Chặn cụm nút lại để mỗi nút ~184px cho nét.
     Mobile cụm nút vốn đã < 380px nên không đổi. */
  .download-app-new-h5 .box-download {
    max-width: 500px;
  }

  .section-desktop {
    flex-direction: column;
    align-items: center;
    margin-top: clamp(8px, 4vw, 24px);
    gap: clamp(8px, 2.7vw, 20px);
    /* trên tablet: giữ khối nội dung gọn ở giữa thay vì kéo dãn hết bề ngang */
    max-width: 720px;
    margin-inline: auto;
  }

  .link-items {
    max-width: 620px;
    margin-inline: auto;
  }

  /* SEO: giới hạn bề ngang để dòng chữ không quá dài trên tablet */
  .seo-container > * {
    width: 100%;
    max-width: 900px;
  }

  .section-right {
    max-width: 100%;
  }

  .banner-right {
    width: 100%;
  }

  /* --- Social --- */
  .social {
    display: flex;
  }

  .social-icons {
    display: none;
  }

  /* Canh 2 mép khối social trùng với khung banner .download-app-new-h5.
     Banner rộng min(100vw, 900px) nhưng ảnh có sẵn ~4% lề trong suốt
     mỗi bên => khung vàng nhìn thấy chỉ chiếm ~92% => dùng 92vw / 832px. */
  .social {
    width: min(92vw, 832px);
    max-width: none;
    align-self: center;
    margin-inline: 0;
  }

  .social-row {
    width: 100%;
    justify-content: space-between;
  }

  /* nút cỡ cố định + space-between => nút đầu/cuối nằm sát 2 mép,
     phần dư dồn hết vào khoảng cách giữa các nút */
  .social-btn-link {
    flex: 0 0 auto;
    width: clamp(80px, 21vw, 150px);
  }

  .social-btn-link img {
    width: 100%;
    max-width: none;
  }

  /* --- SEO --- */
  .mw-1200 {
    max-width: 100%;
  }

  .seo-container {
    gap: var(--gap-md);
    padding: var(--shell-pad-x) var(--shell-pad-x) var(--shell-pad-b);
  }

  .title,
  .title-1,
  .text-description {
    text-align: center;
  }

  .hr-border-img {
    max-width: 242px;
  }

  .btn {
    height: clamp(28px, 8.5vw, 44px);
    gap: 4px;
    padding: clamp(6px, 2.1vw, 12px) clamp(10px, 4.3vw, 20px);
    width: 100%;
  }

  .btn svg {
    height: clamp(14px, 4.3vw, 22px);
  }

  .card-flex-column-center {
    text-align: center;
  }

  .seo-1 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: 0;
    margin-bottom: 0;
  }

  .seo-1-desktop {
    display: none;
  }

  .seo-1-mobile {
    display: flex;
    text-align: center;
    justify-content: center;
  }

  .seo-1-1-img img {
    width: 60%;
    height: auto;
    max-width: 420px;
    object-fit: contain;
  }

  .seo-1-column {
    align-items: center;
  }

  .seo-2-card,
  .seo-3-card,
  .seo-4-card {
    flex-direction: column;
    gap: clamp(10px, 3.2vw, 18px);
  }

  .seo-2-card.mw-1200 {
    align-items: center;
  }

  .seo-container .seo-2-img {
    width: min(100px, 26vw);
    max-width: 100px;
  }

  .seo-container .seo-4-img {
    width: min(130px, 34vw);
    max-width: 130px;
  }

  .seo-5 .title-1 {
    font-size: clamp(11px, 3.2vw, 18px);
  }

  /* mobile + tablet: bỏ 2 ảnh trang trí hai bên phần "Lời kết" */
  .seo-5-img {
    display: none;
  }

  .footer-end p {
    font-size: clamp(10px, 3vw, 16px) !important;
  }
}

/* =========================================================
   MÀN HÌNH RẤT HẸP  (<= 380px)
   Galaxy Z Fold / Flip khi gập (cover screen 280–360px)
   ========================================================= */
@media (max-width: 380px) {
  :root {
    --shell-pad-x: 12px;
    --shell-pad-b: 16px;
    --circle-size: min(38vw, 140px);
  }

  .title-img {
    width: 70%;
  }

  .footer-content img {
    width: clamp(42px, calc(20% - 10px), 70px);
  }
}

/* =========================================================
   LANDSCAPE THẤP (điện thoại xoay ngang, Flip mở ngang)
   ========================================================= */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
  :root {
    --circle-size: clamp(60px, 10vw, 110px);
  }

  .title-img {
    width: 32%;
    max-width: 320px;
  }

  /* xoay ngang: xếp 2 cột trái/phải cho đỡ phải cuộn nhiều */
  .section-desktop {
    flex-direction: row;
    align-items: flex-end;
    max-width: none;
  }

  .section-right {
    max-width: 48%;
  }

  .link-items {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  .menu-container {
    padding-bottom: clamp(12px, 3vh, 32px);
  }
}

/* =========================================================
   MÀN HÌNH GẬP / 2 MÀN (Surface Duo, Fold khi trải ngang)
   Tránh nội dung nằm ngay bản lề.
   ========================================================= */
@media (horizontal-viewport-segments: 2) {
  /* Giữ nội dung nằm gọn trong màn hình bên trái, không bị bản lề cắt ngang */
  .menu-container,
  .footer-content,
  .seo-container > * {
    max-width: env(viewport-segment-width 0 0, 100%);
    margin-inline: 0 auto;
  }

  .seo-container {
    align-items: flex-start;
  }

  .link-items {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-desktop {
    flex-direction: column;
  }
}

@media (spanning: single-fold-vertical) {
  .link-items {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-desktop {
    flex-direction: column;
  }
}

@media (vertical-viewport-segments: 2) {
  .section-desktop {
    flex-direction: column;
  }
}