/* Type, spacing and image treatment shared by the Toàn Phú site. */
:root {
  --tp-ink: #203342;
  --tp-muted: #4f6473;
  --tp-line: #d9e2e8;
  --tp-radius: 12px;
}

body { color: var(--tp-ink); }
h1, h2, h3 { text-wrap: balance; }
.heading h2, .product-blend h1, .blend-copy h1, .blend-copy h2 {
  font-weight: 700;
  letter-spacing: -.037em;
}
.heading h2 { font-size: clamp(29px, 3.4vw, 47px); line-height: 1.17; }
.heading p { max-width: 39ch; font-size: 15px; line-height: 1.7; color: var(--tp-muted); }
.eyebrow { font-weight: 700; letter-spacing: .105em; }
.btn, .mobile-contact a { border-radius: 7px; }
.btn { font-weight: 650; }
.crumb { color: var(--tp-muted); }

.campaign-immersive .campaign-grid { min-height: clamp(490px, 47vw, 660px); }
.campaign-immersive .campaign-copy h1 {
  font-size: clamp(47px, 5.5vw, 78px);
  font-weight: 700;
  line-height: 1.09;
  margin: 19px 0 20px;
}
.campaign-immersive .campaign-slogan { font-size: 19px; font-weight: 600; }
.campaign-immersive .campaign-copy > p:not(.campaign-slogan) { font-size: 16px; line-height: 1.65; }
.campaign-immersive .campaign-copy .actions { margin: 25px 0 18px; }
.campaign-immersive .campaign-copy .btn { font-size: 14px; }
.campaign-immersive .campaign-detail { font-size: 13px; max-width: 330px; }
.campaign-immersive { min-height: 0; }

#hyper .hyper-thumbnail, .production-category { border-radius: var(--tp-radius); }
#hyper .hyper-thumbnail-copy h3, .production-copy h3 { margin: 0 0 9px; }
#hyper .hyper-thumbnail-copy p, .production-copy p { font-size: 14px; min-height: 0; }
#hyper .hyper-thumbnail-copy .arrow, .production-copy .arrow { font-size: 13px; }
#hyper .hyper-thumbnail:after {
  background: linear-gradient(180deg, #0a172004 14%, #0a17204d 45%, #0a1720f7 100%);
}
.blend-copy > p { font-size: 16px; line-height: 1.7; }
.blend-copy .eyebrow { font-size: 11px; }
#catalog .card, .ux-facts dl, .article .read-section, .ux-related-grid > a {
  border-radius: var(--tp-radius);
  border-color: var(--tp-line);
}
#catalog .cardbody h3 { line-height: 1.3; }
#catalog .cardbody p { line-height: 1.6; }
.article .read-section p, .article .read-section li { max-width: 76ch; }
.article .read-section strong { font-weight: 650; }
.ux-facts dt { font-size: 13px; }

.chess-feature { border-radius: var(--tp-radius); background: #101826; }
.chess-banner-images {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chess-banner-images img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: 65% center;
  filter: brightness(1.06);
}
.chess-feature::before {
  background: linear-gradient(90deg, #101826f5, #101826dd 28%, #10182635 65%, transparent);
}
.chess-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}
.chess-photo-pair figure { margin: 0; overflow: hidden; border-radius: var(--tp-radius); background: #172536; }
.chess-photo-pair img { display: block; width: 100%; height: auto; }
.chess-photo-pair figcaption { padding: 12px 16px; color: #fff; font-weight: 650; }
@media (max-width: 800px) {
  .chess-feature::before { background: linear-gradient(180deg, #101826 0%, #101826df 40%, #10182610 75%); }
  .chess-banner-images { inset: 28% 0 0; }
  .chess-feature .cardbody { min-height: 480px; padding: 28px 22px 185px !important; }
  .chess-feature { min-height: 480px; }
}
@media (max-width: 520px) { .chess-photo-pair { grid-template-columns: 1fr; } }

.article .project-showcase {
  background: #172536;
  color: #fff;
  border-color: #172536;
}
.project-showcase > p { color: #d4e0ec; }
.project-photos {
  display: grid;
  grid-template-columns: minmax(0, 1.33fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.project-photos figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tp-radius);
  background: #22344a;
}
.project-photos figure:last-child { grid-column: 1 / -1; }
.project-photos a { display: block; }
.project-photos img { display: block; width: 100%; height: auto; }
.project-photos figure:not(:last-child) a { height: clamp(240px, 38vw, 510px); }
.project-photos figure:not(:last-child) img { height: 100%; object-fit: cover; }
.project-photos figure:first-child img { object-position: top center; }
.project-photos figcaption { padding: 12px 16px; color: #f0f4fb; font-size: 14px; }
@media (max-width: 620px) {
  .project-photos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .project-photos figure:not(:last-child) a,
  .project-photos figure:not(:last-child) img { height: auto; }
}

.application-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.application-photos figure {
  margin: 0;
  background: #edf2f5;
  border-radius: var(--tp-radius);
  overflow: hidden;
}
.application-photos a { display: block; }
.application-photos img { display: block; width: 100%; height: auto; }
.application-photos figcaption {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--tp-ink);
}
@media (max-width: 680px) {
  .application-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .application-photos figure:first-child { grid-column: 1 / -1; }
  .application-photos figcaption { padding: 9px; font-size: 13px; }
}

footer .footbrand .brand {
  padding: 0;
  background: transparent;
}
footer .footbrand .brand img {
  display: block;
  width: 245px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(629%) hue-rotate(340deg);
}
.footbrand .footer-slogan {
  margin: 17px 0 0;
  padding-left: 11px;
  border-left: 2px solid #e4b575;
  color: #f5e5cf;
  font-size: 14px;
  font-weight: 650;
}

.visit-card {
  margin-top: 24px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-radius);
  background: #fff;
  overflow: hidden;
}
.visit-card iframe { display: block; width: 100%; height: 215px; border: 0; }
.visit-details { padding: 18px; }
.visit-details h3 { margin: 0 0 6px; font-size: 17px; }
.visit-details address { font-style: normal; color: var(--tp-muted); font-size: 14px; }
.visit-details a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; }
.contact .contact-direct { display: grid; gap: 5px; }
.contact-direct a { min-height: 42px; overflow-wrap: anywhere; }
.footer-map { display: inline-block; margin: 5px 0 9px; text-decoration: underline; text-underline-offset: 4px; }
.review-links { padding-block: 44px; }
.review-links h2 { margin: 0 0 18px; font-size: clamp(25px, 3vw, 36px); }
.review-links nav { display: flex; flex-wrap: wrap; gap: 12px; }
.review-links a { background: white; border: 1px solid var(--tp-line); }

#ky-thuat .techlinks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#ky-thuat .techlinks a {
  display: flex;
  flex-direction: column;
  border-radius: var(--tp-radius);
}
#ky-thuat .techlinks a small { flex: 1; }

@media (max-width: 1050px) {
  #ky-thuat .techlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  #ky-thuat .techlinks { grid-template-columns: 1fr; gap: 12px; }
}

@media (min-width: 1101px) {
  .section { padding-block: 76px; }
  .campaign-immersive .campaign-grid { display: flex; align-items: center; }
  .campaign-immersive .campaign-copy { padding-block: 62px; width: 52%; }
  .product-blend h1 { font-size: clamp(37px, 3.5vw, 49px); }
}

@media (max-width: 800px) {
  .campaign-immersive .campaign-grid { min-height: 0; padding-bottom: clamp(215px, 58vw, 335px); }
  .campaign-immersive .campaign-copy { padding-top: 32px; }
  .campaign-immersive .campaign-copy h1 { font-size: clamp(39px, 10vw, 58px); }
  .campaign-immersive .campaign-slogan { font-size: 17px; margin-bottom: 9px; }
  .campaign-immersive .campaign-copy > p:not(.campaign-slogan) { font-size: 15px; }
  .campaign-immersive .campaign-copy .btn { font-size: 12px; padding-inline: 13px; }
  .campaign-immersive:before {
    background: linear-gradient(180deg, #f0ede8fc 0%, #f0ede8f5 48%, #f0ede8e0 63%, #f0ede800 84%);
  }
  .campaign-immersive > .campaign-visual img { object-position: 65% center; }
  .heading h2 { margin-bottom: 12px; }
  #hyper .hyper-thumbnail { min-height: 230px; }
  #hyper .hyper-thumbnail-copy h3 { font-size: clamp(17px, 4.6vw, 22px); }
  #hyper .hyper-thumbnail-copy p, #hyper .hyper-thumbnail-copy .arrow { font-size: 12px; }
  #mau-hieu-ung .blend-stage, #son-go .blend-stage, #ve-toan-phu .blend-stage,
  #kenh-toan-phu .blend-stage { min-height: 0; padding-block: 32px clamp(235px, 62vw, 340px); }
  #mau-hieu-ung .blend-copy h2, #son-go .blend-copy h2, #ve-toan-phu .blend-copy h2,
  #kenh-toan-phu .blend-copy h2 { font-size: clamp(31px, 8vw, 44px); }
  .blend-copy > p { font-size: 15px; }
  .producthero.product-blend { min-height: 0; }
  .product-blend > div:not(.photo) { padding-bottom: calc(clamp(224px, 64vw, 306px) + 20px); }
  .product-blend .photo img { height: clamp(224px, 64vw, 306px); }
  .ux-facts dt { font-size: 12px; }
}

.ux-actions .tp-buy{white-space:normal}

#anh-thuc-te{scroll-margin-top:8rem}
@media(min-width:761px){#anh-thuc-te .w380-gallery{grid-template-columns:1.65fr 1fr 1fr}#anh-thuc-te .w380-gallery img{height:clamp(180px,24vw,320px)}}