/* VYR layout layer: page frame + Home Module section shell. Kept separate from stable frontend.css. */
.vyr-site-frame{box-sizing:border-box;margin-inline:auto;min-width:0}
.vyr-site-frame--home{width:min(calc(100% - (var(--vyr-home-gutter) * 2)),var(--vyr-home-max))}
.vyr-site-frame--inner{width:min(calc(100% - (var(--vyr-inner-gutter) * 2)),var(--vyr-inner-max))}
/* Legacy classes: giữ tạm cho code chưa chuyển đổi ở các bước sau. */
.vyr-site-frame--container{width:min(calc(100% - (var(--vyr-page-px) * 2)),var(--vyr-container))}
.vyr-site-frame--full{width:100%;padding-inline:var(--vyr-page-px)}

.vyr-home-module-shell{position:relative;isolation:isolate;box-sizing:border-box;min-width:0}
.vyr-home-module-inner{position:relative;z-index:1;box-sizing:border-box;min-width:0;margin-inline:auto}
.vyr-home-module-inner--container{width:min(calc(100% - (var(--vyr-page-px) * 2)),var(--vyr-container))}
.vyr-home-module-inner--full{width:100%;padding-inline:var(--vyr-page-px)}

/* Module ở Content vẫn nằm trong cột Content; Module Toàn hàng mới thoát khỏi Sidebar. */
.vyr-shell-main>.vyr-home-module-shell .vyr-home-module-inner--container{width:100%;max-width:var(--vyr-container)}
.vyr-shell-main>.vyr-home-module-shell .vyr-home-module-inner--full{width:100%;padding-inline:0}

.vyr-home-module-shell.is-full-row{width:100%}
.vyr-home-module-shell.is-section-styled{
  background:var(--vyr-module-section-bg,transparent);
  padding:var(--vyr-module-section-padding,var(--vyr-section-py) 0);
  margin:var(--vyr-module-section-margin,0 0 var(--vyr-section-mb) 0);
  border-width:var(--vyr-module-border-width,0);
  border-style:solid;
  border-color:var(--vyr-module-border-color,#e2e8f0);
  border-radius:var(--vyr-module-border-radius,0);
}
.vyr-home-module-shell.is-section-styled>.vyr-home-module-inner>.vyr-module{
  margin-bottom:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
}
.vyr-home-module-bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block;
}
.vyr-home-module-overlay{
  position:absolute;inset:0;z-index:-1;background:var(--vyr-module-overlay-color,#000);opacity:var(--vyr-module-overlay-opacity,0);pointer-events:none;
}

/* Slideshow module đã tự quản lý box riêng. */
.vyr-home-module-shell .vyr-module-slideshow{margin-bottom:0}

@media(max-width:580px){
  .vyr-home-module-inner--container{width:min(calc(100% - 28px),var(--vyr-container))}
  .vyr-home-module-inner--full{padding-inline:14px}
}

/* Responsive <picture> cho ảnh nền Home Module. */
.vyr-home-module-bg-picture{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;overflow:hidden}
.vyr-home-module-bg-picture>.vyr-home-module-bg{position:static;inset:auto;z-index:auto;width:100%;height:100%;object-fit:cover;display:block}

.vyr-home-module-shell .vyr-post-card .vyr-card-body h3{
  text-transform:var(--vyr-module-item-title-transform,none);
  text-align:var(--vyr-module-item-title-align,left);
  font-weight:var(--vyr-module-item-title-weight,600);
}

/* Colors & Background: áp dụng Border mặc định cho các khối nội dung chính. */
.vyr-post-card,.vyr-sidebar-card,.vyr-page-card,.vyr-auto-toc,.vyr-section-nav{
  border-color:var(--vyr-border,#e2e8f0);
}

/* Background toàn website. Ảnh nằm trên màu nền; màu vẫn hiện ở vùng ảnh trong suốt/chưa phủ. */
body{
  background-color:var(--vyr-page-bg,#f8fafc);
  background-image:var(--vyr-page-bg-image,none);
  background-repeat:var(--vyr-page-bg-repeat,no-repeat);
  background-size:var(--vyr-page-bg-size,auto);
  background-position:var(--vyr-page-bg-position,center center);
  background-attachment:var(--vyr-page-bg-attachment,scroll);
}

/* Card toàn site: tách khỏi khung Home Module. */
.vyr-post-card,.vyr-sidebar-card,.vyr-page-card,.vyr-auto-toc,.vyr-section-nav{
  border-width:var(--vyr-card-border-width,1px);
  border-style:solid;
  border-color:var(--vyr-border,#e2e8f0);
  border-radius:var(--vyr-card-radius,12px);
  box-shadow:var(--vyr-card-shadow,none);
}
/* Item / Card riêng cho Home Module. Mặc định kế thừa Card toàn site qua biến root. */
.vyr-home-module-shell .vyr-post-grid,
.vyr-home-module-shell .vyr-post-list,
.vyr-home-module-shell .vyr-slider-track{
  gap:var(--vyr-home-item-gap,var(--vyr-grid-gap,24px));
}
.vyr-home-module-shell .vyr-post-card{
  background:var(--vyr-home-item-bg,var(--vyr-card-bg,#fff));
  border-width:var(--vyr-home-item-border-width,var(--vyr-card-border-width,1px));
  border-style:solid;
  border-color:var(--vyr-home-item-border-color,var(--vyr-border,#e2e8f0));
  border-radius:var(--vyr-home-item-radius,var(--vyr-card-radius,12px));
  margin:var(--vyr-home-item-margin,0);
  padding:var(--vyr-home-item-padding,0);
  box-shadow:var(--vyr-home-item-shadow,var(--vyr-card-shadow,none));
}

/* Home Module có Border-radius riêng; không kế thừa Card radius. */
.vyr-home-module-shell>.vyr-home-module-inner>.vyr-module{border-radius:0}

/* Button toàn site. Header và Slideshow có cấu hình riêng nên không bị ép theo rule này. */
.vyr-button-global,.vyr-section-source-button,.vyr-btn:not(.vyr-showcase-button){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:var(--vyr-button-margin,0);
  padding:var(--vyr-button-padding,11px 20px);
  border-width:var(--vyr-button-border-width,0);
  border-style:solid;
  border-color:var(--vyr-button-border-color,transparent);
  border-radius:var(--vyr-button-radius,8px);
  background:var(--vyr-button-bg,#2563eb);
  color:var(--vyr-button-color,#fff)!important;
  font-size:var(--vyr-button-font-size,16px);
  font-weight:var(--vyr-button-font-weight,600);
  font-style:var(--vyr-button-font-style,normal);
  text-transform:var(--vyr-button-text-transform,none);
  box-shadow:var(--vyr-button-shadow,none);
  line-height:1.25;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.vyr-button-global:hover,.vyr-section-source-button:hover,.vyr-btn:not(.vyr-showcase-button):hover{
  background:var(--vyr-button-hover-bg,#1d4ed8);
  color:var(--vyr-button-hover-color,#fff)!important;
  border-color:var(--vyr-button-hover-border-color,transparent);
  box-shadow:var(--vyr-button-hover-shadow,none);
  filter:none;
}

/* Tabs của Home Module: shorthand + typography/state đồng nhất với Admin. */
.vyr-home-module-shell .vyr-tab-buttons{
  justify-content:var(--vyr-module-tabs-justify,flex-start);
  gap:var(--vyr-module-tabs-gap,8px);
  margin:var(--vyr-module-tabs-margin,0 0 18px 0);
  padding-bottom:3px;
}
.vyr-home-module-shell .vyr-tab-button{
  padding:var(--vyr-module-tabs-padding,8px 14px);
  border-width:var(--vyr-module-tabs-border-width,1px);
  border-style:solid;
  border-color:var(--vyr-module-tabs-border,#cbd5e1);
  border-radius:var(--vyr-module-tabs-radius-css,999px);
  background:var(--vyr-module-tabs-bg,#fff);
  color:var(--vyr-module-tabs-text,#64748b);
  font-size:var(--vyr-module-tabs-size,16px);
  font-weight:var(--vyr-module-tabs-weight,500);
  text-transform:var(--vyr-module-tabs-transform,none);
  box-shadow:var(--vyr-module-tabs-shadow,none);
  transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.vyr-home-module-shell .vyr-tab-button:hover{
  color:var(--vyr-module-tabs-text-hover,#2563eb);
  background:var(--vyr-module-tabs-bg-hover,#fff);
  border-color:var(--vyr-module-tabs-border-hover,var(--vyr-module-tabs-border-active,#2563eb));
  box-shadow:var(--vyr-module-tabs-hover-shadow,none);
}
.vyr-home-module-shell .vyr-tab-button.is-active{
  color:var(--vyr-module-tabs-text-active,#fff);
  background:var(--vyr-module-tabs-bg-active,#2563eb);
  border-color:var(--vyr-module-tabs-border-active,#2563eb);
  box-shadow:var(--vyr-module-tabs-active-shadow,none);
}
@media(max-width:700px){
  .vyr-home-module-shell .vyr-tab-buttons{justify-content:flex-start;flex-wrap:nowrap}
  .vyr-home-module-shell .vyr-tab-button{font-size:var(--vyr-module-tabs-size-mobile,16px)}
}