/* ==========================================================================
   Vietnamese localisation overrides for the Amping template.
   Loaded after responsive.css, so these win on equal specificity.
   Nothing in the vendor files is edited.

   Layout v2 note: public/amping/css/layout-v2.css now loads AFTER this file and
   restates what it disagrees with. Sections 1 and 6 (families, wordmark boxes) are
   overridden there; section 5's ellipse is re-centred there; sections 7–11 style
   markup that the rebuilt homepage no longer emits. Section 4 (the desktop header
   flex row) still applies and is built upon — the seven-label / centred-logo
   collision it fixed is re-verified at 1201 / 1440 / 1680 / 1920 in the README.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Body font: Rubik -> Be Vietnam Pro

   Rubik has NO vietnamese subset on Google Fonts. Measured against the 90
   distinct Vietnamese characters in "TRẢI NGHIỆM ĐỘC ĐÁO GIỮA ĐỒI CÁT" plus the
   full precomposed tone-mark set, Rubik's own font files cover 37/90 — it is
   missing Ơ ơ Ư ư ạ ả ấ ầ ẩ ẫ ậ and 42 more. Every one of those would fall back
   per-glyph to the system sans-serif, mixing two typefaces inside single words.

   Be Vietnam Pro covers 90/90 (verified by downloading every weight/style and
   reading the cmap), is purpose-built for Vietnamese, and is a close geometric
   match for Rubik's proportions.

   style.css declares 'Rubik' in exactly six places; each is restated here.
   Amatic SC is deliberately NOT replaced — it also covers 90/90.
   -------------------------------------------------------------------------- */

body,
input,
button,
select,
textarea,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.theme-btn,
.main-menu .navigation > li > a {
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Carousel nav labels

   style.css renders the banner arrows' captions with CSS `content`, so they
   cannot be translated from the markup.
   -------------------------------------------------------------------------- */

.banner-section .owl-theme .owl-nav .owl-prev:after {
  content: 'TRƯỚC';
}

.banner-section .owl-theme .owl-nav .owl-next:after {
  content: 'TIẾP';
}

/* --------------------------------------------------------------------------
   3. Breathing room for stacked diacritics

   Vietnamese stacks a tone mark above a vowel that may already carry a breve or
   circumflex (Ế, Ữ, Ộ). Amping's tight display line-heights clip the upper mark
   on the largest headings, so the affected rules get a little more room.
   -------------------------------------------------------------------------- */

.banner-carousel .content-box h2 {
  line-height: 1.15;
}

.sec-title h2,
.video-section .sec-title h2 {
  line-height: 1.2;
}

.sec-title .sub-title,
.banner-carousel .content-box span {
  line-height: 1.35;
}

.page-title .title h1 {
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   4. Header layout for Vietnamese labels

   Amping's header-style-one absolutely centres `.logo-box` over the header row and
   lets a six-item English menu run underneath it on the left. Seven longer Vietnamese
   labels do not fit in that space: measured in Chromium, the nav overlapped the logo
   by 78-161px at EVERY width from 1201px to 1920px, so "ĐỘI NGŨ" and "LIÊN HỆ" were
   painted under the logo mark.

   Amping itself abandons the absolute centring below 1200px (responsive.css sets
   `.logo-box { position: relative; transform: none }` there). This extends the same
   idea upward: on desktop the logo joins the flow as the first item in a flex row, the
   menu follows it, and `.menu-right-content` stays right. Nothing below 1200px is
   touched, so the template's own desktop -> hamburger switch is unchanged.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 1201px) {
  .header-style-one .header-lower {
    display: flex;
    align-items: center;
  }

  .header-style-one .header-lower .logo-box {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
    margin-right: 40px;
  }

  .header-style-one .header-lower .outer-box {
    flex: 1 1 auto;
    min-width: 0;
  }

  .main-menu .navigation > li {
    margin: 0px 10px;
  }

  .main-menu .navigation > li > a {
    font-size: 15px;
  }

  .main-header .menu-right-content .support-box {
    padding: 10px 22px 4px 64px;
    margin-right: 22px;
  }

  .main-header .menu-right-content .search-box-outer {
    margin-right: 20px;
  }

  .main-header .menu-right-content .theme-btn {
    padding: 21.5px 30px;
    letter-spacing: 1px;
  }
}

/* Narrow desktop: the phone block is the least load-bearing item in the row and it is
   repeated in the footer and on /contact, so it yields first. */
@media only screen and (min-width: 1201px) and (max-width: 1450px) {
  .main-header .menu-right-content .support-box {
    display: none;
  }

  .main-menu .navigation > li {
    margin: 0px 7px;
  }
}

/* --------------------------------------------------------------------------
   5. Hero legibility scrim

   This is a tourism site: the photographs have to read. An earlier pass stacked a 0.58
   flat overlay under a full-frame 0.62 gradient — ~0.84 effective dimming edge to edge.
   It bought 4.0-4.5:1 and turned the dunes into a flat brown wash. Wrong trade.

   Now:
     * the flat `:before` is 0.05 — a whisper, just enough to settle the whole frame.
       Colour, contrast and detail survive across the photograph;
     * all the darkening legibility needs is in ONE radial ellipse aimed at the text
       block. The kicker/headline/CTA occupy 22%-68% of the slide height, centred at
       ~45%, so the ellipse sits at 50% 45% and fades to fully transparent well before
       the frame edges and the bottom;
     * peak alpha is per-slide via `--hero-scrim`, set from the BANNER data. The four
       photographs need very different amounts — a single strength has to be sized for
       the worst of them (leo-nui's sunrise sits directly behind the kicker) and
       needlessly flattens the other three;
     * `.shape` (the yellow splat) stays toned. It sits inside `.content-box`, above
       both layers, and was the single worst contributor to the stock 1.65:1 floor.
       Toning a decoration costs the photograph nothing.

   Target is the AA large-text bar with a small margin (~3.2-3.9:1 at the worst-5%
   sample), not the largest number obtainable. Measured figures are in the README.
   -------------------------------------------------------------------------- */

.banner-carousel .slide-item:before {
  opacity: 0.05;
}

.banner-carousel .slide-item:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 2;
  pointer-events: none;
  /* The multipliers hold the curve's shape while --hero-scrim scales its depth.
     Fallback 0.58 matches slide 1, so a slide without the variable is still legible. */
  background-image: radial-gradient(
    ellipse 66% 44% at 50% 45%,
    rgba(35, 21, 14, calc(var(--hero-scrim, 0.58) * 1)) 0%,
    rgba(35, 21, 14, calc(var(--hero-scrim, 0.58) * 0.9)) 52%,
    rgba(35, 21, 14, calc(var(--hero-scrim, 0.58) * 0.41)) 80%,
    rgba(35, 21, 14, calc(var(--hero-scrim, 0.58) * 0.06)) 94%,
    rgba(35, 21, 14, 0) 100%
  );
}

.banner-carousel .slide-item .content-box .shape {
  opacity: 0.42;
}

/* --------------------------------------------------------------------------
   6. TANYOLI wordmark

   No logo file has been supplied, so the brand renders as text in the site's display
   face (Amatic SC). Each variant is boxed to the exact dimensions the Amping logo
   image occupied — measured in Chromium before the swap — so neither the header's
   flex row nor the footer's centred block shifts.

   TODO(logo-file): delete this section when a real logo image replaces the text.
   -------------------------------------------------------------------------- */

.brand-mark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Amatic SC', cursive;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

.brand-mark__word {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
}

.brand-mark__tagline {
  display: block;
  font-weight: 400;
}

/* header — replaces a 101x51 image on a white bar */
.brand-mark--header {
  width: 101px;
  height: 51px;
  color: #3b251a;
}

.brand-mark--header .brand-mark__word {
  font-size: 30px;
  letter-spacing: 2px;
}

.brand-mark--header .brand-mark__tagline {
  font-size: 13px;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

/* footer and mobile menu — replace a 133x67 image on a dark ground */
.brand-mark--footer,
.brand-mark--mobile {
  width: 133px;
  height: 67px;
  color: #ffffff;
}

.brand-mark--footer .brand-mark__word,
.brand-mark--mobile .brand-mark__word {
  font-size: 40px;
  letter-spacing: 2.5px;
}

.brand-mark--footer .brand-mark__tagline,
.brand-mark--mobile .brand-mark__tagline {
  font-size: 16px;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

/* The donor centres the footer logo inside a flex row; keep the figure from
   collapsing now that its child is text rather than a replaced element. */
.main-footer .footer-logo,
.mobile-menu .nav-logo {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   7. About-section vertical decorative word

   Two separate problems.

   (a) THE BUG. style.css sizes `.image_block_one .image-box .text` for the donor's
   single English word at 100px/30px letter-spacing with `white-space: normal`. The
   Vietnamese replacement contained a space, so it WRAPPED to two lines — the rotated
   result measured 200px wide by 840px tall and `.boxed_wrapper { overflow: hidden }`
   cut off everything past the left edge, which is why it read as a fragment.
   `white-space: nowrap` fixes it for good, whatever the word is later set to.

   (b) A FLAW INHERITED FROM THE DONOR. The word is a white ghost watermark that sits
   in the gutter to the LEFT of the photo, and that gutter shrinks with the viewport.
   Measured on the donor itself: it renders fully at 1920 and 1440, and runs off the
   left edge at 1366 (x=-19), 1280 (x=-62) and 1200 (x=-102). So the template loses the
   word on any laptop-width screen.

   Since the word has to render whole at 1280, it is scaled to the gutter that actually
   exists at each breakpoint rather than left at one size:
     gutter = 375px @1920, 135px @1440, 98px @1366, 55px @1280, 15px @1200.
   Below 1280 there is no room for a legible word at any size, and it is a decoration,
   so it is dropped there — the donor loses it at that width anyway.

   The strip is positioned to clear the photo's left edge by ~15px (~8px at 1280),
   matching the donor's relationship to the frame. Colour stays the donor's #fff, so it
   reads as the same faint ghost against the section's light ground.
   -------------------------------------------------------------------------- */

.image_block_one .image-box .text {
  white-space: nowrap;
  width: max-content;
  font-size: 78px;
  line-height: 78px;
  letter-spacing: 18px;
  top: 250px;
  left: -285px;
}

/* 1280-1359: the gutter is ~55-95px, too tight for the 78px strip. */
@media only screen and (max-width: 1359px) {
  .image_block_one .image-box .text {
    font-size: 44px;
    line-height: 44px;
    letter-spacing: 10px;
    left: -160px;
  }
}

/* Under 1280 the gutter collapses to ~15px — no room for the decoration at all. */
@media only screen and (max-width: 1279px) {
  .image_block_one .image-box .text {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. About-section photo frame

   The donor's placeholder was 500x606 (aspect 0.825) and style.css renders it with
   `width: 100%` and auto height, so the frame's height came from the file itself.
   doi-cuu.jpg is 960x1014 (0.947) — wider — so a plain src swap would have shortened
   the frame from 606px to 528px and moved everything below it.

   The frame is therefore pinned to the donor's own 500:606 ratio and the photo covers
   it. The clip-path corner and the yellow `.shape` wedge are untouched; the photo is
   cropped ~37px on each side rather than distorted. The subject stands at ~51% of the
   frame width, so a centred crop keeps her whole — no object-position offset needed.
   -------------------------------------------------------------------------- */

.image_block_one .image-box .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 500 / 606;
  object-fit: cover;
  object-position: 50% 50%;
}

/* --------------------------------------------------------------------------
   9. Feature card photos

   The donor's placeholders were 370x253 (aspect 1.4625) and style.css renders them
   with `width: 100%` and auto height, so each card's image height came from the file.
   The real photos are 1.500, 1.333 and 1.500, so a plain src swap would have given the
   three cards different heights and broken the row. The frame is pinned to the donor's
   own ratio and the photo covers it; per-card `object-position` is set inline from the
   ACTIVITIES data. The circular icon badge and the torn-edge treatment sit on
   `.lower-content` and are untouched.
   -------------------------------------------------------------------------- */

.activities-block-one .inner-box .image-box img {
  width: 100%;
  height: auto;
  aspect-ratio: 370 / 253;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   10. Video section — localised scrim

   `.video-section:before` is a flat #3b251a at 0.7 across the whole band, which on
   white sand dunes erases the photograph. The kicker (yellow) and heading (white) sit
   on the LEFT half; the play button sits on the right and needs no help.

   The flat layer is cut right back and a horizontal gradient is added over the text
   side only, fading to fully transparent before the play button.

   The KICKER is the binding constraint, not the heading: it is yellow (#ffbf37,
   relative luminance 0.59) where the heading is white (1.0), so at any given background
   it carries far less contrast. Peak 0.70 puts the kicker at 3.35:1 (1440px) and
   3.63:1 (1280px) — inside the 3.2-3.8 band — and the heading follows at ~6.1-6.4:1,
   which is simply what white does over the same scrim. Note the peak had to rise from
   0.66 after the crop was retuned: showing more bright sand behind the text dropped the
   kicker to 3.19. Measured figures are in the README.
   -------------------------------------------------------------------------- */

.video-section:before {
  opacity: 0.18;
}

.video-section:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    rgba(35, 21, 14, 0.7) 0%,
    rgba(35, 21, 14, 0.658) 34%,
    rgba(35, 21, 14, 0.329) 55%,
    rgba(35, 21, 14, 0.056) 72%,
    rgba(35, 21, 14, 0) 82%
  );
}

/* `.inner-box` must stay above the new layer. */
.video-section .auto-container {
  position: relative;
  z-index: 2;
}

/* Crop. `.parallax-bg` is `background-attachment: fixed`, so the background is sized
   to the VIEWPORT, not the band, and the default `center` showed mostly sky with the
   main dune cut off. Shifting down brings the dune slope and the eroded cliff face
   into the band. 80% and 100% clamp to the same result — the slack runs out — so 80%
   is the effective bottom. */
.video-section .bg-layer {
  background-position: 50% 80%;
}

/* --------------------------------------------------------------------------
   11. "Vì sao chọn chúng tôi" photos

   Same problem as the feature cards: the donor's placeholders were 370x255 (the pair)
   and 370x149 (the strip under the promo box), rendered with `width: 100%` and auto
   height, so each frame's height came from its file. The real photos are 1.708, 1.333
   and 0.667, so a plain src swap would have given the two top frames different heights
   and blown the short strip out to roughly 555px tall. Both frames are pinned to the
   donor's ratios and the photos cover them; `object-position` is set per photo inline.

   The strip is the severe one: a 1707x2560 PORTRAIT source in a 2.48:1 band keeps only
   ~27% of the image height, so the crop decides what the band is *of*. Positioned at
   30% to centre the carved TANYOLI sign, which sits ~29.5% down the source.
   -------------------------------------------------------------------------- */

.chooseus-section .content-inner .image-box .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 370 / 255;
  object-fit: cover;
}

.content_block_two .content-box .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 370 / 149;
  object-fit: cover;
}