/* Haikotek v1.4.3 — fix overlapping links in case cards (Selected work, /work, home teaser).
   Root cause: v15.css lays each non-lead card out as a 6-row subgrid (grid-row:span 6; img, eyebrow, title, details, tags, CTA).
   Cards with external links (.v140-ext: Visit website / App Store / Google Play) have a 7th child; with no 7th track it was
   auto-placed into row 6 together with "Read the case study", so the two rows of links were painted on top of each other.
   Fix: pin both to row 6, CTA at the top of the row, the external links below it with a fixed offset. No new track,
   so the grid rows and the alignment of the three cards stay as in v1.4.0. */
@media(min-width:900px){
.v15-cases>.v15-case:not(.v15-case-lead) .rail-cta-row,.v15-teaser>.v15-case:not(.v15-case-lead) .rail-cta-row{grid-row:6;grid-column:1/-1;align-self:start}
.v15-cases>.v15-case:not(.v15-case-lead) .v140-ext,.v15-teaser>.v15-case:not(.v15-case-lead) .v140-ext{grid-row:6;grid-column:1/-1;align-self:start;margin-top:3.4rem!important}
}
/* "Nearest project" paragraph (for/professional-services): keep each link on one line so "See sample deliverables" never splits. */
.v15-ps-near a.editorial-link{display:inline-block;white-space:nowrap;margin-right:.75rem}

/* ==========================================================================
   Haikotek v1.4.4 (draft) - visual polish
   Same visual language. Only: solid hero CTA, readable small text, 14px menu,
   44px tap targets on mobile, sentence case outside tiny labels, price currency.
   Loaded last on purpose so it needs no new file in the CSS contract list.
   ========================================================================== */

/* 1. Hero primary CTA: solid earthy orange (same fill as the mobile "Free consultation" bar). Secondary stays outline. */

/* 2. Contrast. Hero text on the brown glow, accent labels on cream. */
.v12 .hero-copy .type-hero-sub{color:rgba(255,255,255,.9)}
.hero-note{color:rgba(255,255,255,.86);font-size:12px}
.hero-eyebrow{color:rgba(255,255,255,.86)}
.type-label.v15-wk-k,.type-eyebrow-accent,.v13 span.n,.v15-kick{color:var(--accent-fill,#b8360e)}

/* 3. Menu text 14px. */
.hnav .nav-link,.hnav button.nav-link,.overlay .nav-link,.overlay .locale-link,.hmob.r.nav-link,.site-footer .nav-link{font-size:14px}

/* 4. Sentence case for headings, buttons and links. Caps stay on tiny eyebrow labels only. */
.v13 .mbar .mbar-pri,.cta-hero-cream-primary,.cta-outline,.btn-primary,.btn-text,.mbar-pri,.editorial-link,.lookbook-plate-cta,.ink-group-hover,.v13 .hk-tab .lb,.filter-chip{text-transform:none;letter-spacing:.01em}
.cta-outline,.editorial-link,.lookbook-plate-cta,.btn-primary,.btn-text,.cta-hero-cream-primary,.v13 .mbar .mbar-pri{font-size:13px}
h1.type-page-title-upper,.lookbook-plate-title,.type-rail-title,h2.type-label,h3.type-label,.guar-grid h4,.v13 h4{text-transform:none;letter-spacing:.005em}
.lookbook-plate-title,.type-rail-title{font-size:15px}
h2.type-label,h3.type-label{font-size:14px}
/* Prices: the currency symbol keeps its own case, so VI shows 5.000.000đ and not 5.000.000Đ. */
.pc,.pfx,.sep,.price-meta,.plate-price,.price,.plate-price *{text-transform:none}

@media(max-width:767px){
/* 3. Tap targets at least 44px on mobile. */
a.skip,a.logo,.hmob.r.nav-link,.cta-outline,.btn-primary,.lab-pill,.lab-pill.sm,.hk-prev,.hk-next,.fsoc-btn,button.cta-outline{min-height:44px;min-width:44px}
a.logo{display:inline-flex;align-items:center}
.hmob.r.nav-link{display:inline-flex;align-items:center;justify-content:center}
.rail-thumb{width:44px;min-height:44px}
.rail-thumbs{gap:4px}
p .editorial-link:not(.arrow),li .editorial-link:not(.arrow),.v15-ps-near a.editorial-link{display:inline;min-height:0}
.v12 a.editorial-link.arrow,.v12 a.lookbook-plate-cta{display:inline-flex;align-items:center;min-height:44px}
.v12 .btn-primary,.v13 .btn-primary,.v13 .cta-hero-cream-primary,.v13 .cta-band-primary{min-height:44px}
.crumb{display:flex;flex-wrap:wrap;align-items:center}
.ink-group-hover{display:inline-block;padding-block:12px}
.crumb a,.v15-gl-n a,.lab-name a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.v12 .hs-act-row a.editorial-link,.v12 .closing-act a.editorial-link,.v12 .v15-act a.editorial-link,.v12 li>a.editorial-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.site-footer .fsoc .fsoc-btn,.v12 .fsoc .fsoc-btn{min-height:44px;display:inline-flex;align-items:center}
.v12 .fsoc-btn{min-height:44px}
.v12 a.editorial-link.v140-out,.v12 .rail-cta-row a.editorial-link,.v12 p>a.editorial-link{min-height:44px;display:inline-flex;align-items:center}
.site-footer .nav-link,.site-footer a:not(.logo){display:flex;align-items:center;min-height:44px}
.site-footer p a,.site-footer address a{display:inline-flex;align-items:center;min-height:44px}
summary{display:flex;align-items:center;min-height:44px}
input.form-field,select.form-field,textarea.form-field,.form-field{min-height:44px}
.v13 .hk-tab{padding-block:22px;margin-block:-22px}
.lab-dot{box-sizing:content-box;padding:18px 0;background-clip:content-box;min-width:8px;height:8px}
.lab-dot i{inset:18px 0}
}
.v15-wk .v15-wk-l li span.n{color:var(--accent-fill,#b8360e)!important;opacity:1!important}
.v15-intl-l li span.type-label,.v15-gl-dl dt.type-label{color:#6b6965!important;opacity:1!important}
.v12 .sv-m,.v13 .sv-m,.sv-m{text-transform:none!important;letter-spacing:.02em}

/* ===== Haikotek v1.4.5 (draft) - ONE button system =====
   Primary = brand orange #D64216 fill, WHITE label (4.52:1, WCAG AA). White on the logo orange #FF4F1A is only 3.29:1, so the fill is the closest darker orange (same hue and saturation, value lowered). Hover #C53D14 (5.18:1), active #B43712 (6.01:1). The logo itself stays #FF4F1A. The desktop header CTA (a.hdr-book) is not part of this system and keeps its f2c86cd style.
   Secondary = outline, same height/radius/padding/font as primary. Hero (dark) only changes the outline colour via currentColor.
   Icon buttons (mbar-ic, cta-fab, hk-btn, lab-btn) keep their round 44px shape and share the outline colour. */
:root{--btn-h:44px;--btn-fill:#d64216;--btn-fill-hover:#c53d14;--btn-fill-active:#b43712;--btn-ink:#ffffff;--btn-px:28px}
html body .cta-hero-primary.cta-hero-primary.cta-hero-primary,html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary,html body .cta-band-primary.cta-band-primary.cta-band-primary,html body .btn-primary.btn-primary.btn-primary,html body a.mbar-pri.mbar-pri.mbar-pri,html body .lab-pill.lab-pill.lab-pill:not(.sm),html body .cta-hero-secondary.cta-hero-secondary.cta-hero-secondary,html body .cta-outline.cta-outline.cta-outline,html body .lab-pill.lab-pill.lab-pill{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--btn-h)!important;height:auto;padding:10px var(--btn-px)!important;border-radius:9999px!important;border-width:1px!important;border-style:solid!important;font-family:inherit;font-size:14px!important;font-weight:500!important;line-height:1.25!important;letter-spacing:.01em!important;text-transform:none!important;text-align:center;text-decoration:none!important;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s}
html body .cta-hero-primary.cta-hero-primary.cta-hero-primary,html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary,html body .cta-band-primary.cta-band-primary.cta-band-primary,html body .btn-primary.btn-primary.btn-primary,html body a.mbar-pri.mbar-pri.mbar-pri,html body .lab-pill.lab-pill.lab-pill:not(.sm){background:var(--btn-fill)!important;border-color:var(--btn-fill)!important;color:var(--btn-ink)!important;box-shadow:none}
html body .cta-hero-primary.cta-hero-primary.cta-hero-primary:hover,html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary:hover,html body .cta-band-primary.cta-band-primary.cta-band-primary:hover,html body .btn-primary.btn-primary.btn-primary:hover,html body a.mbar-pri.mbar-pri.mbar-pri:hover,html body .lab-pill.lab-pill.lab-pill:not(.sm):hover,html body .cta-hero-primary.cta-hero-primary.cta-hero-primary:focus-visible,html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary:focus-visible,html body .cta-band-primary.cta-band-primary.cta-band-primary:focus-visible,html body .btn-primary.btn-primary.btn-primary:focus-visible,html body a.mbar-pri.mbar-pri.mbar-pri:focus-visible,html body .lab-pill.lab-pill.lab-pill:not(.sm):focus-visible{background:var(--btn-fill-hover)!important;border-color:var(--btn-fill-hover)!important;color:var(--btn-ink)!important}
html body .cta-hero-primary.cta-hero-primary.cta-hero-primary:active,html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary:active,html body .cta-band-primary.cta-band-primary.cta-band-primary:active,html body .btn-primary.btn-primary.btn-primary:active,html body a.mbar-pri.mbar-pri.mbar-pri:active,html body .lab-pill.lab-pill.lab-pill:not(.sm):active{background:var(--btn-fill-active)!important;border-color:var(--btn-fill-active)!important;color:var(--btn-ink)!important}
html body .cta-hero-primary.cta-hero-primary.cta-hero-primary:disabled,html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary:disabled,html body .cta-band-primary.cta-band-primary.cta-band-primary:disabled,html body .btn-primary.btn-primary.btn-primary:disabled,html body a.mbar-pri.mbar-pri.mbar-pri:disabled,html body .lab-pill.lab-pill.lab-pill:not(.sm):disabled,html body .cta-hero-primary.cta-hero-primary.cta-hero-primary[aria-disabled="true"],html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary[aria-disabled="true"],html body .cta-band-primary.cta-band-primary.cta-band-primary[aria-disabled="true"],html body .btn-primary.btn-primary.btn-primary[aria-disabled="true"],html body a.mbar-pri.mbar-pri.mbar-pri[aria-disabled="true"],html body .lab-pill.lab-pill.lab-pill:not(.sm)[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
html body .cta-hero-primary.cta-hero-primary.cta-hero-primary svg,html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary svg,html body .cta-band-primary.cta-band-primary.cta-band-primary svg,html body .btn-primary.btn-primary.btn-primary svg,html body a.mbar-pri.mbar-pri.mbar-pri svg{color:var(--btn-ink)!important;fill:currentColor}
html body .cta-hero-secondary.cta-hero-secondary.cta-hero-secondary,html body .cta-outline.cta-outline.cta-outline{background:transparent!important;border-color:color-mix(in srgb,currentColor 45%,transparent)!important;box-shadow:none}
html body .cta-hero-secondary.cta-hero-secondary.cta-hero-secondary:hover,html body .cta-outline.cta-outline.cta-outline:hover{background:color-mix(in srgb,currentColor 7%,transparent)!important;border-color:color-mix(in srgb,currentColor 75%,transparent)!important}
html body .cta-hero-secondary.cta-hero-secondary.cta-hero-secondary:focus-visible,html body .cta-outline.cta-outline.cta-outline:focus-visible{background:color-mix(in srgb,currentColor 7%,transparent)!important;border-color:currentColor!important}
html body button.cta-outline.cta-outline.cta-outline{color:var(--foreground,#14110e)!important}
html body a.cta-hero-secondary.cta-hero-secondary.cta-hero-secondary{color:#fff!important}
html body .cta-hero-primary.cta-hero-primary.cta-hero-primary:focus-visible,html body .cta-hero-cream-primary.cta-hero-cream-primary.cta-hero-cream-primary:focus-visible,html body .cta-band-primary.cta-band-primary.cta-band-primary:focus-visible,html body .btn-primary.btn-primary.btn-primary:focus-visible,html body a.mbar-pri.mbar-pri.mbar-pri:focus-visible,html body .lab-pill.lab-pill.lab-pill:not(.sm):focus-visible,html body .cta-hero-secondary.cta-hero-secondary.cta-hero-secondary:focus-visible,html body .cta-outline.cta-outline.cta-outline:focus-visible{outline:2px solid var(--accent,#ff4f1a)!important;outline-offset:3px!important}
@media(max-width:767px){:root{--btn-px:22px}}

/* Lab app cards: main CTA = primary. The small card pill is the same shape in the dark secondary style (ink glass, cream outline). */
html body .lab-pill.sm.sm.sm{background:rgba(20,17,14,.62)!important;border-color:rgba(250,248,245,.55)!important;color:#faf8f5!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px 20px!important;white-space:nowrap}
html body .lab-dcard:hover .lab-pill.sm.sm.sm{background:rgba(20,17,14,.8)!important;border-color:#faf8f5!important}
html body .lab-dcard .lab-dlabel{bottom:66px}
html body .lab-pill.lab-pill.lab-pill::after{width:.8em;height:.8em}
@media(max-width:767px){html body .cta-hero-primary.cta-hero-primary.cta-hero-primary,html body .cta-hero-secondary.cta-hero-secondary.cta-hero-secondary{min-width:min(100%,280px)}}

/* ===== Haikotek v1.4.6 (draft) - primary placement, header live dot, 360px fixes =====
   1) The main action of every group is a primary, whatever class the template gave it. Templates render several main actions with
      `.cta-outline` (page-hero rows `.hs-act-row`, section end rows `.endrow`, `.v15-rcta`, single section links `.act`, booking links to
      /contact, the footer newsletter submit). Same look as the v1.4.5 primary, so height, radius, size and weight are not touched here:
      only fill, border and label colour. A second button-shaped action in the same group (e.g. "Nhắn Zalo" in `.closing-act`) stays outline.
      Plain `.editorial-link` text links stay text links. Header CTA (`a.hdr-book`) is not part of this. */
html body :is(.hs-act-row>.cta-outline:first-child,.endrow>.cta-outline:first-child,.v15-rcta>.cta-outline:first-child,a.cta-outline[href*="/contact"],.fsub-row>.cta-outline):not(#_p){background:var(--btn-fill)!important;border-color:var(--btn-fill)!important;color:var(--btn-ink)!important;box-shadow:none}
html body :is(.hs-act-row>.cta-outline:first-child,.endrow>.cta-outline:first-child,.v15-rcta>.cta-outline:first-child,a.cta-outline[href*="/contact"],.fsub-row>.cta-outline):not(#_p):is(:hover,:focus-visible){background:var(--btn-fill-hover)!important;border-color:var(--btn-fill-hover)!important;color:var(--btn-ink)!important}
html body :is(.hs-act-row>.cta-outline:first-child,.endrow>.cta-outline:first-child,.v15-rcta>.cta-outline:first-child,a.cta-outline[href*="/contact"],.fsub-row>.cta-outline):not(#_p):active{background:var(--btn-fill-active)!important;border-color:var(--btn-fill-active)!important;color:var(--btn-ink)!important}
html body :is(.hs-act-row>.cta-outline:first-child,.endrow>.cta-outline:first-child,.v15-rcta>.cta-outline:first-child,a.cta-outline[href*="/contact"],.fsub-row>.cta-outline):not(#_p) svg{color:var(--btn-ink)!important;fill:currentColor}

/* 2) Desktop header CTA: a soft "live" ring that expands and fades from the 5px dot. transform and opacity only, no layout shift. */
.v12 .hdr-book{position:relative}
.v12 .hdr-book::before{animation:hk-live-dot 2s ease-in-out infinite;will-change:transform}
.v12 .hdr-book::after{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--accent);opacity:0;pointer-events:none;animation:hk-live-ring 2s ease-out infinite;will-change:transform,opacity}
@keyframes hk-live-ring{0%{transform:scale(1);opacity:.42}75%,100%{transform:scale(2.2);opacity:0}}
@keyframes hk-live-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.v12 .hdr-book:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.v12 .hdr-book::before,.v12 .hdr-book::after{animation:none!important}.v12 .hdr-book::after{display:none}}

/* 3) 360px: the offers rail nav (thumbs + "All services") may wrap instead of pushing the page 7px wider. */
@media(max-width:767px){
.rail-nav{flex-wrap:wrap;row-gap:.25rem}
.rail-nav .editorial-link{white-space:nowrap}
/* 4) The sticky mobile bar (about 3.85rem + safe area) must not cover the hero's last line or the slide progress bars. */
.v12 #site-home-hero .hero-dots{padding-bottom:calc(1.25rem + 3.85rem + env(safe-area-inset-bottom,0px))}
}

/* v1.4.7 (t186u): small/short phones — tighter hero vertical rhythm so the trust line clears the sticky bottom bar. H1 and 44px targets untouched on >=700px-tall screens. */
@media(max-width:480px) and (max-height:780px){
.v12 #site-home-hero .hero-copy{padding-top:calc(6.75rem + var(--proto-h,0px));padding-bottom:.5rem}
.v12 #site-home-hero .hero-copy .type-hero-sub{margin-top:.75rem;font-size:.9375rem;line-height:1.42}
.v12 #site-home-hero .hero-ctas{margin-top:1.25rem;gap:.5rem 1rem}
#site-home-hero .v142-proof{padding-bottom:.15rem;line-height:1.4}
}
@media(max-width:480px) and (max-height:700px){
.v12 #site-home-hero .hero-title{font-size:1.85rem;line-height:1.08}
html[lang=vi] .v12 #site-home-hero .hero-title{font-size:1.75rem;line-height:1.1}
}

/* v1.4.8 — a section that is a direct child of <main> (the /contact FAQ) sits outside
   .page.gx and .cmax, so it had no page gutter and started at x=0. Give it the same
   gutter and the same 1100px centered column as the page content above it. */
main>.psec{box-sizing:border-box;width:100%;max-width:calc(1100px + 2*var(--gutter-x));margin-left:auto;margin-right:auto;padding-left:var(--gutter-x);padding-right:var(--gutter-x)}