/* GAMEIOS_LAYOUT_10_SWITCHER_CSS */
:root{
  --gameios-layout-radius: 22px;
  --gameios-layout-fast: 120ms;
}
html[data-ui-layout] .game-card,
html[data-ui-layout] .mk-product-card{
  will-change: auto !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}
html[data-ui-layout] .category-page main > .grid,
html[data-ui-layout] .cat-block-grid{
  align-items: stretch;
}
html[data-ui-layout] .game-card:hover,
html[data-ui-layout] .mk-product-card:hover{
  transition-duration: var(--gameios-layout-fast) !important;
}

/* 01 - Classic: giữ bố cục cũ */
html[data-ui-layout="layout-classic"] .game-card,
html[data-ui-layout="layout-classic"] .mk-product-card{}

/* 02 - Compact grid: nhiều card hơn, nhẹ hơn */
html[data-ui-layout="layout-compact"] .category-page main > .grid,
html[data-ui-layout="layout-compact"] .cat-block-grid{
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
}
@media(min-width:640px){
  html[data-ui-layout="layout-compact"] .category-page main > .grid,
  html[data-ui-layout="layout-compact"] .cat-block-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media(min-width:1024px){
  html[data-ui-layout="layout-compact"] .category-page main > .grid,
  html[data-ui-layout="layout-compact"] .cat-block-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
@media(min-width:1280px){
  html[data-ui-layout="layout-compact"] .category-page main > .grid,
  html[data-ui-layout="layout-compact"] .cat-block-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
}
html[data-ui-layout="layout-compact"] .game-card,
html[data-ui-layout="layout-compact"] .mk-product-card{border-radius:16px !important;}
html[data-ui-layout="layout-compact"] .game-img-wrap,
html[data-ui-layout="layout-compact"] .mk-product-img{aspect-ratio:1/1 !important;}
html[data-ui-layout="layout-compact"] .game-info,
html[data-ui-layout="layout-compact"] .mk-product-info{padding:9px !important;gap:6px !important;}
html[data-ui-layout="layout-compact"] .game-title,
html[data-ui-layout="layout-compact"] .mk-product-name{font-size:12px !important;min-height:32px !important;}
html[data-ui-layout="layout-compact"] .game-buy,
html[data-ui-layout="layout-compact"] .mk-btn-order{min-height:32px !important;font-size:11px !important;border-radius:10px !important;}

/* 03 - Wide list: danh sách ngang rõ ràng */
html[data-ui-layout="layout-wide-list"] .category-page main > .grid,
html[data-ui-layout="layout-wide-list"] .cat-block-grid{grid-template-columns:1fr !important;gap:12px !important;}
html[data-ui-layout="layout-wide-list"] .game-card,
html[data-ui-layout="layout-wide-list"] .mk-product-card{
  flex-direction:row !important;
  min-height:126px !important;
  border-radius:20px !important;
}
html[data-ui-layout="layout-wide-list"] .game-img-wrap,
html[data-ui-layout="layout-wide-list"] .mk-product-img{
  width:34% !important;
  max-width:260px !important;
  min-width:120px !important;
  aspect-ratio:16/10 !important;
  height:auto !important;
}
html[data-ui-layout="layout-wide-list"] .game-info,
html[data-ui-layout="layout-wide-list"] .mk-product-info{justify-content:center !important;padding:14px !important;}
html[data-ui-layout="layout-wide-list"] .game-title,
html[data-ui-layout="layout-wide-list"] .mk-product-name{font-size:15px !important;min-height:auto !important;}
html[data-ui-layout="layout-wide-list"] .game-buy,
html[data-ui-layout="layout-wide-list"] .mk-btn-order{max-width:180px !important;}
@media(max-width:520px){
  html[data-ui-layout="layout-wide-list"] .game-card,
  html[data-ui-layout="layout-wide-list"] .mk-product-card{min-height:100px !important;}
  html[data-ui-layout="layout-wide-list"] .game-img-wrap,
  html[data-ui-layout="layout-wide-list"] .mk-product-img{width:40% !important;min-width:112px !important;}
  html[data-ui-layout="layout-wide-list"] .game-info,
  html[data-ui-layout="layout-wide-list"] .mk-product-info{padding:10px !important;}
  html[data-ui-layout="layout-wide-list"] .game-buy,
  html[data-ui-layout="layout-wide-list"] .mk-btn-order{min-height:30px !important;font-size:11px !important;}
}

/* 04 - Mosaic: xen kẽ card lớn nhỏ */
html[data-ui-layout="layout-mosaic"] .category-page main > .grid,
html[data-ui-layout="layout-mosaic"] .cat-block-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
@media(min-width:768px){
  html[data-ui-layout="layout-mosaic"] .category-page main > .grid,
  html[data-ui-layout="layout-mosaic"] .cat-block-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  html[data-ui-layout="layout-mosaic"] .category-page main > .grid > .game-card:nth-child(1),
  html[data-ui-layout="layout-mosaic"] .category-page main > .grid > .game-card:nth-child(7),
  html[data-ui-layout="layout-mosaic"] .cat-block-grid > .mk-product-card:nth-child(1),
  html[data-ui-layout="layout-mosaic"] .cat-block-grid > .mk-product-card:nth-child(7){grid-column:span 2 !important;grid-row:span 2 !important;}
  html[data-ui-layout="layout-mosaic"] .category-page main > .grid > .game-card:nth-child(1) .game-img-wrap,
  html[data-ui-layout="layout-mosaic"] .category-page main > .grid > .game-card:nth-child(7) .game-img-wrap,
  html[data-ui-layout="layout-mosaic"] .cat-block-grid > .mk-product-card:nth-child(1) .mk-product-img,
  html[data-ui-layout="layout-mosaic"] .cat-block-grid > .mk-product-card:nth-child(7) .mk-product-img{aspect-ratio:16/12 !important;}
}
html[data-ui-layout="layout-mosaic"] .game-img-wrap,
html[data-ui-layout="layout-mosaic"] .mk-product-img{aspect-ratio:1/1 !important;}
html[data-ui-layout="layout-mosaic"] .game-card,
html[data-ui-layout="layout-mosaic"] .mk-product-card{border-radius:20px !important;}

/* 05 - Poster wall: ảnh dọc như poster */
html[data-ui-layout="layout-poster-wall"] .category-page main > .grid,
html[data-ui-layout="layout-poster-wall"] .cat-block-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
@media(min-width:768px){
  html[data-ui-layout="layout-poster-wall"] .category-page main > .grid,
  html[data-ui-layout="layout-poster-wall"] .cat-block-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media(min-width:1280px){
  html[data-ui-layout="layout-poster-wall"] .category-page main > .grid,
  html[data-ui-layout="layout-poster-wall"] .cat-block-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}
html[data-ui-layout="layout-poster-wall"] .game-img-wrap,
html[data-ui-layout="layout-poster-wall"] .mk-product-img{aspect-ratio:3/4 !important;}
html[data-ui-layout="layout-poster-wall"] .game-card,
html[data-ui-layout="layout-poster-wall"] .mk-product-card{border-radius:26px !important;}

/* 06 - Showcase: card đầu lớn, còn lại nhỏ */
html[data-ui-layout="layout-showcase"] .category-page main > .grid,
html[data-ui-layout="layout-showcase"] .cat-block-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
@media(min-width:1024px){
  html[data-ui-layout="layout-showcase"] .category-page main > .grid,
  html[data-ui-layout="layout-showcase"] .cat-block-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  html[data-ui-layout="layout-showcase"] .category-page main > .grid > .game-card:first-child,
  html[data-ui-layout="layout-showcase"] .cat-block-grid > .mk-product-card:first-child{grid-column:span 2 !important;grid-row:span 2 !important;}
  html[data-ui-layout="layout-showcase"] .category-page main > .grid > .game-card:first-child .game-img-wrap,
  html[data-ui-layout="layout-showcase"] .cat-block-grid > .mk-product-card:first-child .mk-product-img{aspect-ratio:16/9 !important;}
  html[data-ui-layout="layout-showcase"] .category-page main > .grid > .game-card:first-child .game-title,
  html[data-ui-layout="layout-showcase"] .cat-block-grid > .mk-product-card:first-child .mk-product-name{font-size:18px !important;}
}
html[data-ui-layout="layout-showcase"] .game-card,
html[data-ui-layout="layout-showcase"] .mk-product-card{border-radius:24px !important;}

/* 07 - Horizontal carousel: cuộn ngang nhanh */
html[data-ui-layout="layout-horizontal"] .category-page main > .grid,
html[data-ui-layout="layout-horizontal"] .cat-block-grid{
  display:flex !important;
  overflow-x:auto !important;
  scroll-snap-type:x mandatory;
  gap:12px !important;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
html[data-ui-layout="layout-horizontal"] .category-page main > .grid > .game-card,
html[data-ui-layout="layout-horizontal"] .cat-block-grid > .mk-product-card{
  flex:0 0 72vw !important;
  max-width:320px !important;
  scroll-snap-align:start;
}
@media(min-width:640px){
  html[data-ui-layout="layout-horizontal"] .category-page main > .grid > .game-card,
  html[data-ui-layout="layout-horizontal"] .cat-block-grid > .mk-product-card{flex-basis:260px !important;}
}
@media(min-width:1024px){
  html[data-ui-layout="layout-horizontal"] .category-page main > .grid > .game-card,
  html[data-ui-layout="layout-horizontal"] .cat-block-grid > .mk-product-card{flex-basis:230px !important;}
}
html[data-ui-layout="layout-horizontal"] .game-img-wrap,
html[data-ui-layout="layout-horizontal"] .mk-product-img{aspect-ratio:16/10 !important;}

/* 08 - Dense icon list: icon nhỏ, thông tin gọn */
html[data-ui-layout="layout-dense-icon"] .category-page main > .grid,
html[data-ui-layout="layout-dense-icon"] .cat-block-grid{grid-template-columns:1fr !important;gap:8px !important;}
@media(min-width:768px){
  html[data-ui-layout="layout-dense-icon"] .category-page main > .grid,
  html[data-ui-layout="layout-dense-icon"] .cat-block-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
html[data-ui-layout="layout-dense-icon"] .game-card,
html[data-ui-layout="layout-dense-icon"] .mk-product-card{flex-direction:row !important;align-items:center !important;border-radius:16px !important;min-height:86px !important;}
html[data-ui-layout="layout-dense-icon"] .game-img-wrap,
html[data-ui-layout="layout-dense-icon"] .mk-product-img{width:78px !important;height:78px !important;min-width:78px !important;aspect-ratio:1/1 !important;border-radius:14px !important;margin:8px !important;}
html[data-ui-layout="layout-dense-icon"] .game-platforms,
html[data-ui-layout="layout-dense-icon"] .mk-product-platforms,
html[data-ui-layout="layout-dense-icon"] .game-status,
html[data-ui-layout="layout-dense-icon"] .mk-badge-status{display:none !important;}
html[data-ui-layout="layout-dense-icon"] .game-info,
html[data-ui-layout="layout-dense-icon"] .mk-product-info{padding:10px 12px 10px 0 !important;gap:4px !important;}
html[data-ui-layout="layout-dense-icon"] .game-title,
html[data-ui-layout="layout-dense-icon"] .mk-product-name{font-size:13px !important;min-height:auto !important;-webkit-line-clamp:1 !important;}
html[data-ui-layout="layout-dense-icon"] .game-buy,
html[data-ui-layout="layout-dense-icon"] .mk-btn-order{min-height:28px !important;font-size:11px !important;max-width:120px !important;}

/* 09 - Zigzag: xen kẽ trái/phải */
html[data-ui-layout="layout-zigzag"] .category-page main > .grid,
html[data-ui-layout="layout-zigzag"] .cat-block-grid{grid-template-columns:1fr !important;gap:14px !important;}
@media(min-width:900px){
  html[data-ui-layout="layout-zigzag"] .category-page main > .grid,
  html[data-ui-layout="layout-zigzag"] .cat-block-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
html[data-ui-layout="layout-zigzag"] .game-card,
html[data-ui-layout="layout-zigzag"] .mk-product-card{flex-direction:row !important;min-height:145px !important;border-radius:24px !important;}
html[data-ui-layout="layout-zigzag"] .category-page main > .grid > .game-card:nth-child(even),
html[data-ui-layout="layout-zigzag"] .cat-block-grid > .mk-product-card:nth-child(even){flex-direction:row-reverse !important;}
html[data-ui-layout="layout-zigzag"] .game-img-wrap,
html[data-ui-layout="layout-zigzag"] .mk-product-img{width:42% !important;min-width:130px !important;aspect-ratio:1/1 !important;height:auto !important;}
html[data-ui-layout="layout-zigzag"] .game-info,
html[data-ui-layout="layout-zigzag"] .mk-product-info{justify-content:center !important;padding:14px !important;}
@media(max-width:520px){
  html[data-ui-layout="layout-zigzag"] .game-card,
  html[data-ui-layout="layout-zigzag"] .mk-product-card,
  html[data-ui-layout="layout-zigzag"] .category-page main > .grid > .game-card:nth-child(even),
  html[data-ui-layout="layout-zigzag"] .cat-block-grid > .mk-product-card:nth-child(even){flex-direction:column !important;}
  html[data-ui-layout="layout-zigzag"] .game-img-wrap,
  html[data-ui-layout="layout-zigzag"] .mk-product-img{width:100% !important;aspect-ratio:16/10 !important;}
}

/* 10 - Clean table: kiểu bảng shop */
html[data-ui-layout="layout-clean-table"] .category-page main > .grid,
html[data-ui-layout="layout-clean-table"] .cat-block-grid{grid-template-columns:1fr !important;gap:8px !important;}
html[data-ui-layout="layout-clean-table"] .game-card,
html[data-ui-layout="layout-clean-table"] .mk-product-card{
  flex-direction:row !important;
  align-items:center !important;
  border-radius:14px !important;
  background:rgba(2,6,23,.68) !important;
  box-shadow:none !important;
  min-height:72px !important;
}
html[data-ui-layout="layout-clean-table"] .game-img-wrap,
html[data-ui-layout="layout-clean-table"] .mk-product-img{width:64px !important;height:64px !important;min-width:64px !important;aspect-ratio:1/1 !important;margin:6px !important;border-radius:12px !important;}
html[data-ui-layout="layout-clean-table"] .game-info,
html[data-ui-layout="layout-clean-table"] .mk-product-info{display:grid !important;grid-template-columns:minmax(0,1fr) auto auto !important;align-items:center !important;gap:10px !important;width:100% !important;padding:8px 12px 8px 4px !important;}
html[data-ui-layout="layout-clean-table"] .game-title,
html[data-ui-layout="layout-clean-table"] .mk-product-name{min-height:0 !important;font-size:13px !important;-webkit-line-clamp:1 !important;}
html[data-ui-layout="layout-clean-table"] .game-price,
html[data-ui-layout="layout-clean-table"] .mk-product-price{white-space:nowrap !important;font-size:13px !important;}
html[data-ui-layout="layout-clean-table"] .game-buy,
html[data-ui-layout="layout-clean-table"] .mk-btn-order{margin:0 !important;min-height:30px !important;padding:0 12px !important;border-radius:10px !important;font-size:11px !important;white-space:nowrap !important;}
html[data-ui-layout="layout-clean-table"] .game-platforms,
html[data-ui-layout="layout-clean-table"] .mk-product-platforms,
html[data-ui-layout="layout-clean-table"] .game-status,
html[data-ui-layout="layout-clean-table"] .mk-badge-status{display:none !important;}
@media(max-width:560px){
  html[data-ui-layout="layout-clean-table"] .game-info,
  html[data-ui-layout="layout-clean-table"] .mk-product-info{grid-template-columns:minmax(0,1fr) !important;gap:5px !important;}
  html[data-ui-layout="layout-clean-table"] .game-buy,
  html[data-ui-layout="layout-clean-table"] .mk-btn-order{max-width:120px !important;}
}

/* Admin layout chooser */
.gameios-layout-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media(min-width:640px){.gameios-layout-admin-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1024px){.gameios-layout-admin-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
.gameios-layout-card{position:relative;text-align:left;border:1px solid var(--dark-border,#1e293b);background:rgba(2,6,23,.42);border-radius:16px;padding:10px;min-height:118px;transition:border-color .12s ease,background .12s ease,transform .12s ease;touch-action:manipulation;}
.gameios-layout-card:hover{border-color:rgba(34,211,238,.35);background:rgba(15,23,42,.58);}
.gameios-layout-card.is-active{border-color:var(--neon-cyan,#22d3ee);background:rgba(34,211,238,.10);box-shadow:0 12px 32px rgba(34,211,238,.10);}
.gameios-layout-card:active{transform:scale(.985);}
.gameios-layout-icon{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--neon-cyan,#22d3ee),var(--neon-purple,#a855f7));color:#020617;margin-bottom:8px;}
.gameios-layout-title{font-weight:800;color:#fff;font-size:12.5px;line-height:1.25;margin-bottom:3px;}
.gameios-layout-desc{font-size:10.5px;line-height:1.35;color:#94a3b8;min-height:28px;}
.gameios-layout-preview{height:34px;display:grid;gap:4px;margin-top:9px;padding:5px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);}
.gameios-layout-preview span{display:block;border-radius:6px;background:linear-gradient(135deg,var(--neon-cyan,#22d3ee),var(--neon-purple,#a855f7));opacity:.9;}
.gameios-layout-preview.preview-grid{grid-template-columns:repeat(4,1fr);}
.gameios-layout-preview.preview-compact{grid-template-columns:repeat(5,1fr);}
.gameios-layout-preview.preview-list{grid-template-columns:1fr;}
.gameios-layout-preview.preview-list span{height:6px;}
.gameios-layout-preview.preview-mosaic{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;}
.gameios-layout-preview.preview-mosaic span:first-child{grid-row:span 2;}
.gameios-layout-preview.preview-poster{grid-template-columns:repeat(4,1fr);height:44px;}
.gameios-layout-preview.preview-showcase{grid-template-columns:2fr 1fr 1fr;}
.gameios-layout-preview.preview-showcase span:first-child{grid-row:span 2;}
.gameios-layout-preview.preview-scroll{display:flex;overflow:hidden;}
.gameios-layout-preview.preview-scroll span{min-width:28px;}
.gameios-layout-preview.preview-icon{grid-template-columns:repeat(2,1fr);}
.gameios-layout-preview.preview-icon span{height:8px;}
.gameios-layout-preview.preview-zigzag{grid-template-columns:1fr 1fr;}
.gameios-layout-preview.preview-table{grid-template-columns:1fr;}
.gameios-layout-preview.preview-table span{height:5px;}
.gameios-layout-status{font-size:11px;color:#94a3b8;min-height:18px;}
.gameios-layout-status.ok{color:#22d3ee;}
.gameios-layout-status.err{color:#fb7185;}
@media(max-width:430px){
  .gameios-layout-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .gameios-layout-card{padding:9px;min-height:106px;border-radius:14px;}
  .gameios-layout-icon{width:26px;height:26px;border-radius:9px;margin-bottom:6px;}
  .gameios-layout-title{font-size:11.5px;}
  .gameios-layout-desc{font-size:10px;min-height:24px;}
  .gameios-layout-preview{height:28px;margin-top:7px;}
}
@media(prefers-reduced-motion:reduce){
  html[data-ui-layout] *, .gameios-layout-card{transition:none !important;animation:none !important;}
}