/* ==========================================================================
   demo-qq79.css — Kiểu của trang chủ mẫu (giống qq79.li).
   Chép từ Theme Options → Custom CSS của qq79.li (theme 33game, TN CMS), trừ phần banner
   (đã có trong blocks.css) và phần tác giả. Một số quy tắc nhận ảnh mẫu theo tên tệp
   (qq79-km-*, qq79-co-gai-toan-than, qq79-app-dien-thoai, qq79-ncc-*): ảnh khác không bị ảnh hưởng.
   ========================================================================== */
/* qq79.li: larger type site-wide (theme defaults 12/13/14/16/20 px felt small) */
:root {
  --fs-nav: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 17px;
  --fs-lg: 21px;
}

/* qq79.li: wider editorial paragraphs placed directly in a Page Builder section */
.g33-sec > .g33-text--default,
.g33-sec > .pb-editor-render-marker > .g33-text--default {
  /* full row each (max-width would let two 78ch paragraphs share a flex line); line length via padding */
  flex: 0 0 100%; max-width: none; box-sizing: border-box;
  padding-right: max(0px, calc(100% - 78ch));
  color: var(--c-text); line-height: 1.75;
}

/* qq79.li: promotion cards (/category/khuyen-mai) show the 1020x400 promo art (51:20);
   the theme's 59:20 frame would squash it. Placeholders use the same ratio so rows align. */
.promo-card__media { aspect-ratio: 51 / 20; }
img.promo-card__media { display: block; width: 100%; height: auto; object-fit: cover; }

/* qq79.li: text + illustration sections ("QQ79 là gì?"): a section with a direct image child becomes
   two columns on desktop (text left, image right, button top-right) and one column below 1024 px. */
.g33-sec:has(> figure.g33-media) {
  display: grid;
  /* image column 300-330 px: about as tall as the text block at every desktop width */
  grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 330px);
  column-gap: var(--s-6);
  row-gap: var(--s-2);
  /* heading, then the text rows, then a 1fr filler that absorbs the image height
     (otherwise the spanned text rows stretch and the paragraphs drift apart) */
  grid-template-rows: auto auto auto auto 1fr;
  align-items: start;
}
/* one auto row per paragraph + the 1fr filler (the rule above covers 3 paragraphs) */
.g33-sec:has(> figure.g33-media):has(> p:nth-of-type(4)) { grid-template-rows: auto repeat(4, auto) 1fr; }
.g33-sec:has(> figure.g33-media):has(> p:nth-of-type(5)) { grid-template-rows: auto repeat(5, auto) 1fr; }
.g33-sec:has(> figure.g33-media):has(> p:nth-of-type(6)) { grid-template-rows: auto repeat(6, auto) 1fr; }
.g33-sec:has(> figure.g33-media) > .pb-block--heading { grid-column: 1; grid-row: 1; margin-right: 0; }
.g33-sec:has(> figure.g33-media) > .g33-btn { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
.g33-sec:has(> figure.g33-media) > .g33-text--default { grid-column: 1; padding-right: 0; }
.g33-sec:has(> figure.g33-media) > figure.g33-media { grid-column: 2; grid-row: 2 / -1; align-self: center; margin: 0; }
.g33-sec:has(> figure.g33-media) .g33-media__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
@media (max-width: 1199px) {
  .g33-sec:has(> figure.g33-media) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .g33-sec:has(> figure.g33-media) > .g33-btn { grid-column: 1; grid-row: 2; justify-self: start; }
  .g33-sec:has(> figure.g33-media) > figure.g33-media { grid-column: 1; grid-row: auto; margin-top: var(--s-3); max-width: 520px; }
  /* tall (portrait) art: cap the height so it does not dominate tablets */
  .g33-sec:has(> figure.g33-media) .g33-media__img { width: auto; max-width: 100%; max-height: 460px; }
}

/* qq79.li: quick-facts band never wider than the page. The theme's 1fr tracks take the content's
   min width and the value line is width:max-content, so long values pushed the page sideways
   (7 px at 1200 px with the theme's type, more with the larger type above). */
.g33-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.g33-band .jp-list { grid-template-columns: minmax(0, 1fr); }
.g33-band .jp-list__item { min-width: 0; }
.g33-band .jp-list__item .g33-text__line + .g33-text__line { max-width: 100%; }
@media (max-width: 1199px) { .g33-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 767px) { .g33-band { grid-template-columns: minmax(0, 1fr); } }

/* qq79.li: homepage promo rail with the real 51:20 promotion cards (/uploads/…/qq79-km-*.webp).
   The game-tile frame is 1:1, which would cut away the card text: keep 51:20 and show 3 cards per
   row from 1200 px, 2 below that and one (with the next one peeking) on phones. */
.tile-grid--rail:has(img[src*="/qq79-km-"]) > * { flex-basis: calc((100% - var(--s-4) * 2) / 3); }
.game-tile .g33-media__img[src*="/qq79-km-"] { aspect-ratio: 51 / 20; display: block; width: 100%; height: auto; }
@media (max-width: 1199px) {
  .tile-grid--rail:has(img[src*="/qq79-km-"]) > * { flex-basis: calc((100% - var(--s-4)) / 2); }
}
@media (max-width: 767px) {
  .tile-grid--rail:has(img[src*="/qq79-km-"]) > * { flex-basis: 86%; }
}

/* qq79.li: links band girl — the middle column holds only the full-length cut-out
   (qq79-co-gai-toan-than.webp). She stands on the band's bottom edge and rises above its top;
   the thigh-level cut of the source fades out. Below 1200 px she takes a full-width row on top. */
.g33-band > .g33-col:has(img[src*="qq79-co-gai-toan-than"]) { position: relative; align-self: stretch; min-height: 340px; }
.g33-band > .g33-col:has(img[src*="qq79-co-gai-toan-than"]) > figure.g33-media {
  position: absolute; left: 0; right: 0; top: -56px; bottom: calc(-1 * var(--s-5)); margin: 0;
  display: flex; justify-content: center; align-items: flex-end; pointer-events: none;
}
.g33-band img.g33-media__img[src*="qq79-co-gai-toan-than"] {
  height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom;
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .5));
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, #000 86%, transparent);
}
@media (max-width: 1199px) {
  .g33-band > .g33-col:has(img[src*="qq79-co-gai-toan-than"]) { grid-column: 1 / -1; order: -1; min-height: 400px; }
  .g33-band > .g33-col:has(img[src*="qq79-co-gai-toan-than"]) > figure.g33-media { top: 0; bottom: 0; }
}
@media (max-width: 767px) {
  .g33-band > .g33-col:has(img[src*="qq79-co-gai-toan-than"]) { min-height: 340px; }
}

/* qq79.li: app block phone (qq79-app-dien-thoai.webp, 566x972 transparent): 240 px wide on desktop;
   the theme hides the art below 992 px, here it shows under the text at 200 px instead. */
.g33-app .app-block__art img[src*="qq79-app-dien-thoai"] { width: 240px; height: auto; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .45)); }
@media (max-width: 991px) {
  .g33-app .app-block__art:has(img[src*="qq79-app-dien-thoai"]) { display: grid; margin-top: var(--s-4); }
  .g33-app .app-block__art img[src*="qq79-app-dien-thoai"] { width: 200px; }
}

/* qq79.li: provider logo strip — 26 small logos split from the 1qq79.com footer sprite
   (/uploads/…/qq79-ncc-*.webp, 14–54 px high). Native size, never upscaled (the theme sets 190 px). */
.g33-strip:has(img[src*="/qq79-ncc-"]) { gap: var(--s-5) var(--s-6); }
.g33-strip img.g33-logo[src*="/qq79-ncc-"] { width: auto; height: auto; max-width: 96px; max-height: 44px; }
@media (max-width: 767px) {
  .g33-strip:has(img[src*="/qq79-ncc-"]) { gap: var(--s-4) var(--s-5); }
  .g33-strip img.g33-logo[src*="/qq79-ncc-"] { max-width: 72px; max-height: 36px; }
}