/* Quick News — port from Quick GO globals.css */
:root { --bronze: var(--cms-primary, #D4A017); }
.qn { --qn-accent: var(--cms-primary, #D4A017); --qn-head: var(--qn-accent); --qn-icon: var(--qn-accent); --qn-panel: transparent; --qn-head-bg: color-mix(in srgb, var(--cms-primary, #D4A017) 28%, #fff); --qn-title: var(--cms-widget-link, var(--cms-ink, #16181C)); --qn-title-hover: var(--cms-widget-link-hover, var(--cms-link-hover, #D4A017)); --qn-meta: color-mix(in srgb, var(--cms-muted, #3D434C) 72%, #8b919a); margin: 12px 0 22px; color: inherit; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; container-type: inline-size; container-name: qn; }
.qn a { color: inherit; }
.qn-h { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; background: transparent; border: 0; border-bottom: 1px solid #ececec; outline: none; position: relative; z-index: auto; }
.qn-h h2 { margin: 0 auto -1px 0; padding: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--qn-head); background: transparent; line-height: 1.15; border: 0; box-shadow: 0 3px 0 var(--qn-head); width: max-content; max-width: 100%; }
.qn-tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; padding-bottom: 8px; }
.qn-tabs button { margin: 0; height: auto; width: auto; padding: 0; border: 0; background: none; color: var(--qn-meta); font-size: 13px; }
.qn-tabs button.on { color: var(--qn-head); font-weight: 700; }
.qn-pager { display: flex; gap: 6px; margin-left: auto; padding-bottom: 4px; }
.qn-pager button { width: 28px; height: 28px; margin: 0; padding: 0; background: transparent; border: 1px solid #d8dde4; color: #6b7280; border-radius: 3px; }
.qn-pager button:disabled { opacity: .35; }
.qn-swatch { display: flex; gap: 6px; flex-wrap: wrap; }
.qn-swatch button { width: 22px; height: 22px; min-width: 22px; margin: 0; padding: 0; border: 1px solid #d0d5dd; border-radius: 4px; }
.qn-swatch button.on { outline: 2px solid #111; outline-offset: 1px; }
.qn-swatch button.is-clear { background: repeating-conic-gradient(#d0d5dd 0% 25%, #fff 0% 50%) 50% / 10px 10px; }
.qn-card, .qn-thumb, .qn-story, .qn-vid, .qn-t, .qn-ttl { color: inherit; text-decoration: none; }
.qn-media { position: relative; display: block; overflow: hidden; }
.qn-media img, .qn-ph { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 120px; background: #2a2e35; }
.qn-thumb .qn-media img, .qn-thumb .qn-ph,
.qn-rail-row .qn-media img, .qn-rail-row .qn-ph,
.qn-row .qn-media img, .qn-row .qn-ph,
.qn-box .qn-media img, .qn-box .qn-ph { min-height: 0; }
.qn-media .qn-cat { position: absolute; left: 8px; bottom: 8px; z-index: 1; }
.qn-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); }
.qn-play::after { content: ""; position: absolute; left: 17px; top: 12px; border: 8px solid transparent; border-left: 12px solid #fff; }
.qn-card { position: relative; display: block; overflow: hidden; border-radius: 2px; background: #111; min-height: 120px; }
.qn-card.is-ov .qn-media, .qn-card.is-ov img, .qn-card.is-ov .qn-ph { min-height: 180px; height: 100%; }
.qn-card.is-ov > .qn-cat { position: absolute; top: 12px; left: 12px; z-index: 2; }
.qn-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; pointer-events: none; }
.qn-cap strong { display: block; font-size: 16px; line-height: 1.3; }
.qn-cap p, .qn-ex { margin: 6px 0 0; font-size: 13px; line-height: 1.5; opacity: .88; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qn-cat { display: inline-block; background: var(--cms-secondary, #1B1E23); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; }
.qn-date, .qn-meta { display: block; font-size: 12px; color: var(--qn-meta); margin: 4px 0 6px; }
.qn-t { display: block; font-size: 20px; line-height: 1.3; font-weight: 750; margin: 8px 0 4px; color: var(--qn-title); }
.qn a.qn-thumb:hover .qn-ttl,
.qn a.qn-thumb:hover strong,
.qn a.qn-t:hover,
.qn a:hover .qn-t,
.qn a:hover .qn-ttl,
.qn a.qn-box:hover .qn-t,
.qn a.qn-row:hover .qn-t,
.qn a.qn-story:hover .qn-t,
.qn a.qn-card:hover .qn-cap .qn-ttl,
.qn a.qn-card:hover .qn-cap strong,
.qn a.qn-vid:hover .qn-ttl,
.qn a.qn-vid:hover strong,
.qn a.qn-rail-row:hover .qn-ttl,
.qn a.qn-rail-row:hover strong {
  color: var(--qn-title-hover);
}
.qn-more { display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 99px; background: var(--qn-accent); color: #fff; font-size: 12px; font-weight: 700; }
.qn-story { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.qn-story .qn-media { min-height: 170px; }
.qn-story .qn-t { font-size: 18px; }
.qn-slider3, .qn-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qn-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 520px; width: 100%; }
.qn-mosaic .qn-card:first-child { grid-row: 1 / span 2; }
.qn-mosaic .qn-card:nth-child(2) { grid-column: 2 / span 2; }
.qn-mosaic .qn-card.is-ov { min-height: 0; }
.qn-mosaic .qn-card.is-ov .qn-media { position: absolute; inset: 0; min-height: 0; }
.qn-mosaic .qn-card.is-ov .qn-media img, .qn-mosaic .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-mosaic .qn-card:first-child .qn-cap { padding: 48px 18px 18px; }
.qn-mosaic .qn-card:first-child .qn-cap strong { font-size: 28px; font-weight: 700; }
.qn-mosaic .qn-card:nth-child(2) .qn-cap strong { font-size: 20px; }
.qn-mosaic .qn-cap .qn-date { color: rgba(255,255,255,.92); margin: 0 0 6px; }
.qn-promo { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(140px, 1.15fr) minmax(140px, 1.15fr) minmax(120px, 1fr); gap: 10px; min-height: 560px; width: 100%; }
.qn-promo .qn-card.is-ov { min-height: 140px; height: 100%; }
.qn-promo > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; min-height: 280px; }
.qn-promo .qn-card.is-ov .qn-media { position: absolute; inset: 0; min-height: 0; }
.qn-promo .qn-card.is-ov .qn-media img, .qn-promo .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-promo > :nth-child(1) .qn-cap { padding: 48px 18px 18px; }
.qn-promo > :nth-child(1) .qn-cap strong { font-size: 26px; font-weight: 700; }
.qn-promo-hero { position: relative; min-height: 0; height: 100%; overflow: hidden; border-radius: 2px; }
.qn-promo-hero .qb-slides {
  /* Trượt bằng transform trên cả dải: dải KHÔNG được cắt nội dung (overflow: visible),
     phần thừa do .qn-promo-hero (overflow: hidden) che — nếu cắt ở đây thì tin 2, 3 bị ẩn trắng. */
  display: flex; height: 100%; width: 100%; overflow: visible; scroll-snap-type: none;
  transition: transform .45s ease; will-change: transform;
}
.qn-promo-hero .qb-slides > * { flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%; min-height: 100%; max-width: 100%; }
.qn-promo-hero .qn-card.is-ov { position: relative; min-height: 100%; height: 100%; }
.qn-promo-hero .qn-card.is-ov .qn-media { position: absolute; inset: 0; min-height: 0; }
.qn-promo-hero .qn-card.is-ov .qn-media img, .qn-promo-hero .qn-card.is-ov .qn-ph {
  width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block;
}
.qn-promo-hero .qb-sl-nav {
  opacity: 0; pointer-events: none;
  background: rgba(255,255,255,.92); color: #1b1e23;
  transition: opacity .18s ease, transform .18s ease;
}
.qn-promo-hero:hover .qb-sl-nav,
.qn-promo-hero:focus-within .qb-sl-nav,
.qn-promo-hero.is-hover .qb-sl-nav { opacity: 1; pointer-events: auto; }
.qn-promo-hero .qb-sl-nav:hover { transform: translateY(-50%) scale(1.06); }
.qn-promo-hero .qb-sl-dots { opacity: .9; }
.ux-canvas .qn-promo-hero,
.ux-canvas .qn-promo-hero .qb-sl-nav,
.ux-canvas .qn-promo-hero .qb-sl-dots { pointer-events: auto; }
.qn-trending, .qn-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }
.qn-mag-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 18px; }
.qn-mag-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.qn-thumbs { display: flex; flex-direction: column; gap: 14px; }
.qn-thumb { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; color: inherit; text-decoration: none; min-width: 0; }
.qn img { max-width: none; }
.qn-thumb img, .qn-thumb .qn-ph, .qn-thumb .qn-media img {
  width: 92px; height: 70px; min-height: 70px; max-width: none; object-fit: cover;
}
.qn-thumb-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qn-thumb .qn-ttl, .qn-thumb strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.35; font-weight: 650; color: var(--qn-title); }
.qn-thumb.is-rank { grid-template-columns: 86px 1fr; align-items: center; position: relative; padding-left: 16px; gap: 12px; }
.qn-num { width: 26px; height: 26px; border-radius: 50%; background: var(--cms-primary, #D4A017); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.qn-thumb.is-rank .qn-num {
  position: absolute; left: 0; top: 10px; width: 34px; height: 34px; font-size: 15px; z-index: 2;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cms-primary, #D4A017) 40%, transparent);
}
.qn-thumb.is-rank .qn-media { width: 86px; height: 64px; min-height: 64px; border-radius: 2px; }
.qn-thumb.is-rank .qn-media img, .qn-thumb.is-rank .qn-ph { width: 86px; height: 64px; min-height: 64px; }
.qn-thumb.is-rank .qn-ttl, .qn-thumb.is-rank strong {
  font-size: 15px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qn-thumb.is-rank .qn-date { margin: 6px 0 0; display: flex; align-items: center; gap: 4px; }
.qn-thumbs.is-rank { gap: 18px; padding-left: 8px; }
.qn[data-layout="ranked"].is-notch-panel .qn-notch-body {
  background: var(--qn-panel, #42c763);
}
.qn[data-layout="ranked"] .qn-thumb-txt { display: flex; min-width: 0; }
.qn-thumbs.is-tab { gap: 16px; }
.qn-thumbs.is-tab .qn-thumb { grid-template-columns: 86px 1fr; gap: 12px; }
.qn-thumbs.is-tab .qn-media, .qn-thumbs.is-tab .qn-media img, .qn-thumbs.is-tab .qn-ph { width: 86px; height: 64px; min-height: 64px; border-radius: 2px; }
.qn-thumbs.is-tab .qn-ttl, .qn-thumbs.is-tab strong { font-size: 15px; font-weight: 600; }
.qn-section-feat { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; margin-bottom: 14px; }
.qn-section-more { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qn-sports-feat { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; margin-bottom: 18px; align-items: start; }
.qn-sports-feat .qn-media { min-height: 280px; border-radius: 6px; }
.qn-sports-feat .qn-t { font-size: 22px; margin: 0 0 8px; }
.qn-sports-more { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.qn-sports-more .qn-thumb { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
.qn.is-dark { background: #16181d; color: #e8eaee; padding: 16px 18px 20px; border-radius: 12px; overflow: visible; }
.qn.is-dark .qn-h { background: transparent; border-bottom-color: rgba(255,255,255,.08); margin: 0 0 16px; }
.qn.is-dark .qn-tabs button { color: #8b939c; }
.qn.is-dark .qn-tabs button.on { color: var(--qn-head); }
.qn.is-dark .qn-t, .qn.is-dark .qn-ttl, .qn.is-dark .qn-thumb strong, .qn.is-dark .qn-vid strong, .qn.is-dark .qn-rail-row strong { color: #fff; }
.qn.is-dark .qn-ex { color: #c5c9d0; }
.qn.is-dark .qn-pager button { background: #2a2f38; border-color: #3a404a; color: #d5d8de; }
.qn.is-dark .qn-meta, .qn.is-dark .qn-date { color: #9aa0a8; }
.qn.is-dark .qn-sports-feat .qn-t { font-size: 24px; font-weight: 800; line-height: 1.25; }
.qn.is-dark .qn-thumb .qn-media { border-radius: 4px; }
.qn.is-mint { background: color-mix(in srgb, var(--cms-success, #4F7A45) 12%, #fff); padding: 18px; border-radius: 6px; }
.qn.is-mint .qn-h h2 { color: var(--qn-head); }
.qn.is-blush { background: color-mix(in srgb, var(--cms-alert, #C24A2A) 10%, #fff); padding: 0 16px 18px; border-radius: 20px; overflow: visible; }
.qn.is-gold { background: var(--cms-accent, #E8C547); padding: 18px 18px 22px; border-radius: 8px; }
.qn.is-panel { background: var(--qn-panel); border-radius: 16px; padding: 14px 16px 18px; }
.qn.is-star-panel {
  background: var(--qn-panel, #e8edf3);
  color: #1B1E23;
  border-radius: 20px;
  padding: 0 18px 20px;
  overflow: hidden;
  isolation: isolate;
}
.qn.is-star-panel .qn-t, .qn.is-star-panel .qn-ttl, .qn.is-star-panel .qn-thumb strong { color: #1B1E23; }
.qn.is-star-panel .qn-ex { color: #5f6773; opacity: 1; }
.qn.is-star-panel .qn-meta, .qn.is-star-panel .qn-date { color: #8b919a; }
.qn.is-star-panel .qn-sports,
.qn.is-star-panel .qn-spot,
.qn.is-star-panel .qn-split,
.qn.is-star-panel .qn-videos,
.qn.is-star-panel .qn-mag-feat { background: transparent; border-radius: 0; padding: 0; }
.qn.is-star-panel.is-ink { color: #e8eaee; background: var(--qn-panel, #1B1E23); }
.qn.is-star-panel.is-ink .qn-t, .qn.is-star-panel.is-ink .qn-ttl, .qn.is-star-panel.is-ink .qn-thumb strong { color: #fff; }
.qn.is-star-panel.is-ink .qn-ex { color: #c5c9d0; }
.qn-h.is-star {
  display: flex; align-items: center; overflow: hidden; border: 0; border-bottom: 0;
  background: var(--qn-head-bg, #F8DCC8);
  border-radius: 20px 20px 0 0; padding: 14px 16px 14px 72px;
  position: relative; min-height: 52px; margin: 0 -18px 16px; z-index: 1;
}
.qn-h.is-star h2 {
  background: transparent; color: var(--cms-ink, #16181C); padding: 0; box-shadow: none;
  font-size: 20px; font-weight: 800; width: auto; margin: 0; line-height: 1.2;
}
.qn-h.is-star .qn-tabs { padding-bottom: 0; }
.qn-h.is-star .qn-tabs button { color: #8a9099; }
.qn-h.is-star .qn-tabs button.on { color: var(--qn-head); }
.qn-h.is-star .qn-xem {
  margin-left: auto; background: #fff; color: var(--cms-widget-link, #1B1E23); border-radius: 10px;
  padding: 7px 14px; font-size: 13px; font-weight: 700;
  box-shadow: 0 1px 6px rgba(15, 23, 42, .1);
}
.qn.is-star-panel.is-ink .qn-h.is-star h2 { color: #fff; }
.qn.is-special-panel {
  background: var(--qn-panel, var(--cms-accent, var(--cms-primary, #D4A017)));
  color: #111;
  border-radius: 22px;
  padding: 16px 18px 18px;
  overflow: hidden;
}
.qn.is-special-panel.is-ink { color: #e8eaee; background: var(--qn-panel, #1B1E23); }
.qn.is-special-panel.is-ink .qn-t,
.qn.is-special-panel.is-ink .qn-ttl,
.qn.is-special-panel.is-ink .qn-thumb strong,
.qn.is-special-panel.is-ink .qn-vid strong,
.qn.is-special-panel.is-ink .qn-rail-row strong { color: #fff; }
.qn.is-special-panel .qn-sports,
.qn.is-special-panel .qn-spot,
.qn.is-special-panel .qn-split,
.qn.is-special-panel .qn-videos,
.qn.is-special-panel .qn-mag-feat { background: transparent; border-radius: 0; padding: 0; }
.qn-h.is-special {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  background: transparent; border: 0; border-bottom: 0; margin: 0 0 14px; padding: 2px 0;
}
.qn-h.is-special h2 {
  background: transparent; color: #111; box-shadow: none; padding: 0; margin: 0;
  font-size: 22px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; width: auto; line-height: 1.1;
}
.qn.is-special-panel.is-ink .qn-h.is-special h2 { color: #fff; }
.qn-h.is-special .qn-tabs { padding-bottom: 0; margin-left: 8px; }
.qn-h.is-special .qn-xem {
  margin-left: auto; background: #fff; color: var(--cms-widget-link, #1B1E23); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.qn-special-ic {
  position: relative; width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center; color: var(--qn-icon, var(--cms-primary, #D4A017));
}
.qn-special-ic .cms-nav-font, .qn-special-ic i, .qn-special-ic span:not(.qn-special-star) { font-size: 28px; color: var(--qn-icon, var(--cms-primary, #D4A017)); }
.qn-special-star {
  position: absolute; left: -1px; bottom: -1px; width: 15px; height: 15px;
  background: var(--cms-alert, #C24A2A);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.qn.is-special-panel .qn-box, .qn.is-special-panel .qn-story {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
  padding-bottom: 10px;
}
.qn.is-special-panel .qn-box .qn-media, .qn.is-special-panel .qn-story .qn-media {
  border-radius: 16px 16px 0 0; min-height: 0; aspect-ratio: 16 / 10;
}
.qn.is-special-panel .qn-box-txt, .qn.is-special-panel .qn-story .qn-t { padding: 0 12px; }
.qn.is-special-panel .qn-box .qn-t, .qn.is-special-panel .qn-story .qn-t {
  font-size: 15px; font-weight: 700; margin: 10px 0 4px; color: var(--qn-title);
}
.qn.is-special-panel .qn-story .qn-date, .qn.is-special-panel .qn-story .qn-cat, .qn.is-special-panel .qn-story .qn-meta { display: none; }
.qn-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 16px 0 2px; }
.qn-dots button {
  width: 8px; height: 8px; min-width: 8px; margin: 0; padding: 0; border: 0;
  border-radius: 99px; background: #F6E27A;
}
.qn-dots button.on { background: var(--cms-alert, #C24A2A); width: 18px; }
.qn.is-notch-panel {
  background: transparent;
  color: #fff;
  border-radius: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}
.qn-h.is-notch {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  border: 0;
  border-bottom: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  flex-wrap: nowrap;
  min-width: 0;
}
.qn-notch-lab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 16px 8px;
  color: var(--qn-panel, #42c763);
  background: transparent;
  min-width: 0;
  flex: 0 1 auto;
}
.qn-h.is-notch h2 {
  background: transparent;
  color: var(--qn-panel, #42c763) !important;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.02em;
  text-transform: uppercase;
  width: auto;
  max-width: 100%;
  line-height: 1;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qn-h.is-notch h2.qn-quiz-word {
  font-family: "Arial Black", Impact, "Arial", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
}
.qn-quiz-q { position: relative; display: inline-block; margin-right: 1px; }
.qn-quiz-qmark {
  position: absolute;
  bottom: 4px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--qn-panel, #42c763);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: Inter, Arial, sans-serif;
  letter-spacing: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  border: 1px solid #fff;
}
.qn-notch-ic {
  width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--qn-panel, #42c763);
  color: var(--qn-panel, #42c763); display: grid; place-items: center;
  font-size: 15px; font-weight: 800; margin: 0; flex: 0 0 30px; background: #fff;
}
.qn-notch-ic .cms-nav-font, .qn-notch-ic i { font-size: 16px; color: var(--qn-panel, #42c763); }
.qn-notch-tab {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: var(--qn-panel, #42c763);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 12px 16px 12px 14px;
}
.qn.is-notch-panel:not(.has-more) .qn-notch-tab { flex: 1 1 auto; min-width: 80px; min-height: 48px; }
.qn-notch-tab::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -24px;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at top left, transparent 24px, var(--qn-panel, #42c763) 24.5px);
  pointer-events: none;
}
.qn-h.is-notch .qn-xem {
  margin: 0;
  background: #fff;
  color: var(--cms-widget-link, var(--cms-ink, #16181C));
  border: 0;
  border-radius: 8px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  white-space: nowrap;
}
.qn-notch-body {
  background: var(--qn-panel, #42c763);
  border-radius: 24px 0 24px 24px;
  padding: 20px;
  min-width: 0;
  overflow: visible;
}
@container qn (max-width: 300px) {
  .qn-h.is-notch h2 { font-size: 16px; }
  .qn-notch-lab { flex: 0 0 auto; padding: 0 4px 10px 2px; }
  .qn-notch-tab { flex: 1 1 auto; }
  .qn-notch-body { padding: 14px 12px; }
  .qn-thumb, .qn-thumb.is-rank, .qn-rail-row {
    grid-template-columns: 64px minmax(0, 1fr);
    padding-left: 12px;
    gap: 8px;
  }
  .qn-thumb.is-rank .qn-media, .qn-thumb.is-rank .qn-media img, .qn-thumb.is-rank .qn-ph,
  .qn-thumb .qn-media, .qn-thumb .qn-media img, .qn-thumb .qn-ph {
    width: 64px; height: 48px; min-height: 48px;
  }
  .qn[data-layout="quiz"] .qn-rail-row .qn-media,
  .qn[data-layout="quiz"] .qn-rail-row .qn-media img,
  .qn[data-layout="quiz"] .qn-rail-row .qn-ph { width: 56px; height: 56px; min-height: 56px; }
}
@container qn (max-width: 280px) {
  .qn[data-layout="ranked"] .qn-thumb.is-rank {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
    align-items: start;
  }
  .qn[data-layout="ranked"] .qn-thumb.is-rank .qn-media,
  .qn[data-layout="ranked"] .qn-thumb.is-rank .qn-media img,
  .qn[data-layout="ranked"] .qn-thumb.is-rank .qn-ph {
    width: 100%; height: auto; min-height: 72px; aspect-ratio: 16 / 10;
  }
  .qn[data-layout="ranked"] .qn-thumb.is-rank .qn-num { left: 8px; top: 8px; }
}
.qn.is-notch-panel .qn-rail-row strong,
.qn.is-notch-panel .qn-rail-row .qn-ttl,
.qn.is-notch-panel .qn-thumb strong,
.qn.is-notch-panel .qn-thumb .qn-ttl,
.qn.is-notch-panel .qn-thumb.is-rank strong,
.qn.is-notch-panel .qn-t { color: #fff; }
.qn.is-notch-panel .qn-date,
.qn.is-notch-panel .qn-meta { color: rgba(255,255,255,.78); }
.qn.is-notch-panel .qn-thumb.is-rank .qn-num { background: var(--cms-primary, #D4A017); color: #1a1408; }
.qn-rail { display: flex; flex-direction: column; gap: 0; }
.qn-rail-row {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center;
  padding: 12px 4px; text-decoration: none; color: inherit;
}
.qn-rail-row.has-line { border-bottom: 1px solid rgba(255,255,255,.35); }
.qn-rail-row .qn-media { width: 72px; height: 52px; min-height: 52px; border-radius: 6px; }
.qn-rail-row .qn-media img, .qn-rail-row .qn-ph { min-height: 52px; height: 52px; }
.qn-rail-row strong { font-size: 14px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qn-rail-row .qn-play { width: 26px; height: 26px; left: 6px; top: 6px; }
.qn-rail-row .qn-play::after { left: 9px; top: 6px; border-width: 5px; border-left-width: 8px; }
.qn[data-layout="quiz"] .qn-rail { gap: 20px; }
.qn[data-layout="quiz"] .qn-rail-row {
  grid-template-columns: 80px 1fr; gap: 16px; padding: 4px; margin-left: -4px;
  transition: transform .2s ease, background-color .2s ease;
}
.qn[data-layout="quiz"] .qn-rail-row.has-line { border-bottom: 0; }
.qn[data-layout="quiz"] .qn-rail-row:hover { transform: translateX(4px); background: rgba(255,255,255,.05); border-radius: 8px; }
.qn[data-layout="quiz"] .qn-rail-row .qn-media,
.qn[data-layout="quiz"] .qn-rail-row .qn-media img,
.qn[data-layout="quiz"] .qn-rail-row .qn-ph { width: 80px; height: 80px; min-height: 80px; border-radius: 8px; }
.qn[data-layout="quiz"] .qn-rail-row strong {
  font-size: 15px; font-weight: 700; line-height: 1.35;
  -webkit-line-clamp: 3;
}
.qn[data-layout="quiz"] .qn-rail-row strong::after {
  content: ""; display: block; width: 32px; height: 1px;
  background: rgba(255,255,255,.6); margin-top: 10px;
}
.qn[data-layout="quiz"] .qn-rail-row .qn-play {
  inset: 0; margin: auto; left: 0; top: 0; width: 28px; height: 28px;
  background: #dc2626; border: 1px solid rgba(255,255,255,.2); opacity: 1;
}
.qn[data-layout="quiz"] .qn-rail-row .qn-play::after { left: 10px; top: 7px; border-width: 6px; border-left-width: 9px; }
.qn.is-tabs-panel { background: transparent; padding: 0; }
.qn-h.is-tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border: 1px solid #e5e7eb; border-bottom: 0; margin: 0 0 14px; padding: 0;
  background: #f3f4f6; align-items: stretch;
}
.qn-h.is-tabs .qn-tabs { display: contents; margin: 0; padding: 0; }
.qn-h.is-tabs .qn-tabs button {
  width: 100%; padding: 14px 8px; margin: 0; background: #f3f4f6; color: #6b7280;
  font-size: 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
}
.qn-h.is-tabs .qn-tabs button.on { background: #fff; color: var(--qn-head); font-weight: 600; border-bottom-color: var(--qn-head); }
.qn-cmt { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.qn-cmt li { font-size: 14px; color: #374151; }
.qn-cmt p { margin: 4px 0 0; color: #6b7280; font-size: 13px; }
.qn-star-ic {
  position: absolute; left: 0; bottom: 0; width: 54px; height: calc(100% + 10px);
  border-radius: 20px 54px 0 0;
  background: linear-gradient(318.78deg, var(--qn-icon, var(--cms-primary, #D4A017)) 30.66%, var(--cms-alert, #C24A2A) 74.91%);
  display: grid; place-items: center; color: #fff; font-size: 20px; z-index: 2;
}
.qn-star-ic .cms-nav-font, .qn-star-ic i, .qn-star-ic span { color: #fff; font-size: 22px; width: auto; height: auto; }
.qn-h.is-line {
  align-items: stretch; background: transparent; border-radius: 0;
  border-bottom: 3px solid var(--qn-head); margin: 0 0 16px; gap: 8px 16px;
}
.qn-h.is-line h2 {
  background: var(--qn-head); color: #fff; box-shadow: none; border-radius: 0;
  margin: 0; padding: 8px 14px; font-size: 13px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; width: auto; line-height: 1.2;
}
.qn-h.is-line .qn-tabs { padding-bottom: 0; align-self: flex-end; margin-bottom: 6px; }
.qn-h.is-line .qn-pager { padding-bottom: 0; align-self: center; }
.qn-h.is-line .qn-xem { background: none; color: var(--cms-widget-link, var(--qn-title, #1B1E23)); padding: 0 8px 0 0; align-self: center; }
.qn.is-dark .qn-h.is-line { border-bottom: 3px solid var(--qn-head); border-radius: 0; }
.qn.is-dark .qn-h.is-line h2 { background: var(--qn-head); color: #111; box-shadow: none; border-radius: 0; }
.qn-h.is-trend {
  align-items: flex-end; background: transparent; border-radius: 0;
  border-bottom: 1px solid #ececec; margin: 0 0 16px;
}
.qn-h.is-trend h2 {
  background: transparent; color: var(--qn-head); box-shadow: 0 3px 0 var(--qn-head);
  border-radius: 0; margin: 0 auto -1px 0; padding: 0 0 8px;
  font-size: 22px; font-weight: 800; letter-spacing: 0; text-transform: none; width: max-content;
}
.qn[data-layout="ranked"] .qn-h.is-trend h2 {
  color: var(--qn-title); box-shadow: 0 3px 0 var(--qn-title); font-size: 18px; font-weight: 700;
}
.qn-h.is-trend .qn-head-ico {
  margin-left: auto; padding-bottom: 8px; color: #c4c8ce; font-size: 18px; line-height: 1;
}
.qn-h.is-trend .qn-head-ico .cms-nav-font { font-size: 20px; color: #c4c8ce; }
.qn-h.is-trend .qn-tabs { padding-bottom: 8px; }
.qn-h.is-trend .qn-pager { padding-bottom: 4px; }
.qn-h.is-trend .qn-xem { background: none; padding: 0 0 8px; font-weight: 600; color: var(--cms-widget-link, var(--qn-title, #1B1E23)); }
.qn.is-dark .qn-h.is-trend { border-bottom-color: rgba(255,255,255,.08); }
.qn.is-dark .qn-h.is-trend h2 { color: var(--qn-head); background: transparent; box-shadow: 0 3px 0 var(--qn-head); border-radius: 0; }
.qn-h.is-tick { align-items: center; background: transparent; border-bottom: 0; gap: 12px 18px; margin-bottom: 12px; }
.qn-h.is-tick h2 {
  color: inherit; font-size: 20px; font-weight: 800; padding: 0; box-shadow: none; width: auto;
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 0 0;
}
.qn-h.is-tick h2::before { content: ""; width: 4px; height: 1.05em; border-radius: 2px; background: var(--qn-head); flex: 0 0 4px; }
.qn-h.is-tick .qn-tabs, .qn-h.is-tick .qn-pager { padding-bottom: 0; }
.qn.is-dark .qn-h.is-tick h2 { color: #fff; box-shadow: none; }
.qn-xem { margin-left: auto; background: #fff; border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--cms-widget-link, #1B1E23); text-decoration: none; }
.qn a.qn-xem:hover { color: var(--cms-widget-link-hover, var(--qn-title-hover, #D4A017)); }
.qn-h.is-line .qn-xem { font-weight: 600; }
.qn-icon-pick { display: inline-flex; align-items: center; gap: 8px; margin: 0; width: auto; height: 32px; padding: 0 10px; }
.qn-thumb .qn-media { width: 92px; height: 70px; min-height: 70px; }
.qn-thumb .qn-media img, .qn-thumb .qn-ph { min-height: 70px; height: 70px; }
.qn-thumb .qn-play { width: 22px; height: 22px; left: 6px; top: 6px; }
.qn-thumb .qn-play::after { left: 8px; top: 5px; border-width: 5px; border-left-width: 8px; }
.qn-box { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.qn-box .qn-media { aspect-ratio: 16 / 9; min-height: 0; border-radius: 10px; }
.qn-box .qn-media img, .qn-box .qn-ph { min-height: 0; }
.qn-box .qn-t { font-size: 16px; margin: 10px 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qn-hero3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; width: 100%; }
.qn-hero3 .qn-box:first-child .qn-t { font-size: 22px; font-weight: 800; }
.qn-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qn-grid4 .qn-box { box-shadow: 0 2px 10px rgba(15,23,42,.08); border-radius: 8px; overflow: hidden; background: #fff; }
.qn-grid4 .qn-box .qn-media { border-radius: 8px 8px 0 0; min-height: 140px; }
.qn-grid4 .qn-box-txt { padding: 0 10px 12px; }
.qn-rule { height: 3px; background: #f61616; margin: 16px 0 0; width: 100%; }
.qn-row { display: flex; gap: 12px; text-decoration: none; color: inherit; align-items: stretch; }
.qn-row .qn-media { width: 36%; flex: 0 0 36%; aspect-ratio: 16 / 10; min-height: 0; border-radius: 8px; }
.qn-row .qn-media img, .qn-row .qn-ph { min-height: 0; }
.qn-row .qn-t { font-size: 16px; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qn-k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8b919a; margin-bottom: 4px; }
.qn-feed { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; }
.qn-feed-list { display: flex; flex-direction: column; gap: 14px; }
.qn-feed-list .qn-row { box-shadow: 0 2px 10px rgba(15,23,42,.08); padding: 8px; border-radius: 8px; background: #fff; }
.qn-feed-rail { display: flex; flex-direction: column; gap: 14px; }
.qn-feed-rail .qn-card { min-height: 280px; border-radius: 10px; }
.qn-feed-rail .qn-media { position: absolute; inset: 0; min-height: 0; }
.qn-cap.is-center { text-align: center; }
.qn-spot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qn-spot .qn-card { aspect-ratio: 10 / 14; min-height: 0; border-radius: 12px; }
.qn-spot .qn-card .qn-media { position: absolute; inset: 0; min-height: 0; }
.qn-cats3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.qn-cats3 .qn-h.is-star { margin: 0 0 10px; border-radius: 20px 20px 0 0; }
.qn-play { z-index: 2; width: 36px; height: 36px; inset: auto; left: 12px; top: 12px; margin: 0; background: #ff0000; border: 0; opacity: .85; }
.qn-play::after { left: 13px; top: 10px; border-width: 7px; border-left-width: 11px; }
.qn-overlay { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qn-overlay .qn-media { min-height: 200px; }
.qn-wide2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qn-wide2 .qn-media { min-height: 260px; }
.qn-vid-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.qn-vid { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.qn-vid .qn-media { min-height: 130px; }
.qn-vid strong { font-size: 14px; line-height: 1.35; }
.qn-videos > .qn-card .qn-media { min-height: 320px; }
.qn-videos > .qn-card .qn-cap strong { font-size: 26px; }
.qn-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.qn-twin .qn-h { margin-top: 0; }
.qn-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.qn-scroll .qn-card { flex: 0 0 240px; }
.qn-ticker { display: flex; align-items: stretch; border: 1px solid var(--line, #e4e8ee); overflow: hidden; margin: 0 0 16px; font-size: 13px; }
.qn-ticker-lab { flex: 0 0 auto; background: #c62828; color: #fff; font-weight: 800; padding: 8px 12px; text-transform: uppercase; letter-spacing: .04em; }
.qn-ticker-mask { flex: 1; overflow: hidden; display: flex; align-items: center; }
.qn-ticker-track { display: flex; gap: 28px; white-space: nowrap; padding-left: 12px; animation: qn-marquee 22s linear infinite; }
.qn-ticker-track a, .qn-ticker-track span { color: inherit; text-decoration: none; }
.qn-ticker:hover .qn-ticker-track { animation-play-state: paused; }
@keyframes qn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.qn-sk {
  display: grid; gap: 2px; height: 56px; width: 100%; padding: 6px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 2px; box-sizing: border-box;
}
.qn-sk i { background: #d8dde4; display: block; min-height: 8px; }
.row-preset-grid button.on .qn-sk {
  border-color: var(--bronze, #D4A017);
  outline: 2px solid var(--bronze, #D4A017);
  outline-offset: 1px;
}
.row-preset-grid button:hover .qn-sk { outline: 2px solid var(--bronze, #D4A017); outline-offset: 1px; }
.row-preset-grid button.on:hover .qn-sk {
  outline-color: var(--bronze, #D4A017);
}
.row-preset-grid button.on span { color: var(--bronze, #9A7014); font-weight: 700; }
.qn-sk-hero3 { grid-template-columns: 2fr 1fr 1fr; }
.qn-sk-hero3 i:first-child { background: var(--bronze); }
.qn-sk-grid4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.qn-sk-feed { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.qn-sk-feed i:nth-child(1) { grid-row: span 2; }
.qn-sk-spotlight { grid-template-columns: repeat(4, 1fr); background: #ffebeb; padding: 3px; }
.qn-sk-cats3 { grid-template-columns: 1fr 1fr 1fr; }
.qn-sk-mosaic i:first-child { grid-row: span 2; background: var(--bronze); }
.qn-sk-mosaic i:nth-child(2) { grid-column: span 2; }
.qn-sk-slider3 { grid-template-columns: 1fr 1fr 1fr; }
.qn-sk-magazine { grid-template-columns: 1fr 1fr; grid-template-rows: 1.2fr 1fr; }
.qn-sk-split { grid-template-columns: 1.1fr .9fr; }
.qn-sk-split i:first-child { background: var(--bronze); }
.qn-sk-ranked { grid-template-columns: 1fr; }
.qn-sk-quiz { grid-template-columns: 1fr; background: #22C55E; padding: 3px; }
.qn-sk-tabs { grid-template-columns: 1fr 1fr 1fr; }
.qn-sk-sports { grid-template-columns: 1.1fr 1fr; background: #1B1E23; padding: 3px; }
.qn-sk-sports i:first-child { background: #3d9b4a; }
.qn-sk-tech { grid-template-columns: 1.1fr .9fr; background: #e8f6f4; padding: 3px; }
.qn-sk-twin { grid-template-columns: 1fr 1fr; }
.qn-sk-wide2 { grid-template-columns: 1fr 1fr; }
.qn-sk-videos { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.4fr 1fr; }
.qn-sk-videos i:first-child { grid-column: 1 / -1; background: var(--bronze); }
.qn-sk-trending { grid-template-columns: 1.1fr .9fr; grid-template-rows: repeat(3, 1fr); }
.qn-sk-trending i:first-child { grid-row: span 3; background: var(--bronze); }
.qn-sk-section { grid-template-columns: 1.1fr 1fr; background: #1B1E23; padding: 3px; }
.qn-sk-overlay { grid-template-columns: repeat(4, 1fr); }
.qn-sk-grid { grid-template-columns: 1fr 1fr 1fr; }
.qn-sk-list { grid-template-columns: 1fr; }
.qn-sk-ticker { grid-template-columns: 28px 1fr; align-items: center; }
.qn-sk-ticker i:first-child { background: #c62828; height: 100%; }
.qn-sk-scroll { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .qn-trending, .qn-split, .qn-section-feat, .qn-overlay, .qn-sports-feat, .qn-wide2, .qn-twin, .qn-mag-feat, .qn-mag-list, .qn-sports-more, .qn-hero3, .qn-feed, .qn-cats3, .qn-spot { grid-template-columns: 1fr 1fr; }
  .qn-slider3, .qn-vid-row, .qn-grid4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .qn-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
  .qn-mosaic .qn-card:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 280px; }
  .qn-mosaic .qn-card:nth-child(2) { grid-column: auto; }
  .qn-mosaic .qn-card.is-ov .qn-media { position: relative; }
  .qn-mosaic .qn-card:first-child .qn-cap strong { font-size: 22px; }
  .qn-promo { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
  .qn-promo > :nth-child(1) { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
  .qn-promo .qn-card.is-ov .qn-media { position: relative; }
  .qn-promo > :nth-child(1) .qn-cap strong { font-size: 22px; }
}
@media (max-width: 640px) {
  .qn-mosaic, .qn-trending, .qn-split, .qn-section-feat, .qn-overlay, .qn-grid, .qn-section-more, .qn-slider3, .qn-mag-feat, .qn-mag-list, .qn-sports-feat, .qn-sports-more, .qn-wide2, .qn-twin, .qn-vid-row, .qn-hero3, .qn-grid4, .qn-feed, .qn-spot, .qn-cats3, .qn-promo { grid-template-columns: 1fr !important; }
}
@container cms (max-width: 900px) {
  .qn-trending, .qn-split, .qn-section-feat, .qn-overlay, .qn-sports-feat, .qn-wide2, .qn-twin, .qn-mag-feat, .qn-mag-list, .qn-sports-more, .qn-hero3, .qn-feed, .qn-cats3, .qn-spot { grid-template-columns: 1fr 1fr; }
  .qn-slider3, .qn-vid-row, .qn-grid4 { grid-template-columns: 1fr 1fr; }
}
@container cms (max-width: 720px) {
  .qn-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
  .qn-mosaic .qn-card:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 280px; }
  .qn-mosaic .qn-card:nth-child(2) { grid-column: auto; }
  .qn-mosaic .qn-card.is-ov .qn-media { position: relative; }
  .qn-mosaic .qn-card:first-child .qn-cap strong { font-size: 22px; }
  .qn-promo { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
  .qn-promo > :nth-child(1) { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
  .qn-promo .qn-card.is-ov .qn-media { position: relative; }
  .qn-promo > :nth-child(1) .qn-cap strong { font-size: 22px; }
}
@container cms (max-width: 640px) {
  .qn-mosaic, .qn-trending, .qn-split, .qn-section-feat, .qn-overlay, .qn-grid, .qn-section-more, .qn-slider3, .qn-mag-feat, .qn-mag-list, .qn-sports-feat, .qn-sports-more, .qn-wide2, .qn-twin, .qn-vid-row, .qn-hero3, .qn-grid4, .qn-feed, .qn-spot, .qn-cats3, .qn-promo { grid-template-columns: 1fr !important; }
}
.qn-sk-mosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.qn-sk-promo, .qn-sk-promoslide { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.1fr 1.1fr 1fr; }
.qn-sk-promo i:first-child, .qn-sk-promoslide i:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; background: var(--bronze); }
.ux-studio .qb-presets.is-news { grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.ux-studio .qb-presets.is-news button { padding: 8px 6px 10px; align-items: stretch; }
.ux-studio .qb-presets.is-news button .qn-sk { height: 64px; }
.ux-studio .qb-presets.is-news button.on .qn-sk { border-color: var(--ux-bronze, #D4A017); outline: 2px solid var(--ux-bronze, #D4A017); outline-offset: 1px; }
.ux-studio .qb-presets.is-news button:hover .qn-sk { outline: 2px solid var(--ux-bronze, #D4A017); outline-offset: 1px; }
.ux-canvas .qn { pointer-events: none; }
.ux-canvas .qn-promo-hero { pointer-events: auto; }

/* Lượt xem cạnh bài trong khối "Xem nhiều" (QuickNews::viewsBadge) */
.qn-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.qn-meta-row .qn-date, .qn-thumb.is-rank .qn-meta-row .qn-date { margin: 0; }
.qn-views {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 5px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 18px; background: rgba(15, 23, 42, .06); color: inherit; white-space: nowrap;
}
.qn-views .material-symbols-outlined { font-size: 15px; line-height: 1; color: #94a3b8; }
.qn-views.is-warm .material-symbols-outlined { color: #f59e0b; }
.qn-views.is-hot .material-symbols-outlined { color: #f97316; }
.qn-views.is-very-hot .material-symbols-outlined { color: #ef4444; }
.qn-views.is-very-hot { background: rgba(239, 68, 68, .1); }
.qn.is-notch-panel .qn-views { background: rgba(255, 255, 255, .2); color: #fff; }
.qn.is-notch-panel .qn-views .material-symbols-outlined { color: #fff; }
.qn.is-notch-panel .qn-views.is-warm .material-symbols-outlined,
.qn.is-notch-panel .qn-views.is-hot .material-symbols-outlined,
.qn.is-notch-panel .qn-views.is-very-hot .material-symbols-outlined { color: #ffe08a; }

/* Số thứ tự cho bố cục Quiz (qn-rail) */
.qn-rail-row { position: relative; }
.qn-rail-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qn-rail-row.is-num .qn-num {
  position: absolute; left: -8px; top: -8px; z-index: 2; width: 28px; height: 28px; font-size: 13px;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.qn.is-notch-panel .qn-rail-row.is-num .qn-num { background: var(--cms-primary, #D4A017); color: #1a1408; border-color: rgba(255, 255, 255, .9); }
.qn-rail-row.is-num:nth-child(-n+3) .qn-num { width: 30px; height: 30px; font-size: 14px; }

/* ===== Sáng / tối (color-scheme) =====
   Mọi màu nền / chữ của khối Quick News lấy từ token light-dark(): tự đổi theo chế độ đang xem —
   website: "Nền nội dung" Sáng / Tối / Theo hệ thống (.cms-site color-scheme); trang ERP: chế độ sáng / tối của ERP.
   Màu người dùng chọn: nền nhạt tự tối đi ở chế độ tối (QuickNews::adaptBg), nền đậm giữ nguyên. */
.qn, .qn-ticker {
  --qn-title: light-dark(var(--cms-widget-link, var(--cms-ink, #16181C)), #f1f3f5);
  --qn-text: light-dark(#1B1E23, #e8eaee);
  --qn-meta: light-dark(color-mix(in srgb, var(--cms-muted, #3D434C) 72%, #8b919a), #9aa0a8);
  --qn-ex: light-dark(#5f6773, #c5c9d0);
  --qn-line: light-dark(#ececec, rgba(255, 255, 255, .1));
  --qn-line-2: light-dark(#e5e7eb, #363b44);
  --qn-card: light-dark(#ffffff, #23272e);
  --qn-chip: light-dark(#ffffff, #2c313a);
  --qn-soft: light-dark(#f3f4f6, #2a2f37);
  --qn-shadow: light-dark(rgba(15, 23, 42, .08), rgba(0, 0, 0, .35));
}
/* Khối có nền riêng cố định: ép chế độ phù hợp để token bên trong đúng màu. */
.qn.is-dark, .qn.is-star-panel.is-ink, .qn.is-special-panel.is-ink { color-scheme: dark; }
.qn.is-gold { color-scheme: light; color: #1B1E23; }

.qn-h, .qn-h.is-trend { border-bottom-color: var(--qn-line); }
.qn-pager button { border-color: var(--qn-line-2); color: var(--qn-meta); }
.qn-xem { background: var(--qn-chip); color: var(--qn-title); }
.qn-h.is-star .qn-xem, .qn-h.is-special .qn-xem, .qn-h.is-notch .qn-xem { background: var(--qn-chip); color: var(--qn-title); box-shadow: 0 1px 6px var(--qn-shadow); }

/* Panel sao (Thể thao, Đời sống…) */
.qn.is-star-panel { color: var(--qn-panel-fg, var(--qn-text)); }
.qn.is-star-panel .qn-t, .qn.is-star-panel .qn-ttl, .qn.is-star-panel .qn-thumb strong { color: var(--qn-panel-fg, var(--qn-title)); }
.qn.is-star-panel .qn-ex { color: var(--qn-ex); }
.qn.is-star-panel .qn-meta, .qn.is-star-panel .qn-date { color: var(--qn-meta); }
.qn-h.is-star h2 { color: var(--qn-head-fg, var(--qn-title)); }
.qn-h.is-star .qn-tabs button { color: var(--qn-meta); }
.qn-h.is-star .qn-tabs button.on { color: var(--qn-head); }

/* Chữ trên ảnh (thẻ phủ) luôn trắng — không để màu chữ của panel đè lên (lỗi chữ tối trên ảnh). */
.qn .qn-card.is-ov .qn-cap .qn-ttl, .qn .qn-card.is-ov .qn-cap strong { color: #fff; }
.qn .qn-card.is-ov .qn-cap .qn-date { color: rgba(255, 255, 255, .88); }
.qn .qn-card.is-ov .qn-cap p { color: rgba(255, 255, 255, .9); }
.qn a.qn-card.is-ov:hover .qn-cap .qn-ttl, .qn a.qn-card.is-ov:hover .qn-cap strong { color: var(--qn-title-hover); }

/* Panel đặc biệt (nền màu nhấn) */
.qn.is-special-panel { color: var(--qn-panel-fg, #111); }
.qn-h.is-special h2 { color: var(--qn-panel-fg, #111); }
.qn.is-special-panel .qn-box, .qn.is-special-panel .qn-story { background: var(--qn-card); box-shadow: 0 8px 22px var(--qn-shadow); }

/* Panel dạng tab */
.qn-h.is-tabs { border-color: var(--qn-line-2); background: var(--qn-soft); }
.qn-h.is-tabs .qn-tabs button { background: var(--qn-soft); color: var(--qn-meta); }
.qn-h.is-tabs .qn-tabs button.on { background: var(--qn-card); color: var(--qn-head); }
.qn-cmt li { color: var(--qn-text); }
.qn-cmt p { color: var(--qn-meta); }

/* Thẻ nền trắng / tông màu */
.qn-grid4 .qn-box, .qn-feed-list .qn-row { background: var(--qn-card); box-shadow: 0 2px 10px var(--qn-shadow); }
.qn.is-panel { color: var(--qn-panel-fg, inherit); }
.qn.is-panel .qn-t, .qn.is-panel .qn-thumb .qn-ttl, .qn.is-panel .qn-thumb strong { color: var(--qn-panel-fg, var(--qn-title)); }
.qn.is-mint { background: color-mix(in srgb, var(--cms-success, #4F7A45) 12%, light-dark(#fff, #1b1e23)); }
.qn.is-blush { background: color-mix(in srgb, var(--cms-alert, #C24A2A) 10%, light-dark(#fff, #1b1e23)); }
.qn-views { background: light-dark(rgba(15, 23, 42, .06), rgba(255, 255, 255, .08)); }
.qn-h.is-trend .qn-head-ico, .qn-h.is-trend .qn-head-ico .cms-nav-font { color: light-dark(#c4c8ce, #5b616b); }

/* Tin nóng: tốc độ theo tuỳ chọn (--qn-tk-dur do PHP / JS tính từ tốc độ px/giây), viền theo sáng / tối */
.qn-ticker { border-color: var(--qn-line-2); color: var(--qn-text); }
.qn-ticker-track { animation-duration: var(--qn-tk-dur, 60s); }
.qn-ticker.no-pause:hover .qn-ticker-track { animation-play-state: running; }
.qn-ticker-track a:hover { color: var(--qn-title-hover, #D4A017); }
@media (prefers-reduced-motion: reduce) { .qn-ticker-track { animation-duration: calc(var(--qn-tk-dur, 60s) * 2); } }

/* ===== Tỉ lệ ảnh cố định + khoảng cách giữa các bài (mọi bố cục Quick News) =====
   Ảnh không còn cao thấp theo kích thước file gốc hay bị kéo giãn theo chữ bên cạnh. */
.qn-story .qn-media { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
.qn-story .qn-media img, .qn-story .qn-ph { height: 100%; min-height: 0; }
.qn-box .qn-media img, .qn-box .qn-ph, .qn-row .qn-media img, .qn-row .qn-ph, .qn-vid .qn-media img, .qn-vid .qn-ph { height: 100%; }
.qn-row { align-items: flex-start; }
.qn-row .qn-media { height: auto; align-self: flex-start; }
.qn-vid .qn-media { aspect-ratio: 16 / 9; min-height: 0; }
.qn-sports-feat .qn-media { aspect-ratio: 16 / 10; min-height: 0; }
.qn-catcol, .qn-twin-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.qn-catcol .qn-rule { margin: 2px 0; }
.qn-catcol .qn-h.is-star { margin-bottom: 0; }
.qn-twin-col .qn-h { margin-bottom: 2px; }
.qn-section-more, .qn-mag-list, .qn-sports-more { align-items: start; }
.qn-overlay .qn-card.is-ov .qn-media, .qn-wide2 .qn-card.is-ov .qn-media { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
.qn-overlay .qn-card.is-ov img, .qn-overlay .qn-card.is-ov .qn-ph, .qn-wide2 .qn-card.is-ov img, .qn-wide2 .qn-card.is-ov .qn-ph { min-height: 0; }

/* Quiz / Xem nhiều (tiêu đề dạng tab khuyết): khối hẹp không đủ chỗ cho biểu tượng + tiêu đề cạnh nút "Xem thêm"
   → ẩn cả biểu tượng và tiêu đề, dải màu phủ hết chiều ngang (JS đo chính xác: qnNotchFit; CSS dự phòng khi chưa chạy JS). */
.qn-h.is-notch.is-compact .qn-notch-lab { display: none; }
.qn-h.is-notch.is-compact .qn-notch-tab { flex: 1 1 auto; border-top-left-radius: 24px; min-height: 48px; }
.qn-h.is-notch.is-compact .qn-notch-tab::before { display: none; }
.qn.is-notch-panel:has(> .qn-h.is-compact) .qn-notch-body { border-radius: 0 0 24px 24px; }
@container qn (max-width: 230px) {
  .qn-h.is-notch:not(.is-fit) .qn-notch-lab { display: none; }
  .qn-h.is-notch:not(.is-fit) .qn-notch-tab { flex: 1 1 auto; border-top-left-radius: 24px; min-height: 48px; }
  .qn-h.is-notch:not(.is-fit) .qn-notch-tab::before { display: none; }
  .qn.is-notch-panel:has(> .qn-h.is-notch:not(.is-fit)) .qn-notch-body { border-radius: 0 0 24px 24px; }
}

/* Khối đặt trong cột hẹp (sidebar, cột 4/12…): chia cột theo chiều rộng của CHÍNH khối (container qn), không theo màn hình. */
@container qn (max-width: 560px) {
  .qn-trending, .qn-split, .qn-section-feat, .qn-sports-feat, .qn-twin, .qn-mag-feat, .qn-mag-list, .qn-sports-more, .qn-feed, .qn-cats3, .qn-hero3 { grid-template-columns: minmax(0, 1fr) !important; }
  .qn-overlay, .qn-spot, .qn-grid4, .qn-slider3, .qn-vid-row, .qn-grid, .qn-section-more, .qn-wide2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .qn-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
  .qn-mosaic .qn-card:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 240px; }
  .qn-mosaic .qn-card:nth-child(2) { grid-column: auto; }
  .qn-mosaic .qn-card.is-ov { min-height: 170px; }
  .qn-mosaic .qn-card.is-ov .qn-media { position: absolute; }
  .qn-mosaic .qn-card:first-child .qn-cap strong { font-size: 20px; }
  .qn-mosaic .qn-card:nth-child(n+2) .qn-cap strong { font-size: 14px; }
  .qn-promo { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
  .qn-promo > :nth-child(1) { grid-column: 1 / -1; grid-row: auto; min-height: 240px; }
  .qn-promo > :nth-child(1) .qn-cap strong { font-size: 20px; }
  .qn-sports-feat .qn-t { font-size: 18px; }
}
@container qn (max-width: 340px) {
  .qn-overlay, .qn-spot, .qn-grid4, .qn-slider3, .qn-vid-row, .qn-grid, .qn-section-more, .qn-wide2, .qn-mosaic, .qn-promo { grid-template-columns: minmax(0, 1fr) !important; }
  .qn-mosaic .qn-card.is-ov, .qn-promo .qn-card.is-ov { min-height: 190px; }
}
@container qn (max-width: 560px) { .qn-section-more { grid-template-columns: minmax(0, 1fr) !important; } }

/* ===== Tiêu đề tối đa 2 dòng (mọi bố cục): dài hơn thì cắt "…" cho gọn, các thẻ cao đều nhau ===== */
.qn .qn-t, .qn .qn-ttl, .qn .qn-cap strong, .qn .qn-thumb strong, .qn .qn-rail-row strong, .qn .qn-vid strong, .qn .qn-tile strong {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
/* Quiz: vạch trang trí đưa ra ngoài tiêu đề (tiêu đề bị cắt 2 dòng sẽ che mất vạch). */
.qn[data-layout="quiz"] .qn-rail-row strong::after { display: none; }
.qn[data-layout="quiz"] .qn-rail-txt::after { content: ""; display: block; width: 32px; height: 1px; background: rgba(255, 255, 255, .6); margin-top: 4px; }

/* ===== Bố cục bổ sung — màu lấy từ Kiểu dáng của website (--cms-primary, --cms-widget-link…) + token sáng / tối ===== */
/* Tiêu đề chữ (Block #13) / 2 cột có chấm (Block #9) */
.qn-hls { display: flex; flex-direction: column; min-width: 0; }
.qn-hl { display: block; padding: 11px 0; border-bottom: 1px solid var(--qn-line); color: inherit; text-decoration: none; min-width: 0; }
.qn-hls > .qn-hl:first-child { padding-top: 2px; }
.qn-hls > .qn-hl:last-child { border-bottom: 0; }
.qn-hl .qn-k { margin: 0 0 3px; color: var(--qn-accent); font-weight: 700; }
.qn-hl .qn-t { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.qn-hl .qn-ex { margin: 4px 0 0; }
.qn-hl .qn-meta { margin: 4px 0 0; }
.qn-hls.is-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.qn-hls.is-2col > .qn-hl { position: relative; padding: 11px 0 11px 16px; border-bottom: 1px solid var(--qn-line); }
.qn-hls.is-2col > .qn-hl::before { content: ""; position: absolute; left: 0; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--qn-accent); }
.qn-hls.is-2col > .qn-hl .qn-k { display: none; }
/* Ảnh lớn + tiêu đề chữ (Block #11) */
.qn-herolist { display: flex; flex-direction: column; gap: 6px; }
.qn-herolist > .qn-story .qn-t { font-size: 20px; }
/* 1 lớn + 3 dưới (Block #15) */
.qn-hero4 { display: flex; flex-direction: column; gap: 16px; }
.qn-hero4 > .qn-card.is-ov { min-height: 0; border-radius: 4px; }
.qn-hero4 > .qn-card.is-ov .qn-media { aspect-ratio: 21 / 9; min-height: 0; height: auto; }
.qn-hero4 > .qn-card.is-ov img, .qn-hero4 > .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-hero4 > .qn-card .qn-cap { padding: 60px 22px 20px; }
.qn-hero4 > .qn-card .qn-cap strong { font-size: 26px; font-weight: 800; }
.qn-hero4-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.qn-hero4-row .qn-t { font-size: 16px; }
/* 1 lớn + 6 ô (Block #6) */
.qn-bigtiles { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.qn-bigtiles > .qn-card.is-ov { min-height: 300px; border-radius: 4px; }
.qn-bigtiles > .qn-card.is-ov .qn-media { position: absolute; inset: 0; min-height: 0; height: auto; }
.qn-bigtiles > .qn-card.is-ov img, .qn-bigtiles > .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-bigtiles > .qn-card .qn-cap { padding: 48px 18px 18px; }
.qn-bigtiles > .qn-card .qn-cap strong { font-size: 24px; font-weight: 800; }
.qn-bigtiles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qn-bigtiles-grid .qn-card.is-ov { min-height: 0; border-radius: 4px; }
.qn-bigtiles-grid .qn-card.is-ov .qn-media { aspect-ratio: 1 / 1; min-height: 0; height: auto; }
.qn-bigtiles-grid .qn-card.is-ov img, .qn-bigtiles-grid .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-bigtiles-grid .qn-card > .qn-cat, .qn-bigtiles-grid .qn-cap .qn-date { display: none; }
.qn-bigtiles-grid .qn-cap { padding: 22px 8px 8px; }
.qn-bigtiles-grid .qn-cap strong { font-size: 13px; line-height: 1.3; }
/* Lưới ô nhỏ (Block #7) */
.qn-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 14px; }
.qn-tile { display: flex; flex-direction: column; gap: 7px; min-width: 0; color: inherit; text-decoration: none; }
.qn-tile .qn-media { aspect-ratio: 16 / 10; min-height: 0; border-radius: 6px; }
.qn-tile .qn-media img, .qn-tile .qn-ph { min-height: 0; height: 100%; }
.qn-tile .qn-ttl { font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--qn-title); }
.qn a.qn-tile:hover .qn-ttl { color: var(--qn-title-hover); }
/* Dòng thời gian (Block #14) */
.qn-timeline { position: relative; display: flex; flex-direction: column; gap: 18px; padding-left: 24px; }
.qn-timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--qn-accent) 40%, transparent); }
.qn-tl-item { position: relative; min-width: 0; }
.qn-tl-dot { position: absolute; left: -24px; top: 6px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: var(--qn-card); border: 3px solid var(--qn-accent); }
/* Ảnh + khung chữ (Block #16) */
.qn-boxcap .qn-card.is-ov { overflow: visible; background: transparent; min-height: 0; }
.qn-boxcap .qn-card.is-ov .qn-media { aspect-ratio: 2 / 1; min-height: 0; height: auto; border-radius: 4px; }
.qn-boxcap .qn-card.is-ov img, .qn-boxcap .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-boxcap .qn-cap {
  position: relative; left: auto; right: auto; bottom: auto; margin: -72px auto 0; width: min(80%, 660px); box-sizing: border-box;
  padding: 18px 24px 20px; background: var(--qn-card); border-top: 3px solid var(--qn-accent); border-radius: 2px;
  box-shadow: 0 12px 32px var(--qn-shadow); pointer-events: auto; text-align: center;
}
.qn .qn-boxcap .qn-card.is-ov .qn-cap .qn-ttl, .qn .qn-boxcap .qn-card.is-ov .qn-cap strong { color: var(--qn-title); font-size: 24px; font-weight: 800; }
.qn .qn-boxcap .qn-card.is-ov .qn-cap .qn-date { color: var(--qn-meta); }
.qn .qn-boxcap .qn-card.is-ov .qn-cap p { color: var(--qn-ex); }
.qn .qn-boxcap a.qn-card.is-ov:hover .qn-cap .qn-ttl { color: var(--qn-title-hover); }
/* Ảnh bên phải (Block #12) */
.qn-rows { display: flex; flex-direction: column; }
.qn-rows > .qn-row { padding: 14px 0; border-bottom: 1px solid var(--qn-line); gap: 18px; }
.qn-rows > .qn-row:first-child { padding-top: 0; }
.qn-rows > .qn-row:last-child { border-bottom: 0; }
.qn-row.is-right .qn-box-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.qn-row.is-right .qn-t { font-size: 18px; margin: 0 0 4px; }
.qn-row.is-right .qn-k { color: var(--qn-accent); font-weight: 700; }
.qn-row.is-right .qn-media { width: 34%; flex: 0 0 34%; }
/* Danh sách 2 cột (Block #18) */
.qn-thumbs.is-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; }
/* Trượt: carousel 3 bài (Scrolling #1), slider ảnh lớn (Slider #1), slider lưới (Slider #10) */
.qn-slide .qb-slides > .qn-page { min-width: 0; }
.qn-slide-carousel .qn-page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0 1px; }
.qn-slide-carousel .qb-sl-nav { top: 30%; }
.qn-slide-carousel .qb-sl-dots { position: static; margin: 14px 0 2px; }
.qn-slide-carousel .qb-sl-dots button, .qn-slide-slidegrid .qb-sl-dots button { background: color-mix(in srgb, var(--qn-meta) 45%, transparent); }
.qn-slide-carousel .qb-sl-dots button.on { background: var(--qn-accent); }
.qn-slide-slidefull .qn-card.is-ov { min-height: 0; border-radius: 4px; }
.qn-slide-slidefull .qn-card.is-ov .qn-media { aspect-ratio: 21 / 9; min-height: 0; height: auto; }
.qn-slide-slidefull .qn-card.is-ov img, .qn-slide-slidefull .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-slide-slidefull .qn-cap { padding: 70px 26px 40px; }
.qn-slide-slidefull .qn-cap strong { font-size: 28px; font-weight: 800; max-width: 760px; }
.qn-slide-slidegrid .qn-page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 10px; height: 420px; }
.qn-slide-slidegrid .qn-page > :first-child { grid-row: span 2; }
.qn-slide-slidegrid .qn-card.is-ov { min-height: 0; border-radius: 4px; }
.qn-slide-slidegrid .qn-card.is-ov .qn-media { position: absolute; inset: 0; min-height: 0; height: auto; }
.qn-slide-slidegrid .qn-card.is-ov img, .qn-slide-slidegrid .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-slide-slidegrid .qn-page > :first-child .qn-cap strong { font-size: 26px; font-weight: 800; }
.qn-slide-slidegrid .qn-page > :first-child .qn-cap { padding-bottom: 36px; }
.qn-slide.is-single .qb-sl-nav, .qn-slide.is-single .qb-sl-dots { display: none; }
/* Video + danh sách (Videos playlist) */
.qn-playlist { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.qn-playlist > .qn-card.is-ov { min-height: 340px; border-radius: 6px; }
.qn-playlist > .qn-card.is-ov .qn-media { position: absolute; inset: 0; min-height: 0; height: auto; }
.qn-playlist > .qn-card.is-ov img, .qn-playlist > .qn-card.is-ov .qn-ph { min-height: 0; }
.qn-playlist > .qn-card .qn-play { inset: 0; margin: auto; left: 0; top: 0; width: 64px; height: 64px; }
.qn-playlist > .qn-card .qn-play::after { left: 25px; top: 19px; border-width: 12px; border-left-width: 18px; }
.qn-playlist > .qn-card .qn-cap strong { font-size: 22px; }
.qn-pl-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; padding: 8px; border-radius: 6px; background: var(--qn-soft); scrollbar-width: thin; }
.qn-pl-list .qn-thumb { padding: 6px; border-radius: 6px; grid-template-columns: 96px minmax(0, 1fr); }
.qn-pl-list .qn-thumb:hover { background: color-mix(in srgb, var(--qn-accent) 12%, transparent); }
.qn-pl-list .qn-thumb .qn-media, .qn-pl-list .qn-thumb img, .qn-pl-list .qn-thumb .qn-ph { width: 96px; height: 60px; min-height: 60px; border-radius: 4px; }

/* Cột hẹp: theo chiều rộng của khối */
@container qn (max-width: 900px) {
  .qn-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qn-bigtiles { grid-template-columns: minmax(0, 1fr); }
  .qn-bigtiles > .qn-card.is-ov { min-height: 280px; }
}
@container qn (max-width: 560px) {
  .qn-hls.is-2col, .qn-thumbs.is-2col, .qn-playlist, .qn-hero4-row, .qn-slide-carousel .qn-page { grid-template-columns: minmax(0, 1fr) !important; }
  .qn-hero4-row .qn-story, .qn-slide-carousel .qn-story { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
  .qn-hero4-row .qn-story .qn-media, .qn-slide-carousel .qn-story .qn-media { grid-row: span 3; }
  .qn-hero4-row .qn-story .qn-t, .qn-slide-carousel .qn-story .qn-t { margin: 0; font-size: 14px; }
  .qn-tiles, .qn-bigtiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qn-hero4 > .qn-card.is-ov .qn-media, .qn-slide-slidefull .qn-card.is-ov .qn-media { aspect-ratio: 4 / 3; }
  .qn-hero4 > .qn-card .qn-cap strong, .qn-slide-slidefull .qn-cap strong, .qn-bigtiles > .qn-card .qn-cap strong, .qn-slide-slidegrid .qn-page > :first-child .qn-cap strong { font-size: 19px; }
  .qn-slide-slidegrid .qn-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: 240px 150px 150px; height: auto; }
  .qn-slide-slidegrid .qn-page > :first-child { grid-row: auto; }
  .qn-boxcap .qn-cap { width: 92%; margin-top: -40px; padding: 14px 16px; }
  .qn .qn-boxcap .qn-card.is-ov .qn-cap strong { font-size: 18px; }
  .qn-row.is-right .qn-t { font-size: 15px; }
  .qn-playlist > .qn-card.is-ov { min-height: 220px; }
  .qn-pl-list { max-height: none; }
}

/* Hình minh hoạ preset (bảng Preset trong builder) */
.qn-sk-headlines, .qn-sk-headlines2 { align-content: space-around; }
.qn-sk-headlines { grid-template-columns: 1fr; }
.qn-sk-headlines2 { grid-template-columns: 1fr 1fr; column-gap: 8px; }
.qn-sk-headlines i, .qn-sk-headlines2 i { min-height: 3px; height: 3px; }
.qn-sk-headlines2 i { box-shadow: -5px 0 0 -1px var(--bronze); margin-left: 5px; }
.qn-sk-herolist { grid-template-columns: 1fr; grid-template-rows: 2.2fr 1fr 1fr 1fr; }
.qn-sk-herolist i:first-child { background: var(--bronze); }
.qn-sk-herolist i:not(:first-child) { height: 3px; min-height: 3px; align-self: center; }
.qn-sk-hero4 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.5fr 1fr; }
.qn-sk-hero4 i:first-child { grid-column: 1 / -1; background: var(--bronze); }
.qn-sk-bigtiles { grid-template-columns: 2fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.qn-sk-bigtiles i:first-child { grid-row: span 2; background: var(--bronze); }
.qn-sk-tiles { grid-template-columns: repeat(5, 1fr); }
.qn-sk-timeline { grid-template-columns: 1fr; padding-left: 14px; background: linear-gradient(90deg, transparent 7px, var(--bronze) 7px 9px, transparent 9px), #fff; }
.qn-sk-timeline i { background: linear-gradient(90deg, #9aa3ae 30%, transparent 30% 36%, #d8dde4 36%); }
.qn-sk-boxcap { position: relative; grid-template-columns: 1fr; }
.qn-sk-boxcap i:first-child { background: var(--bronze); }
.qn-sk-boxcap i:nth-child(2) { position: absolute; left: 26%; right: 26%; bottom: 5px; height: 16px; background: #fff; border: 1px solid #cbd2dc; border-top: 2px solid #c62828; }
.qn-sk-rowright { grid-template-columns: 1fr; }
.qn-sk-rowright i { background: linear-gradient(90deg, #d8dde4 62%, transparent 62% 66%, #9aa3ae 66%); }
.qn-sk-list2 { grid-template-columns: 1fr 1fr; }
.qn-sk-list2 i { background: linear-gradient(90deg, #9aa3ae 34%, transparent 34% 40%, #d8dde4 40%); }
.qn-sk-carousel { grid-template-columns: repeat(3, 1fr); padding-bottom: 12px; background: radial-gradient(circle, var(--bronze) 2px, transparent 2.5px) 50% calc(100% - 3px) / 12px 6px no-repeat, #fff; }
.qn-sk-slidefull { grid-template-columns: 1fr; }
.qn-sk-slidefull i { background: var(--bronze); box-shadow: inset 6px 0 0 -3px #fff, inset -6px 0 0 -3px #fff; }
.qn-sk-slidegrid { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.qn-sk-slidegrid i:first-child { grid-row: span 2; background: var(--bronze); }
.qn-sk-playlist { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(4, 1fr); background: #1B1E23; padding: 3px; }
.qn-sk-playlist i:first-child { grid-row: span 4; background: #dc2626; }
.qn-sk-playlist i:not(:first-child) { background: #3a404a; }