/* v1.2 refinements after visual review */
.nav-item > a, .masthead__tools .btn, .lang-switch { white-space: nowrap; }
.masthead__inner { gap: 1.25rem; }
.site-nav { gap: 1rem; }
.nav-item > a { padding: .5rem .55rem; font-size: .88rem; }
.more-link { grid-column: -2 / -1; justify-self: end; }
.sec-head > div:first-child { grid-column: 1; }
#services, #technology { padding-top: clamp(2.25rem, 4vw, 3.25rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 860px) { .more-link { grid-column: auto; justify-self: start; } }
.btn { white-space: nowrap; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 720px) { .stat__num { font-size: 1.6rem; } .stats__list { padding: 1.25rem 0; } }
.footer-links { gap: 0; }
.footer-links li + li { padding-left: 0; border-left: 0; margin-left: 0; }
.footer-links li + li::before { content: "|"; margin: 0 .9rem; color: rgba(255,255,255,.3); }

/* ---- Alignment chosen in the admin (align_class(): page headers, home blocks) ---- */
.is-al-left { text-align: left; }
.is-al-center { text-align: center; }
.is-al-right { text-align: right; }
.is-al-justify { text-align: justify; }
/* page header: centre / right-align the width-limited title and lead too */
.page-head.is-al-center h1, .page-head.is-al-center .page-head__lead { margin-left: auto; margin-right: auto; }
.page-head.is-al-right h1, .page-head.is-al-right .page-head__lead { margin-left: auto; }
.is-al-center .page-head__actions { justify-content: center; }
.is-al-right .page-head__actions { justify-content: flex-end; }
/* home section heads: stack title / text / link when centred or right-aligned */
.sec-head.is-al-center, .sec-head.is-al-right { grid-template-columns: minmax(0, 1fr); }
.sec-head.is-al-center { justify-items: center; }
.sec-head.is-al-right { justify-items: end; }
.sec-head.is-al-center .sec-text { margin-left: auto; margin-right: auto; }
.sec-head.is-al-right .sec-text { margin-left: auto; }
/* hero: the two title lines are a flex column */
.hero__inner.is-al-center .hero__title { align-items: center; }
.hero__inner.is-al-right .hero__title { align-items: flex-end; }
/* per-text alignment: buttons become blocks of their own width; hero title lines are flex items */
.btn.is-al-left, .btn.is-al-center, .btn.is-al-right { display: flex; width: fit-content; }
.btn.is-al-left { margin-right: auto; }
.btn.is-al-center { margin-left: auto; margin-right: auto; }
.btn.is-al-right { margin-left: auto; }
.hero__title > .is-al-left { align-self: flex-start; }
.hero__title > .is-al-center { align-self: center; }
.hero__title > .is-al-right { align-self: flex-end; }

/* ---- Main menu: 1.2× the original (1.16 set 1.5×, 1.16.1 reduced to 0.8 of that): items 1.08rem, language switch .98rem ---- */
.masthead__inner { min-height: 4.6rem; }
.nav-item > a { font-size: 1.08rem; padding: .55rem .7rem; gap: .35rem; }
.nav-item.has-children > a::after { width: .42rem; height: .42rem; border-right-width: 1.8px; border-bottom-width: 1.8px; }
.subnav a { font-size: .95rem; }
.lang-switch { font-size: .98rem; gap: .4rem; }
.lang-switch .ico { width: 1.28rem; height: 1.28rem; }
@media (max-width: 1100px) {
  .nav-item > a { font-size: 1.05rem; padding: .85rem 0; }
}

/* ---- Header balance (1.16.2): logo | menu centred on the page | language switch, edges on the content grid ---- */
@media (min-width: 1101px) {
  .masthead__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 1.5rem; }
  .masthead__inner > .brand { grid-column: 1; justify-self: start; }
  .masthead__inner > .site-nav { display: contents; }               /* its two parts become grid cells 2 and 3 */
  .site-nav > .nav-list { grid-column: 2; justify-self: center; gap: .25rem; }
  .site-nav > .masthead__tools { grid-column: 3; justify-self: end; }
}

/* "Căn đều 2 bên" (1.18.1): spread full lines to both edges; hyphenation off, last line left-aligned */
.is-al-justify { text-align: justify; text-justify: inter-word; hyphens: manual; }

/* ---- Header bar colour (1.22): --header-bg comes from /theme.css (Cấu hình website → Màu thanh đầu trang) ---- */
.masthead { background: var(--header-bg, #d6eefa); border-bottom-color: rgba(14, 26, 43, .08); }
@media (min-width: 1101px) {
  .masthead--dark .nav-item > a, .masthead--dark .lang-switch, .masthead--dark .lang-switch a { color: #fff; }
  .masthead--dark .nav-item > a:hover, .masthead--dark .nav-item.is-active > a, .masthead--dark .lang-switch a.is-current,
  .masthead--dark .lang-switch a:hover { color: #ffd9a8; }   /* light orange: readable on navy and on red */
}
.masthead--dark .wordmark { border-color: #fff; }
.masthead--dark .nav-toggle { background: transparent; border-color: rgba(255, 255, 255, .45); }
.masthead--dark .nav-toggle__bar, .masthead--dark .nav-toggle__bar::before, .masthead--dark .nav-toggle__bar::after { background: #fff; }
.masthead--dark .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }

/* ---- Footer colour (1.24): --footer-bg from /theme.css (Cấu hình website → Màu chân trang), default indigo #281688 ---- */
.site-footer { background: var(--footer-bg, #1d2088); color: #c9cbea; }
/* light footer colour chosen → dark text */
.site-footer--light { color: var(--steel); }
.site-footer--light a, .site-footer--light .site-footer__title, .site-footer--light .site-footer__office strong,
.site-footer--light .site-footer__brand .script { color: var(--night); }
.site-footer--light a:hover { color: var(--orange-deep); }
.site-footer--light .site-footer__grid > div + div, .site-footer--light .site-footer__contact { border-color: rgba(14, 26, 43, .15); }
.site-footer--light .site-footer__bottom { border-top-color: rgba(14, 26, 43, .12); }
.site-footer--light .footer-links li + li::before { color: rgba(14, 26, 43, .3); }
.site-footer--light .social a { border-color: rgba(14, 26, 43, .25); }
.site-footer--light .wordmark--light { border-color: var(--night); }

/* ---- Hero colour (1.25): --hero-bg / --hero-rgb from /theme.css (Cấu hình website → Màu khối hero), default #1d2088.
   Used for the hero background, its photo overlay and the stats band right under it. ---- */
.hero { background: var(--hero-bg, #1d2088); }
.hero::after { background: rgba(var(--hero-rgb, 29,32,136), var(--hero-overlay, 0)); }   /* 1.26: even (no dark gradient), 0 by default */
.hero__inner { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 14px rgba(0, 0, 0, .28); }   /* keeps white text readable on a bright photo */
.hero__inner .btn, .hero__inner .play__btn { text-shadow: none; }
.stats { background: var(--hero-bg, #1d2088); }

/* ---- Hover "lift" on photos (1.28): the photo (or its card) rises, gets a deeper shadow and the image zooms in a little.
   Smooth ease-out .4s. Kept smooth even with prefers-reduced-motion (the global reset in 04-forms.css removes all
   transitions): it only plays when the visitor points at a photo. ---- */
:root { --lift-ease: cubic-bezier(.25, .8, .25, 1); --lift-shadow: 0 18px 38px rgba(14, 26, 43, .22), 0 4px 10px rgba(14, 26, 43, .08); }
.svc, .case, .duo__media, .gallery-band__item, .post-card__img, .news-aside__img, .news-mini img {
  transition: transform .4s var(--lift-ease), box-shadow .4s var(--lift-ease), border-color .4s var(--lift-ease) !important;
}
.svc__media, .case__media { overflow: hidden; }
.svc__media img, .case__media img, .duo__media img, .gallery-band__item img {
  transition: transform .6s var(--lift-ease) !important;
}
/* cards with the photo on top: the whole card lifts */
.svc:hover, .case:hover { transform: translateY(-8px); box-shadow: var(--lift-shadow); }
/* photos on their own: the photo lifts */
.duo__media:hover, .gallery-band__item:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--lift-shadow); }
.post-card__link:hover .post-card__img, .news-aside__item:hover .news-aside__img { transform: translateY(-6px); box-shadow: var(--lift-shadow); }
.news-mini a:hover img { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 18px rgba(14, 26, 43, .2); }
/* the picture inside zooms gently */
.svc:hover .svc__media img, .case:hover .case__media img, .duo__media:hover img, .gallery-band__item:hover img { transform: scale(1.07); }
.duo__media--video:hover video { transform: none; }
/* room above/below the photo strip so a lifted photo and its shadow are not cut off */
.gallery-band__track { padding-top: 12px; padding-bottom: 26px; }
.gallery-band__row + .gallery-band__row { margin-top: -38px; }   /* the 12px + 26px lift room must not widen the gap between the rows */
.gallery-band.gallery-band { padding-top: max(0px, calc(var(--home-gap, 3rem) - 12px)); padding-bottom: max(0px, calc(clamp(2.25rem, 5vw, 3.5rem) - 26px)); }
@media (hover: none) { .svc:hover, .case:hover, .duo__media:hover, .gallery-band__item:hover { transform: none; } }   /* touch: no stuck lift */

/* ---- Footer addresses (2.0.6): no single word left alone on the last line ("… Thành phố Hà / Nội") ----
   More room for the two offices (brand column narrower), and balanced line breaks as a safety net for any length. */
@media (min-width: 1001px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 2.5rem; }
  .site-footer__offices { gap: 1.5rem 2rem; }
}
.site-footer__office span, .site-footer__about { text-wrap: pretty; }
.site-footer__office > span:first-of-type { text-wrap: balance; }

/* ---- 2.0.7: one banner style for every inner page (dark band, as Công nghệ / Dịch vụ / Tuyển dụng) ---- */
.page-head--dark .page-head__meta { color: var(--on-night); }

/* ---- 2.0.7: wave reveal on scroll (site.js adds .rv to blocks below the fold, then animates them in a ripple) ----
   Only while JS runs: without JS (or for search engines) nothing is hidden. */
.rv { opacity: 0; }
.page-head--dark .label a { color: inherit; text-decoration: none; }
.page-head--dark .label a:hover { text-decoration: underline; }
@media print { .rv { opacity: 1 !important; } }