/* DanhBai Retro Saigon — extras: textures, decorative motifs, micro-interactions. */
/* Gạch bông (Saigon mosaic tile) — pure CSS, low opacity overlay */
.has-gach-bong-bg {
background-image:
radial-gradient(circle at 25% 25%, rgba(178, 58, 44, 0.08) 8%, transparent 9%),
radial-gradient(circle at 75% 75%, rgba(178, 58, 44, 0.08) 8%, transparent 9%),
radial-gradient(circle at 75% 25%, rgba(91, 138, 114, 0.06) 6%, transparent 7%),
radial-gradient(circle at 25% 75%, rgba(91, 138, 114, 0.06) 6%, transparent 7%);
background-size: 32px 32px;
background-color: var(--wp--preset--color--neutral-light);
}
/* Old paper noise via SVG fractal */
.has-paper-noise-bg {
background-color: var(--wp--preset--color--neutral-light);
background-image: url("data:image/svg+xml;utf8,");
}
/* Asymmetric retro stamp card style */
.danhbai-card {
background: var(--wp--preset--color--neutral-lighter);
border: 1px solid var(--wp--preset--color--neutral-medium);
border-radius: 12px 12px 4px 4px;
box-shadow: 0 4px 16px rgba(62, 39, 35, 0.10);
padding: 1.5rem;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.danhbai-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(62, 39, 35, 0.16);
}
/* Frame corners (decorative) */
.danhbai-frame {
position: relative;
padding: 2rem;
}
.danhbai-frame::before,
.danhbai-frame::after {
content: "";
position: absolute;
width: 32px;
height: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
}
.danhbai-frame::before { top: 0; left: 0; }
.danhbai-frame::after { bottom: 0; right: 0; transform: rotate(180deg); }
/* Sepia-tinted images (warmth wash) */
.danhbai-sepia img,
.danhbai-sepia .wp-block-cover__image-background {
filter: sepia(0.10) saturate(1.05);
}
/* Sticky header behavior */
.wp-block-template-part.is-sticky {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(8px);
background: rgba(250, 247, 240, 0.92);
}
/* Game thumbnail grid */
.danhbai-game-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 768px) { .danhbai-game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .danhbai-game-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .danhbai-game-grid { grid-template-columns: repeat(6, 1fr); } }
.danhbai-game-thumb {
aspect-ratio: 5 / 7;
border-radius: 8px 8px 0 0;
overflow: hidden;
position: relative;
border: 1px solid var(--wp--preset--color--neutral-medium);
}
.danhbai-game-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.4s ease;
}
.danhbai-game-thumb:hover img { transform: scale(1.04); }
/* Vietnamese diacritic-friendly line-height adjustment for body */
body { font-feature-settings: "kern", "liga"; }
/* ==========================================================================
Mega Menu — .mega-tro-choi (16-pillar Trò chơi)
TRUE MEGA: wide panel 1100px · 3-col card grid · icon + label per pillar
Col-headers are pseudo-labels (href="#" + pointer-events:none).
Icons via background-image attribute selector on href (no nav-block change).
2026-06-04 IA refactor — upgraded from dropdown to mega per operator.
========================================================================== */
@media (min-width: 1024px) {
/* Wide mega panel — card-style aesthetics
Use !important + extra specificity to override WP's inline block-supports CSS that defaults submenu to display:flex width:200px */
.wp-block-navigation .mega-tro-choi > .wp-block-navigation__submenu-container,
.mega-tro-choi.wp-block-navigation-submenu > .wp-block-navigation__submenu-container,
.mega-tro-choi > .wp-block-navigation__submenu-container {
/* db66-2026-06-08-005: clamp width to viewport to prevent right-edge overflow */
min-width: min(1080px, calc(100vw - 40px)) !important;
max-width: min(1140px, calc(100vw - 40px)) !important;
width: min(1080px, calc(100vw - 40px)) !important;
/* MULTI-COLUMN layout — each col-header forces new column → items below it stack in that column */
display: block !important;
column-count: 3 !important;
column-gap: 2rem !important;
column-fill: balance !important;
padding: 1.5rem 1.75rem 1.75rem !important;
border-top: 4px solid #B23A2C !important;
border-radius: 0 0 10px 10px !important;
box-shadow: 0 8px 24px rgba(92,58,33,0.32) !important;
background: linear-gradient(180deg, #FBF6EA 0%, #F5ECD9 100%) !important;
left: auto !important; right: auto !important;
transform: translateX(-30%) !important;
z-index: 9999 !important;
position: absolute !important;
}
/* Col-header forces new column + stays w/ following items */
.mega-tro-choi .mega-col-header {
break-before: column !important;
break-inside: avoid !important;
margin-top: 0 !important;
}
.mega-tro-choi .mega-col-header:first-child { break-before: avoid !important; }
/* Each pillar item — stays as one block, no split across columns */
.mega-tro-choi .wp-block-navigation-item {
break-inside: avoid !important;
page-break-inside: avoid;
display: block;
}
/* z-index context */
.wp-block-navigation:has(.mega-tro-choi) { z-index: 9999; position: relative; }
.mega-tro-choi { z-index: 9999; }
/* Column section headers */
.mega-tro-choi .mega-col-header > a,
.mega-tro-choi .mega-col-header > .wp-block-navigation-item__content {
pointer-events: none; cursor: default;
font-weight: 700; color: #B23A2C; font-size: .82rem;
padding: .5rem 0 .5rem; margin: 0 0 .5rem;
border-bottom: 2px solid #C9962E;
font-family: "Playfair Display", serif;
text-transform: uppercase; letter-spacing: .04em;
display: block;
}
.mega-tro-choi .mega-col-header { padding: 0 .35rem; margin-bottom: .25rem; }
/* Pillar items = cards with icon LEFT + label RIGHT.
padding-left big enough so icon (28px) sits at left, text never overlaps */
.mega-tro-choi .wp-block-navigation-item:not(.mega-col-header) > a,
.mega-tro-choi .wp-block-navigation-item:not(.mega-col-header) > .wp-block-navigation-item__content {
padding: .55rem .75rem .55rem 3.25rem !important;
font-size: .95rem !important;
font-weight: 500 !important;
border-radius: 6px !important;
color: #3E2723 !important;
display: block !important;
background-color: rgba(255,255,255,.55) !important;
background-size: 26px 26px !important;
background-repeat: no-repeat !important;
background-position: .6rem center !important;
border: 1px solid #E8DDC8 !important;
margin: .15rem 0 !important;
line-height: 1.3 !important;
transition: all .18s ease;
}
/* Per-pillar icon via href attribute selector — theme assets canonical (same source as pillar grid featured) */
/* VN pillars */
.mega-tro-choi a[href*="/tien-len/"] { background-image: url(../images/games/tien-len.webp); }
.mega-tro-choi a[href*="/phom/"] { background-image: url(../images/games/phom.webp); }
.mega-tro-choi a[href*="/sam-loc/"] { background-image: url(../images/games/sam-loc.webp); }
.mega-tro-choi a[href*="/mau-binh/"] { background-image: url(../images/games/mau-binh.webp); }
.mega-tro-choi a[href*="/lieng/"] { background-image: url(../images/games/lieng.webp); }
.mega-tro-choi a[href*="/bai-cao/"] { background-image: url(../images/games/bai-cao.webp); }
.mega-tro-choi a[href*="/xi-dach/"] { background-image: url(../images/games/xi-dach.webp); }
.mega-tro-choi a[href*="/tu-sac/"] { background-image: url(../images/games/tu-sac.webp); }
.mega-tro-choi a[href*="/cat-te/"] { background-image: url(../images/games/cat-te.webp); }
.mega-tro-choi a[href*="/xi-to/"] { background-image: url(../images/games/xi-to.webp); }
.mega-tro-choi a[href*="/bai-tan/"] { background-image: url(../images/games/bai-tan.webp); }
.mega-tro-choi a[href*="/chan-to-tom/"] { background-image: url(../images/games/chan-to-tom.webp); }
/* QT pillars */
.mega-tro-choi a[href*="/baccarat/"] { background-image: url(../images/games/baccarat.webp); }
.mega-tro-choi a[href*="/poker/"] { background-image: url(../images/games/poker.webp); }
.mega-tro-choi a[href*="/omaha-holdem/"] { background-image: url(../images/games/omaha-holdem.webp); }
.mega-tro-choi a[href*="/blackjack/"] { background-image: url(../images/games/blackjack.webp); }
/* Solitaire silo (klondike base = /solitaire/) */
.mega-tro-choi a[href$="/solitaire/"] { background-image: url(../images/games/solitaire.webp); }
.mega-tro-choi a[href*="/spider-solitaire/"] { background-image: url(../images/games/spider-solitaire.webp); }
.mega-tro-choi a[href*="/freecell/"] { background-image: url(../images/games/freecell.webp); }
.mega-tro-choi a[href*="/tripeaks-solitaire/"] { background-image: url(../images/games/tripeaks-solitaire.webp); }
.mega-tro-choi a[href*="/algerian-solitaire/"] { background-image: url(../images/games/algerian-solitaire.webp); }
.mega-tro-choi a[href*="/crescent-solitaire/"] { background-image: url(../images/games/crescent-solitaire.webp); }
/* Hover: card lifts with gold border + brown bg tint */
.mega-tro-choi .wp-block-navigation-item:not(.mega-col-header) > a:hover,
.mega-tro-choi .wp-block-navigation-item:not(.mega-col-header) > .wp-block-navigation-item__content:hover {
background-color: rgba(178,58,44,0.10);
border-color: #C9962E;
color: #B23A2C;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(178,58,44,.12);
}
.mega-tro-choi > .wp-block-navigation-item__content::after { content: " ▾"; color:#C9A961; font-size:.85em; }
}
/* Tablet — narrower mega, still grid */
@media (min-width: 769px) and (max-width: 1023px) {
.mega-tro-choi > .wp-block-navigation__submenu-container {
min-width: 860px; max-width: 920px;
display: grid; grid-template-columns: repeat(3, 1fr);
padding: 1rem 1.25rem; gap: 0 1.2rem;
border-top: 3px solid #B23A2C;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 14px rgba(92,58,33,0.25);
background: #FBF6EA;
}
.mega-tro-choi .mega-col-header > a {
font-weight: 700; color: #B23A2C; font-size: .8rem;
padding: .4rem 0 .25rem; border-bottom: 1px solid #C9B68F;
font-family: "Playfair Display", serif; text-transform: uppercase;
pointer-events: none;
}
.mega-tro-choi .wp-block-navigation-item:not(.mega-col-header) > a {
padding: .4rem .6rem; font-size: .9rem; border-radius: 4px;
color: #3E2723; display: block;
}
.mega-tro-choi .wp-block-navigation-item:not(.mega-col-header) > a:hover {
background: rgba(178,58,44,0.08); color: #B23A2C;
}
}
/* Mobile — collapsed vertical, no card icons */
@media (max-width: 768px) {
.mega-tro-choi > .wp-block-navigation__submenu-container { display: block; padding: 0.5rem 0; }
.mega-tro-choi .mega-col-header > a,
.mega-tro-choi .mega-col-header > .wp-block-navigation-item__content {
padding: .5rem 1.5rem .35rem; font-weight: 700; color: #B23A2C;
font-size: .82rem; text-transform: uppercase;
}
.mega-tro-choi .wp-block-navigation-item:not(.mega-col-header) > a {
padding: .4rem 1.5rem .4rem 2.25rem; font-size: .9rem; display: block;
}
}
/* ==========================================================================
Mega Menu — .mega-gbai-dthuong (13 brand "Top game đổi thưởng" + hub link)
Style mirror .mega-tro-choi: multi-column 3-col + icon per brand card.
2026-06-04 IA refactor — operator-defined 13-brand roster (Ahrefs ranking).
========================================================================== */
@media (min-width: 1024px) {
.wp-block-navigation .mega-gbai-dthuong > .wp-block-navigation__submenu-container,
.mega-gbai-dthuong.wp-block-navigation-submenu > .wp-block-navigation__submenu-container,
.mega-gbai-dthuong > .wp-block-navigation__submenu-container {
/* db66-2026-06-08-005: clamp width to viewport to prevent right-edge overflow (esp. when trigger near right) */
min-width: min(1080px, calc(100vw - 40px)) !important;
max-width: min(1140px, calc(100vw - 40px)) !important;
width: min(1080px, calc(100vw - 40px)) !important;
display: block !important;
column-count: 3 !important;
column-gap: 2rem !important;
column-fill: balance !important;
padding: 1.5rem 1.75rem 1.75rem !important;
border-top: 4px solid #C9962E !important; /* gold to distinguish from .mega-tro-choi (red) */
border-radius: 0 0 10px 10px !important;
box-shadow: 0 8px 24px rgba(92,58,33,0.32) !important;
background: linear-gradient(180deg, #FBF6EA 0%, #F5ECD9 100%) !important;
left: auto !important; right: auto !important;
transform: translateX(-50%) !important;
z-index: 9999 !important;
position: absolute !important;
}
/* Hub link header (special) — spans ALL columns full-width banner */
.mega-gbai-dthuong .mega-hub-link {
column-span: all !important;
-webkit-column-span: all !important;
margin: 0 0 1rem !important;
}
.mega-gbai-dthuong .mega-hub-link > a,
.mega-gbai-dthuong .mega-hub-link > .wp-block-navigation-item__content {
pointer-events: auto !important;
color: #B23A2C !important;
font-weight: 700 !important;
background: linear-gradient(90deg, #FFF4DC 0%, #F5ECD9 100%) !important;
border: 1.5px solid #C9962E !important;
text-align: center !important;
padding: .65rem 1rem !important;
border-radius: 6px !important;
display: block !important;
font-size: .95rem !important;
}
.mega-gbai-dthuong .mega-hub-link > a:hover {
background: linear-gradient(90deg, #F5ECD9 0%, #FFF4DC 100%) !important;
box-shadow: 0 2px 8px rgba(201,150,46,.3) !important;
}
/* Col headers */
.mega-gbai-dthuong .mega-col-header:not(.mega-hub-link) {
break-before: column !important;
break-inside: avoid !important;
}
.mega-gbai-dthuong .mega-col-header:not(.mega-hub-link) > a {
pointer-events: none !important;
cursor: default !important;
font-weight: 700 !important;
color: #B23A2C !important;
font-size: .82rem !important;
padding: .5rem 0 .5rem !important;
margin: 0 0 .5rem !important;
border-bottom: 2px solid #C9962E !important;
font-family: "Playfair Display", serif !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
display: block !important;
}
/* Brand item cards */
.mega-gbai-dthuong .wp-block-navigation-item:not(.mega-col-header) {
break-inside: avoid !important;
page-break-inside: avoid;
display: block;
}
.mega-gbai-dthuong .wp-block-navigation-item:not(.mega-col-header) > a,
.mega-gbai-dthuong .wp-block-navigation-item:not(.mega-col-header) > .wp-block-navigation-item__content {
padding: .55rem .75rem .55rem 3.25rem !important;
font-size: .95rem !important;
font-weight: 500 !important;
border-radius: 6px !important;
color: #3E2723 !important;
display: block !important;
background-color: rgba(255,255,255,.55) !important;
background-size: 26px 26px !important;
background-repeat: no-repeat !important;
background-position: .6rem center !important;
border: 1px solid #E8DDC8 !important;
margin: .15rem 0 !important;
line-height: 1.3 !important;
transition: all .18s ease;
}
/* Per-brand icons (14 canonical Hub brand, uniform /uploads/brands/ path) */
.mega-gbai-dthuong a[href*="/haywin-review/"] { background-image: url(../../../../uploads/brands/haywin.webp); }
.mega-gbai-dthuong a[href*="/sun-win-review/"] { background-image: url(../../../../uploads/brands/sunwin.webp); }
.mega-gbai-dthuong a[href*="/hitclub-review/"] { background-image: url(../../../../uploads/brands/hitclub.webp); }
.mega-gbai-dthuong a[href*="/b52-review/"] { background-image: url(../../../../uploads/brands/b52.webp); }
.mega-gbai-dthuong a[href*="/nhatvip-review/"] { background-image: url(../../../../uploads/brands/nhatvip.webp); }
.mega-gbai-dthuong a[href*="/yo88-review/"] { background-image: url(../../../../uploads/brands/yo88.webp); }
.mega-gbai-dthuong a[href*="/zowin-review/"] { background-image: url(../../../../uploads/brands/zowin.webp); }
.mega-gbai-dthuong a[href*="/gemwin-review/"] { background-image: url(../../../../uploads/brands/gemwin.webp); }
.mega-gbai-dthuong a[href*="/win79-review/"] { background-image: url(../../../../uploads/brands/win79.webp); }
.mega-gbai-dthuong a[href*="/rikvip-review/"] { background-image: url(../../../../uploads/brands/rikvip.webp); }
.mega-gbai-dthuong a[href*="/mayclub-review/"] { background-image: url(../../../../uploads/brands/mayclub.webp); }
.mega-gbai-dthuong a[href*="/789-club-review/"] { background-image: url(../../../../uploads/brands/789club.webp); }
.mega-gbai-dthuong a[href*="/vic88-review/"] { background-image: url(../../../../uploads/brands/vic88.webp); }
.mega-gbai-dthuong a[href*="/vin88-review/"] { background-image: url(../../../../uploads/brands/vin88.webp); }
/* Hover lift */
.mega-gbai-dthuong .wp-block-navigation-item:not(.mega-col-header) > a:hover {
background-color: rgba(178,58,44,0.10) !important;
border-color: #C9962E !important;
color: #B23A2C !important;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(178,58,44,.12);
}
.mega-gbai-dthuong > .wp-block-navigation-item__content::after { content: " ▾"; color:#C9A961; font-size:.85em; }
.mega-gbai-dthuong { z-index: 9999; }
}
@media (max-width: 1023px) {
.mega-gbai-dthuong > .wp-block-navigation__submenu-container { display: block; padding: 0.5rem 0; }
.mega-gbai-dthuong .mega-col-header > a { padding: .5rem 1.5rem; font-weight: 700; color: #B23A2C; }
.mega-gbai-dthuong .wp-block-navigation-item:not(.mega-col-header) > a { padding: .4rem 1.5rem; }
}
/* ============================================================================
* Ad slots (db66-2026-06-05-114, image placeholders 2026-06-05 12:35)
* - .dh-ad-banner: 728×90 PC / 320×50 Mobile — under each section
* - .dh-ad-hero-side: 300×300 PC only (hidden ≤1023px) — hero right column
* Placeholders are SVG images in assets/images/ads-placeholder/; replace with
* real ad network code when monetization goes live.
* ========================================================================= */
.dh-ad-banner{max-width:1280px;margin:1.5rem auto;padding:0 1.5rem;text-align:center;}
.dh-ad-banner a{display:inline-block;line-height:0;}
.dh-ad-banner img{max-width:100%;height:auto;display:block;}
@media (max-width:768px){
.dh-ad-banner{margin:1rem auto;padding:0 1rem;}
}
/* Hero 2-column layout with 300×300 right-side ad (PC only) */
.dh-hero--text.dh-hero--has-ad .dh-hero-inner{max-width:1180px;display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:center;text-align:left;}
.dh-hero--text.dh-hero--has-ad .dh-hero-title,
.dh-hero--text.dh-hero--has-ad .dh-hero-sub{text-align:left;margin-left:0;}
.dh-hero--text.dh-hero--has-ad .dh-hero-cta{justify-content:flex-start;}
.dh-ad-hero-side{width:300px;display:flex;justify-content:center;}
.dh-ad-hero-side a{display:inline-block;line-height:0;}
.dh-ad-hero-side img{width:300px;height:300px;display:block;}
@media (max-width:1023px){
.dh-hero--text.dh-hero--has-ad .dh-hero-inner{grid-template-columns:1fr;text-align:center;}
.dh-hero--text.dh-hero--has-ad .dh-hero-title,
.dh-hero--text.dh-hero--has-ad .dh-hero-sub{text-align:center;}
.dh-hero--text.dh-hero--has-ad .dh-hero-cta{justify-content:center;}
.dh-ad-hero-side{display:none;} /* hide on mobile/tablet per operator */
}
/* ============================================================================
* Header nav fit (db66-2026-06-08-006) — keep 9 items on 1 line via tighter gap + font.
* Operator rule: fix UI by CSS, NEVER remove nav items.
* Apply at desktop only; mobile uses hamburger.
* ========================================================================= */
@media (min-width: 1024px) {
header .wp-block-navigation .wp-block-navigation__container {
gap: .35rem !important;
flex-wrap: nowrap !important;
}
header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon + .wp-block-navigation-item__content,
header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
font-size: .95rem !important;
padding: .35rem .55rem !important;
white-space: nowrap !important;
}
}
/* Mid-range viewport — slight font shrink to keep fit */
@media (min-width: 1024px) and (max-width: 1279px) {
header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
font-size: .88rem !important;
padding: .3rem .4rem !important;
}
}
/* ============================================================================
* Mega menu viewport-edge anchor (db66-2026-06-08-006).
* Previous clamp + translateX(-50%) STILL overflowed when trigger sat near right
* edge of viewport — centered panel pushed past viewport right.
* Fix: cancel translateX, anchor panel by viewport with position:fixed-style logic
* via right: max(20px, 100% - (viewport - panel_w + offset)). KISS: use right:0
* fallback when the .mega is among the last 2 nav items.
* ========================================================================= */
@media (min-width: 1024px) {
/* Default: keep existing center for tro-choi (already fits because Game đánh bài
sits near nav center). */
/* Đổi thưởng sits near right edge — anchor to right of trigger so panel grows leftward. */
.wp-block-navigation .mega-gbai-dthuong > .wp-block-navigation__submenu-container,
.mega-gbai-dthuong.wp-block-navigation-submenu > .wp-block-navigation__submenu-container,
.mega-gbai-dthuong > .wp-block-navigation__submenu-container {
transform: none !important;
left: auto !important;
right: 0 !important;
}
}
/* ============================================================================
* Header brand sizing (db66-2026-06-08-009) — smaller logo + title per operator.
* Prevent title wrap to keep single-line brand area.
* ========================================================================= */
header .wp-block-site-title {
white-space: nowrap;
margin: 0 !important;
}
header .wp-block-site-title a {
text-decoration: none;
}
header .wp-block-site-logo { line-height: 0; }
header .custom-logo,
header .wp-block-site-logo img {
width: 30px !important;
height: 30px !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
display: block !important;
}
@media (max-width: 768px) {
header .custom-logo,
header .wp-block-site-logo img {
width: 26px !important;
height: 26px !important;
}
header .wp-block-site-title {
font-size: .85rem !important;
}
}
/* ============================================================================
* Breadcrumb bar (db66-2026-06-08-010) — positioned BELOW main menu via header.html.
* ========================================================================= */
.site-breadcrumb-bar {
background: #FAF7F0;
border-bottom: 1px solid var(--wp--preset--color--neutral-medium, #E8DCC4);
}
.site-breadcrumb-bar .bdn-breadcrumb {
max-width: 1280px;
margin: 0 auto;
}
/* Hide breadcrumb bar wrapper khi shortcode rỗng (homepage / 404). */
.site-breadcrumb-bar:not(:has(.bdn-breadcrumb)) {
display: none;
}
/* Unified card style for category listings (huong-dan + review-cong-game).
Mirrors inline shortcode CSS so Query Loop archives render same look. */
.dh-cat-single {
max-width: 1280px;
margin: 2rem auto;
}
.dh-cat-single > h2 {
font-size: clamp(1.4rem, 2.4vw, 2rem);
margin: 0 0 .75rem;
color: #3E2723;
}
.dh-subcat-post {
background: #FAF7F0;
border: 1px solid #E8DCC4;
border-radius: 8px;
padding: .85rem;
display: flex;
flex-direction: column;
gap: .75rem;
}
.dh-subcat-post .wp-block-post-featured-image,
.dh-subcat-post .dh-subcat-post-thumb {
display: block;
aspect-ratio: 1/1;
overflow: hidden;
border-radius: 6px;
border: 1px solid #E8DCC4;
margin: 0;
}
.dh-subcat-post .wp-block-post-featured-image img,
.dh-subcat-post .dh-subcat-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dh-subcat-post .wp-block-post-title {
margin: 0;
font-size: 1rem;
line-height: 1.35;
}
.dh-subcat-post .wp-block-post-title a {
color: #3E2723;
text-decoration: none;
}
.dh-subcat-post .wp-block-post-title a:hover {
color: #B23A2C;
}
/* Query pagination — discreet, brand-colored */
.dh-subcat-posts-query .wp-block-query-pagination {
font-size: .95rem;
}
.dh-subcat-posts-query .wp-block-query-pagination a,
.dh-subcat-posts-query .wp-block-query-pagination .page-numbers {
color: #B23A2C;
text-decoration: none;
padding: .25rem .6rem;
}
.dh-subcat-posts-query .wp-block-query-pagination .page-numbers.current {
font-weight: 700;
color: #3E2723;
}
/* Footer contact paragraph (replaces old list format). */
.dh-footer-contact {
line-height: 1.9;
margin-top: 0.75rem;
}
.dh-footer-contact a {
color: inherit;
text-decoration: underline;
}