/* Bright game artwork, a clear service directory, then a short ordering guide. */
.hero { min-height: clamp(395px, 32vw, 475px); background: #f1f7f3; align-items: center; }
.hero-visual { inset: 0 0 0 31%; }
.hero-art { width: 100%; max-width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 67% 40%; transform: scale(1.025); }
/* Light artwork fade keeps the real headline legible on the image's pale edge. */
.hero-shade { background: linear-gradient(90deg, #f1f7f3 0%, #f1f7f3cc 10%, #f1f7f300 43%); }
.hero-content { padding-block: 56px 62px; }
.hero h1 { color: var(--text); font-size: clamp(54px, 4.8vw, 76px); line-height: 1.06; max-width: 610px; }
.hero h1 span:last-child { color: var(--accent); }
.hero-content > p { color: var(--muted); font-size: 16px; line-height: 1.85; margin-top: 23px; max-width: 430px; }
.hero-actions { margin-top: 29px; gap: 25px; }
.guide-link { color: var(--accent); min-height: 44px; }
.hero-bottom-line { background: var(--quiet-border); }
.service-section { padding-top: 34px; }
.section-heading-row { margin-bottom: 22px; }
.slash-heading { font-size: 34px; gap: 0; }
.slash-heading::before { display: none; }
.service-directory { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.service-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.service-card:hover { transform: translateY(-4px); opacity: 1; border-color: #a2c5b2; box-shadow: 0 10px 22px #12372b0a; }
.service-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 23px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.service-state-label { color: var(--faint); font-size: 11px; text-align: right; }
.service-card.is-available .service-state-label { color: var(--accent); }
.service-card > img { width: 100%; height: 157px; object-fit: cover; object-position: 50% 40%; border-radius: 5px; margin-block: 10px 16px; }
.service-card.account-card > img { object-fit: cover; object-position: 50% 40%; border-radius: 5px; height: 157px; }
.service-card[data-catalog-service="mo-ruong"] > img { object-position: 78% 35%; }
.service-card[data-catalog-service="ve-le"] > img { object-position: 67% 40%; }
.service-card h3 { font: 600 29px/1.2 var(--font-display); color: var(--text); }
.service-card > p { color: var(--muted); font-size: 12px; line-height: 1.85; margin-top: 10px; margin-bottom: 19px; }
.service-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--quiet-border); padding-top: 15px; margin-top: auto; min-height: 44px; }
.service-card-foot > strong { font-size: 13px; font-weight: 500; color: var(--accent); }
.service-card-foot .icon { width: 18px; height: 18px; color: var(--accent); }
.service-help-row { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 20px 25px; color: var(--muted); font-size: 12px; }
.service-help-row > a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); white-space: nowrap; min-height: 44px; }
.service-help-row .icon { width: 16px; height: 16px; }
.getting-started { grid-template-columns: minmax(180px,1fr) minmax(0,3fr); padding-block: 25px 30px; margin: 0; border-top: 1px solid var(--quiet-border); }
.getting-started-title h2 { font: 600 25px/1.25 var(--font-display); }
.getting-started-title .guide-link { font-size: 12px; margin-top: 2px; }
.quick-steps { gap: 24px; }
.quick-steps strong { font-size: 12px; font-weight: 600; }
.quick-steps small { font-size: 11px; line-height: 1.7; }
.step-marker { width: 35px; height: 35px; background: var(--surface); font-size: 12px; font-weight: 600; }
.faq-section { grid-template-columns: minmax(180px,1fr) minmax(0,3fr); padding-block: 28px 36px; }
.faq-section > div > p { font-size: 12px; max-width: 25ch; line-height: 1.8; }
.faq-section h2 { font-size: 25px; }
.faq-list summary, .faq-list details > p { font-size: 12px; }
.footer-links a { color: var(--muted); font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1100px) {
  .hero-visual { left: 29%; }
  .hero h1 { font-size: 59px; }
  .hero-content > p { max-width: 340px; font-size: 14px; }
  .service-directory { gap: 15px; }
  .service-card { padding: 17px; }
  .service-card-top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .service-card > img, .service-card.account-card > img { height: 138px; }
}
@media (max-width: 900px) {
  .hero { min-height: 385px; }
  .hero h1 { font-size: 54px; max-width: 450px; }
  .hero-content { padding-block: 44px; }
  .hero-visual { left: 22%; }
  .hero-shade { background: linear-gradient(90deg, #f1f7f3 0%, #f1f7f3c9 29%, #f1f7f300 70%); }
  .hero-actions { gap: 17px; }
  .service-directory { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .service-card-top { flex-direction: row; align-items: center; }
  .service-card > img, .service-card.account-card > img { height: 163px; }
  .service-card > p { max-width: 31ch; }
  .getting-started { display: block; padding-block: 25px 30px; }
  .quick-steps { margin-top: 17px; }
  .faq-section { grid-template-columns: 1fr 2.4fr; }
}
@media (max-width: 650px) {
  .hero { min-height: 0; align-items: end; }
  .hero-visual { inset: 0 0 auto; height: 280px; }
  .hero-art { object-position: 67% 40%; }
  .hero-shade { background: linear-gradient(0deg, #f1f7f3 0%, #f1f7f300 46%); }
  .hero-content { padding-block: 245px 29px; }
  .hero h1 { font-size: clamp(41px, 10.7vw, 56px); line-height: 1.05; max-width: 100%; letter-spacing: -.4px; }
  .hero-content > p { font-size: 13px; line-height: 1.8; margin-top: 15px; max-width: 355px; }
  .hero-actions { gap: 19px; margin-top: 21px; align-items: center; }
  .hero-cta { min-height: 48px; padding-inline: 16px; font-size: 13px; gap: 8px; }
  .hero-actions .guide-link { font-size: 12px; gap: 5px; }
  .service-section { padding-top: 25px; }
  .section-heading-row { margin-bottom: 16px; gap: 14px; }
  .slash-heading { font-size: 28px; }
  .service-directory { gap: 12px; }
  .service-card { padding: 15px 13px; border-radius: 7px; }
  .service-card-top { flex-direction: column; align-items: flex-start; gap: 3px; }
  .service-state-label { text-align: left; }
  .service-card > img, .service-card.account-card > img { height: 115px; margin-block: 10px 13px; }
  .service-card h3 { font-size: 25px; }
  .service-card > p { font-size: 11px; line-height: 1.85; margin-top: 8px; margin-bottom: 14px; }
  .service-card-foot { padding-top: 12px; gap: 5px; }
  .service-card-foot > strong { font-size: 12px; }
  .service-card-foot .icon { width: 15px; height: 15px; }
  .service-help-row { display: block; font-size: 12px; padding-block: 19px 22px; }
  .service-help-row > a { margin-top: 6px; }
  .getting-started { padding-block: 24px 27px; }
  .getting-started-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; }
  .getting-started-title h2 { font-size: 24px; }
  .getting-started-title .guide-link { margin-top: 0; }
  .quick-steps { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .quick-steps strong { font-size: 12px; }
  .quick-steps small { font-size: 12px; margin-top: 2px; }
  .quick-steps li { gap: 13px; }
  .faq-section { display: block; padding-block: 25px 30px; }
  .faq-section > div > p { max-width: none; }
  .faq-list { margin-top: 15px; }
  .faq-list summary { min-height: 51px; font-size: 12px; }
  .faq-list details > p { padding-right: 7px; font-size: 12px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 39px; }
  .hero-actions { gap: 13px; }
  .hero-cta { font-size: 12px; padding-inline: 13px; }
  .hero-actions .guide-link { font-size: 11px; }
  .slash-heading { font-size: 27px; }
  .service-directory { gap: 10px; }
  .service-card { padding: 13px 11px; }
  .service-card h3 { font-size: 24px; }
  .service-card > img, .service-card.account-card > img { height: 101px; }
  .service-card-foot > strong { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .service-card:hover { transform: none; } }
.motion-paused .service-card:hover { transform: none; }