/* Text font family, font size and weight are theme-owned. Layout only. */
/* PLKM Video Landing - shortcode trang chủ gọn theo demo */
:root{--plkm-green:#14532d;--plkm-ink:#0f172a;--plkm-muted:#64748b;--plkm-orange:#c96a19}
.plkm-video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.plkm-video-card__media{position:relative;overflow:hidden;display:block;aspect-ratio:16/9;border-radius:8px;background:#e7ece4}
.plkm-video-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.plkm-video-card__media span{position:absolute;inset:50% auto auto 50%;width:42px;height:42px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;color:#fff;background:rgba(20,83,45,.9)}
.plkm-video-card h4{margin:8px 0 0}.plkm-video-card h4 a{color:var(--plkm-ink);text-decoration:none}

.plkm-home-video{max-width:1280px;margin:0 auto -28px;padding:12px 0 8px;}
.plkm-home-video *{box-sizing:border-box;}
.plkm-home-video-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.plkm-home-video-head>div{display:flex;align-items:baseline;gap:12px;min-width:0;flex-wrap:wrap}
.plkm-home-video-head h3{margin:0;line-height:1.2;color:var(--plkm-ink);letter-spacing:-.02em;white-space:nowrap}
.plkm-home-video-head p{margin:0;line-height:1.4;color:var(--plkm-muted)}
.plkm-home-video-all{flex:0 0 auto;line-height:1.4;color:var(--plkm-orange);text-decoration:none;padding:0;border:0;background:transparent;white-space:nowrap}
.plkm-home-video-all:hover{color:#9a4f12;text-decoration:underline}

/* Desktop: 1 video nổi bật + 3 video nhỏ cùng một hàng như demo */
.plkm-home-video-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,3fr);gap:12px;align-items:start}
.plkm-home-video-main{min-width:0;background:transparent}
.plkm-home-main-thumb,.plkm-home-thumb{position:relative;display:block;overflow:hidden;background:#edf1ee;border-radius:5px}
/* Desktop: crop thumbnail thấp hơn để khối Video gọn giống demo. Ảnh gốc vẫn giữ 16:9. */
.plkm-home-main-thumb{height:clamp(170px,13.5vw,190px)}
.plkm-home-thumb{height:clamp(88px,7.5vw,102px)}
.plkm-home-main-thumb img,.plkm-home-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.plkm-home-main-thumb:hover img,.plkm-home-thumb:hover img{transform:scale(1.015)}
/* Single centered play icon: presentation only, no font/glyph and no duplicate triangle. */
.plkm-home-main-thumb .plkm-home-play{
  position:absolute;inset:auto;top:50%;left:50%;right:auto;bottom:auto;z-index:2;
  display:grid;place-items:center;width:52px;height:52px;padding:0;
  transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.92);
  border-radius:50%;background:rgba(0,70,52,.9);color:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.22);pointer-events:none;
  transition:background-color .18s ease,box-shadow .18s ease;
}
.plkm-home-main-thumb .plkm-home-play::before{
  content:"";display:block;width:0;height:0;margin-left:3px;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-left:13px solid currentColor;
}
.plkm-home-main-thumb:hover .plkm-home-play,
.plkm-home-main-thumb:focus-visible .plkm-home-play{
  background:#d87516;box-shadow:0 5px 20px rgba(0,0,0,.3);
}
@media(max-width:600px){.plkm-home-main-thumb .plkm-home-play{width:46px;height:46px}}
.plkm-home-dur,.plkm-home-thumb i{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.82);color:#fff;font-style:normal;line-height:1;padding:4px 5px;border-radius:3px}
.plkm-home-main-meta{padding:6px 0 0;background:transparent;border:0}
.plkm-home-main-meta h4,.plkm-home-video-item h4{margin:0;line-height:1.35;}
.plkm-home-main-meta h4 a,.plkm-home-video-item h4 a{color:var(--plkm-ink);text-decoration:none;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.plkm-home-main-meta h4 a{-webkit-line-clamp:1}
.plkm-home-video-item h4 a{-webkit-line-clamp:2}

.plkm-home-video-side{display:grid;grid-template-columns:repeat(var(--plkm-side-count,3),minmax(0,1fr));gap:10px;align-items:start;min-width:0}
.plkm-home-video-item{display:block;min-width:0;background:transparent;border:0;border-radius:0;padding:0}
.plkm-home-video-item h4{margin-top:6px}

@media(max-width:900px){
  .plkm-home-video-grid{grid-template-columns:1fr;gap:10px}
  .plkm-home-video-side{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plkm-home-main-thumb{height:clamp(230px,38vw,320px)}
  .plkm-home-thumb{height:auto;aspect-ratio:16/9}
  .plkm-home-main-meta h4 a{-webkit-line-clamp:2}
}
@media(max-width:600px){
  .plkm-home-video{margin-bottom:-10px;padding:10px 0 8px}
  .plkm-home-video-head{align-items:flex-start;gap:8px;margin-bottom:9px}
  .plkm-home-video-head>div{gap:5px 9px}
  .plkm-home-video-head h3{}
  .plkm-home-video-head p{}
  .plkm-home-video-all{}
  /* Mobile: 1 video lớn full width + 3 video nhỏ đều nhau trên cùng một hàng. */
  .plkm-home-video-side{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .plkm-home-main-thumb{height:auto;aspect-ratio:16/9}
  .plkm-home-thumb{height:auto;aspect-ratio:16/9}
  .plkm-home-main-meta h4{}
  .plkm-home-video-item h4{line-height:1.3;margin-top:5px}
  .plkm-home-video-item h4 a{-webkit-line-clamp:2}
  .plkm-home-thumb i{right:3px;bottom:3px;padding:3px 4px}
}
@media(max-width:380px){
  .plkm-home-video-side{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .plkm-home-video-item h4{line-height:1.25}
  .plkm-home-video-head h3{}
}

/* V9.2 — mobile layout lock: 1 main + exactly 3 side cards in one row.
 * !important is deliberate because the parent theme also owns homepage grid rules.
 */
@media(max-width:600px){
  body .plkm-home-video .plkm-home-video-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:10px!important;
  }
  body .plkm-home-video .plkm-home-video-main{width:100%!important;min-width:0!important}
  body .plkm-home-video .plkm-home-video-side{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    width:100%!important;
    min-width:0!important;
    gap:7px!important;
  }
  body .plkm-home-video .plkm-home-video-item{width:auto!important;min-width:0!important;max-width:none!important}
  body .plkm-home-video .plkm-home-main-thumb,
  body .plkm-home-video .plkm-home-thumb{width:100%!important;height:auto!important;aspect-ratio:16/9!important}
}
@media(max-width:380px){
  body .plkm-home-video .plkm-home-video-side{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
}