/* "Thong tin tro choi" section ported from mp_game_home (src/components/ProductInfo.astro) */ /* NOTE: assets/js/resize.js overrides the font-size to (viewportWidth/1080)px for any viewport <= 1200px, which makes "rem" units unusable below that width (they'd resolve to a fraction of a pixel). Every size below is a fixed px value for that reason. */ .product-info { width: 100%; z-index: 20; padding: 16px; display: flex; justify-content: center; background-color: #a1a1a1; } @media (min-width: 1024px) { .product-info { min-height: 288px; padding: 24px 32px; } } .product-info__inner { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } @media (min-width: 1024px) { .product-info__inner { justify-content: center; gap: 40px; } } .product-info__logo-wrap { display: flex; min-width: fit-content; flex: 1 1 0%; align-items: center; justify-content: center; } /* !important + the #thong-tin-tro-choi id: footer-scoped.css keeps a leftover ".section.footer #thong-tin-tro-choi img" rule (shared with other pages) that outranks a plain class selector and would otherwise resize this logo. */ #thong-tin-tro-choi .product-info__logo { width: 96px !important; height: 96px !important; object-fit: contain; } @media (min-width: 768px) { #thong-tin-tro-choi .product-info__logo { width: 192px !important; height: 192px !important; } } @media (min-width: 1024px) { #thong-tin-tro-choi .product-info__logo { width: 200px !important; height: 200px !important; } } @media (min-width: 1280px) { #thong-tin-tro-choi .product-info__logo { width: 224px !important; height: 224px !important; } } .product-info__list { display: flex; width: fit-content; flex: 2 2 0%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; } @media (min-width: 1024px) { .product-info__list { width: 576px; gap: 16px; } } .product-info__row { display: flex; flex-direction: column; gap: 2px; text-align: left; } @media (min-width: 640px) { .product-info__row { flex-direction: row; align-items: baseline; gap: 12px; } } .product-info__label, .product-info__value { font-family: "Roboto", sans-serif; line-height: 1.4; color: #000000; font-size: 11px; } @media (min-width: 640px) { .product-info__label, .product-info__value { font-size: 13px; } } @media (min-width: 768px) { .product-info__label, .product-info__value { font-size: 14px; } } @media (min-width: 1024px) { .product-info__label, .product-info__value { font-size: 16px; } } @media (min-width: 1280px) { .product-info__label, .product-info__value { font-size: 20px; } } .product-info__label { font-weight: 600; } @media (min-width: 640px) { .product-info__label { font-weight: 400; width: 144px; flex-shrink: 0; white-space: nowrap; } } @media (min-width: 1024px) { .product-info__label { width: 192px; } } .product-info__value { flex: 1; }