/* 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))}
@media(max-width:700px){
  .vyr-site-frame--home{width:min(calc(100% - (var(--vyr-home-gutter-mobile,10px) * 2)),var(--vyr-home-max))}
  .vyr-site-frame--inner{width:min(calc(100% - (var(--vyr-inner-gutter-mobile,10px) * 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}

/*
 * Home Module dùng cùng hệ Max-width/Gutter với Trang chủ.
 * - Module Toàn hàng: background của shell vẫn full-width; inner mới co theo Home Gutter.
 * - Module đã nằm bên trong .vyr-site-frame--home: không co thêm lần thứ hai.
 * Nhờ vậy loại bỏ lớp container/page_padding_x cũ gây hai dải trắng lớn hai bên.
 */
.vyr-home-module-inner--container{
  width:min(calc(100% - (var(--vyr-home-gutter) * 2)),var(--vyr-home-max));
}
.vyr-home-module-inner--full{
  width:100%;
  padding-inline:var(--vyr-home-gutter);
}
.vyr-site-frame--home .vyr-home-module-inner--container{
  width:100%;
  max-width:none;
}
.vyr-site-frame--home .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:700px){
  /* Mobile dùng đúng Home Gutter Mobile, không còn hard-code 14px/lề. */
  .vyr-home-module-inner--container{
    width:min(calc(100% - (var(--vyr-home-gutter-mobile,10px) * 2)),var(--vyr-home-max));
  }
  .vyr-home-module-inner--full{padding-inline:var(--vyr-home-gutter-mobile,10px)}
  .vyr-site-frame--home .vyr-home-module-inner--container{width:100%;max-width:none}
  .vyr-site-frame--home .vyr-home-module-inner--full{padding-inline:0}
}

/*
 * Tên Module dài trên mobile: PC vẫn giữ cách trình bày hiện tại;
 * mobile cho phần chữ co lại và cân dòng, tránh một hàng quá dài/nhỏ.
 */
@media(max-width:580px){
  .vyr-module-title--decor-side_lines{
    gap:min(var(--vyr-module-title-line-gap,8px),8px);
  }
  .vyr-module-title--decor-side_lines::before,
  .vyr-module-title--decor-side_lines::after{
    min-width:12px;
  }
  .vyr-module-title--decor-side_lines .vyr-module-title-link,
  .vyr-module-title--decor-side_lines>.vyr-module-title-text{
    flex:0 1 auto;
    min-width:0;
  }
  /*
   * Khung H2 vẫn full-width để giữ 2 line.
   * QUAN TRỌNG:
   * - Ngưỡng wrap đặt ở label (vùng chữ), không đặt ở box nền.
   * - Box nền giữ width:auto và padding/border lấy nguyên từ Admin
   *   qua --vyr-module-title-padding / --vyr-module-title-border-width.
   * Vì vậy khi đổi Padding trong Admin, nền sẽ nở/thu theo đúng giá trị đó.
   */
  .vyr-module-title--decor-side_lines .vyr-module-title-link{
    display:inline-flex;
    min-width:0;
    max-width:100%;
    justify-content:center;
  }
  .vyr-module-title--decor-side_lines .vyr-module-title-text{
    display:inline-flex;
    width:auto;
    min-width:0;
    max-width:100%;
    margin-inline:auto;
  }
  .vyr-module-title--decor-side_lines .vyr-module-title-label{
    display:block;
    min-width:0;
    width:auto;
    max-width:min(72vw,26ch);
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    line-height:1.25;
    text-align:center;
  }
}

/* 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)}
}
/* FAQ inline trong nội dung bài viết: [[FAQ]] ... [[/FAQ]] */
.vyr-rich-content .vyr-faq-block{
  margin:20px 0;
}
.vyr-rich-content .vyr-faq-title{
  display:none;
}
.vyr-rich-content .vyr-faq-list{
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}
.vyr-rich-content .vyr-faq-item{
  margin:0;
  border:0;
  background:transparent;
}
.vyr-rich-content .vyr-faq-item + .vyr-faq-item{
  border-top:1px solid var(--vyr-border,#e2e8f0);
}
.vyr-rich-content .vyr-faq-item > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:5px 0;
  list-style:none;
  cursor:pointer;
  font-weight:600;
  line-height:1.45;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.vyr-rich-content .vyr-faq-item > summary::-webkit-details-marker{
  display:none;
}
.vyr-rich-content .vyr-faq-question{
  min-width:0;
  -webkit-user-select:none;
  user-select:none;
}
.vyr-rich-content .vyr-faq-toggle{
  position:relative;
  display:block;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border:1px solid var(--vyr-border,#e2e8f0);
  border-radius:50%;
  background:#fff;
}
/* Vẽ + / − bằng 2 nét CSS để luôn nằm đúng tâm hình tròn. */
.vyr-rich-content .vyr-faq-toggle::before,
.vyr-rich-content .vyr-faq-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:1.5px;
  background:#ef2b2d;
  border-radius:2px;
  transform:translate(-50%,-50%);
}
.vyr-rich-content .vyr-faq-toggle::after{
  transform:translate(-50%,-50%) rotate(90deg);
}
.vyr-rich-content .vyr-faq-item[open] .vyr-faq-toggle::after{
  display:none;
}
.vyr-rich-content .vyr-faq-answer{
  padding:0 0 14px;
}
.vyr-rich-content .vyr-faq-answer > :first-child{
  margin-top:0;
}
.vyr-rich-content .vyr-faq-answer > :last-child{
  margin-bottom:0;
}
.vyr-rich-content .vyr-faq-intro{
  margin:0 0 12px;
}
@media(max-width:700px){
  .vyr-rich-content .vyr-faq-block{margin:16px 0}
  .vyr-rich-content .vyr-faq-item > summary{padding:5px 0;gap:10px}
  .vyr-rich-content .vyr-faq-toggle{flex-basis:32px;width:32px;height:32px}
  .vyr-rich-content .vyr-faq-toggle::before,
  .vyr-rich-content .vyr-faq-toggle::after{width:13px}
  .vyr-rich-content .vyr-faq-answer{padding:0 0 10px}
}