/* Changes made after the WordPress migration. */

/* Main menu (7 items): smaller text on small desktops so it stays on one line */
@media (min-width: 1100px) and (max-width: 1269px) {
  #header .header-nav-main.nav-left > li {
    margin-right: 4px;
  }
  #header .header-nav-main.nav-left > li > a {
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Below 1100px the menu no longer fits: use the mobile header (☰ menu) like Flatsome does under 850px */
@media (min-width: 850px) and (max-width: 1099px) {
  #header .hide-for-medium {
    display: none !important;
  }
  #header .show-for-medium {
    display: flex !important;
  }
  /* same layout as Flatsome's medium header: ☰ left, logo centered */
  .medium-logo-center .flex-left {
    flex: 1 1 0;
    order: 1;
  }
  .medium-logo-center .logo {
    margin: 0 15px;
    order: 2;
    text-align: center;
  }
  .medium-logo-center .logo img {
    margin: 0 auto;
  }
  .medium-logo-center .flex-right {
    flex: 1 1 0;
    order: 3;
  }
}

/* Text headings that replace the old title images (gold outline line + solid line) */
.sg-heading {
  margin: 0 0 20px;
  padding-top: 26px;
  position: relative;
  text-transform: uppercase;
  line-height: 1;
  color: #ffcc88;
}
.sg-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 2px;
  background: #ffcc88;
}
.sg-heading span {
  display: block;
}
.sg-heading__outline {
  font-weight: 500;
  font-size: clamp(40px, 6.5vw, 84px);
  color: transparent;
  -webkit-text-stroke: 1.5px #ffcc88;
  margin-bottom: 0;
}
.sg-heading__solid,
.dark .sg-heading__solid {
  color: #ffcc88;
  font-weight: 700;
  font-size: clamp(34px, 7vw, 100px);
  white-space: nowrap;
}

/* Home service circles: gold ring image with real text on top */
.sg-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 363px;
  aspect-ratio: 363 / 375;
  margin: 0 auto 20px;
  /* text area = the thin inner circle of ring.png (measured: x 50–317, y 54–318 of 363×375), plus a small inset */
  padding: 14.9% 16.7% 15.7% 17.8%;
  background: url('/legacy/ring.png') center / contain no-repeat;
  container-type: inline-size;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.sg-ring span {
  font-weight: 700;
  font-size: 11cqw;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: #ffcc88;
}
.sg-ring:hover {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 0 22px rgba(255, 204, 136, 0.45));
}

/* Image badges whose text was baked in (e.g. "Tầm nhìn"): blank background + real text */
.sg-pill {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 450px;
  vertical-align: top;
  container-type: inline-size;
}
.sg-pill img {
  display: block;
  width: 100%;
  height: auto;
}
.sg-pill__text {
  position: absolute;
  top: 14%;
  bottom: 20%;
  left: 25%;
  right: 4%;
  display: flex;
  align-items: center;
  font-size: 3.4cqw;
  font-weight: 600;
  line-height: 1.35;
  color: #ffcc88;
}

/* Footer menu: one link per line, headings on a single line */
#footer .border-giua span {
  font-size: 90% !important;
  white-space: nowrap;
}
#footer .border-giua + a,
#footer .border-giua ~ a {
  display: block;
  margin-bottom: 4px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
#footer .border-giua ~ a:hover {
  color: #ffcc88;
}
/* second row (Truyền thông, Liên hệ) centred under the three columns above */
#row-1657085340 {
  justify-content: center;
}

/* Lĩnh vực page: lead text + grouped service list */
.sg-lead {
  max-width: 720px;
  margin-bottom: 30px;
  font-size: 1.1em;
  color: #ffcc88;
}
.sg-group-title {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 204, 136, 0.5);
  font-size: 1.25em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffcc88;
}
/* the theme fixes every item at 60px tall, so long items spilled into the next one */
.listcv ul li {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 60px;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Home video frame — phones only (desktop keeps the original 750×430 player in the fixed frame).
   The box keeps the frame image's 800×532 ratio, the player covers its screen (25,38 → 750×430)
   and the caption sits on the frame's bottom tab. */
@media (max-width: 849px) {
  .videos-slider.services {
    position: relative;
    height: auto;
    aspect-ratio: 800 / 532;
    background-size: 100% 100%;
    padding: 4.75% 3.125% 0;
  }
  .videos-slider.services .videos-show iframe,
  .videos-slider.services .sg-lazy-embed {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 750 / 430;
  }
  .videos-slider.services .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5%;
  }
  .videos-slider.services .videos-title {
    font-size: 4.2vw;
  }
}

/* Video frames: same gold frame, but the fake player drawn inside the theme image
   (grey screen, play button, white control bar) is replaced by plain black, so nothing
   odd shows before the real player has loaded */
.videos-slider {
  background-image: url('/legacy/video-khung-clean.png');
}
.videos-slider .videos-show iframe {
  background: #000;
}

/* Footer hotline badge: blank badge image + real phone number */
.sg-hotline {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 301px;
  container-type: inline-size;
}
.sg-hotline img {
  display: block;
  width: 100%;
  height: auto;
}
.sg-hotline__number {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28%;
  right: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.2cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffe2a8 0%, #d9a55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Lazy video embed: keeps the player's exact box (750×430 on desktop) while it waits to load */
.sg-lazy-embed {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
  background: #000;
}
.sg-lazy-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
}