/* ====== Layout chung ====== */
/* ===== Layout chung ===== */
/* ===== Layout chung (desktop) ===== */

:root{
  --cm2-gap: 28px;
  --cm2-pad: 16px;
  --cm2-stick-top: 16px;
  --cm2-max: 1600px;                 /* rộng hơn */
}
body.admin-bar{ --cm2-stick-top: calc(32px + 16px); }

.cm2-layout{
  display: grid;
  gap: var(--cm2-gap);
  max-width: var(--cm2-max);
  margin: 0 auto;
  padding: 0 var(--cm2-pad);
  align-items: start;
}

/* 3 cột: mở rộng sidebars và main */
.cm2-layout.has-left.has-right{
  grid-template-columns:
    clamp(300px, 19vw, 360px)        /* trái lớn hơn */
    minmax(0, 1fr)                   /* giữa linh hoạt */
    clamp(340px, 22vw, 420px);       /* phải lớn hơn */
}
/* chỉ trái / chỉ phải */
.cm2-layout.has-left:not(.has-right){  grid-template-columns: clamp(300px, 20vw, 360px) 1fr; }
.cm2-layout.has-right:not(.has-left){  grid-template-columns: 1fr clamp(340px, 22vw, 420px); }

/* Tăng thêm trên màn rất rộng */
@media (min-width: 1600px){
  :root{ --cm2-max: 1680px; }
}
@media (min-width: 1800px){
  :root{ --cm2-max: 1800px; }
}

/* ===== Sidebar dính khi cuộn ===== */
.cm2-left,
.cm2-right{
  position: sticky;
  top: var(--cm2-stick-top);
  align-self: start;
  /* KHÔNG set max-height/overflow để không có thanh cuộn riêng */
  background: #f8f9fb;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 0px;
}

/* === Spacing giữa các widget cột trái === */
.cm2-left .widget,
.cm2-left .widget_block,
.cm2-left .wp-block-group{
  /* tạo khoảng đệm + đường kẻ mảnh để tách khối */
  padding-bottom: 18px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px dashed #e9ecef !important;
}

/* Khối cuối không cần kẻ dưới / đệm dưới */
.cm2-left .widget:last-child,
.cm2-left .widget_block:last-child,
.cm2-left .wp-block-group:last-child{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* Tiêu đề widget – tránh sát vào khối trước, không bị xuống dòng lạ */
.cm2-left .widget-title,
.cm2-left .widgettitle,
.cm2-left h2, .cm2-left h3{
  margin: 1px 0 1px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== Mobile: ẩn 2 sidebar, giữ main nguyên ===== */
@media (max-width: 768px){
  .cm2-layout{
    display:block;
    padding:0;        /* bỏ padding */
    margin:0;         /* bỏ margin */
    max-width:100vw;  /* full chiều ngang */
    width:100%;       /* chắc chắn full */
  }
  .cm2-left,
  .cm2-right{
    display:none !important;
  }
}

/* ===== Giữ 3 nút trên 1 hàng trong bài viết đơn (mobile) ===== */
/* Trên mobile: ép single post full width */
@media (max-width: 768px) {
  .single .cm2-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important; /* chừa tí khoảng cách lề */
  }

  .single .cm2-layout .entry-content,
  .single .cm2-layout .article-inner {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Video khung rộng 16:9 và luôn full-width trên mobile/desktop */
.cm2-post-card .post-media iframe,
.cm2-post-card .post-media .wp-embedded-content {
  width: 100% !important;
  max-width: none !important;
  display: block;
}

@supports (aspect-ratio: 16/9) {
  .cm2-post-card .post-media iframe,
  .cm2-post-card .post-media .wp-embedded-content {
    aspect-ratio: 16 / 9;
    height: auto !important;
  }
}
/* dua css qua */