/* ==========================================================================
   Front page v2 — talkshow (frame y 6883–7747), Figma "Trang Chủ .1 - v2" 3409:1941, node group 3798:18372…19347.
   Values are frame px at 1920 (docs/figma/specs-v3/home/home-text-spec.tsv + home-boxes.tsv, boxes +10.2/+10.4).
   Content column 1197.5 wide at x 353.7 (centre 952.5 = 7.5 px left of the viewport centre, as drawn).
   ========================================================================== */
.ohio-h2ts{background:#fbf8ff;padding:36.3px 0 38.3px;overflow:hidden}          /* band 3798:18372 fill #FBF8FF */
.ohio-h2ts__in{width:1197.5px;max-width:100%;margin:0 auto;position:relative;left:-7.5px}
.ohio-h2ts__title{margin:0 0 7.4px;padding:0;height:44px;text-align:center;text-transform:none;white-space:nowrap;       /* 3798:18787 36px SemiBold #5c3d94 */
  font:600 36px/44px 'Montserrat',sans-serif;letter-spacing:0;color:#5c3d94}
.ohio-h2ts__title:before,.ohio-h2ts__title:after{display:none}

/* topic row: 299 tall, pitch 344.4 */
.ohio-h2ts__row{margin-bottom:45.4px}
.ohio-h2ts__head{position:relative;padding:0 0 0 22.9px;height:42px}
.ohio-h2ts__head:before{content:"";position:absolute;left:12px;top:6.3px;width:1.05px;height:31.5px;    /* 3798:18892 orange bar */
  background:linear-gradient(90deg,#f68c1e,#f68f1d 34%,#f69a1c 64%,#f7ac19 91.5%,#f7b318)}
.ohio-h2ts__head small{display:block;font:400 14.69px/18px 'Montserrat',sans-serif;color:#58595c}
.ohio-h2ts__head strong{display:block;margin-top:.9px;font:700 18.887px/23px 'Montserrat',sans-serif;color:#58595c}

/* cards: 372.1 × 193.9, pitch 412.7 (gap 40.6), title 12px in, 15.739px Medium #474747, 2 lines @19 */
.ohio-h2ts__cards{display:grid;grid-template-columns:repeat(3,372.1px);gap:0 40.6px;margin-top:16.5px;margin-left:0}
.ohio-h2ts__card{margin:0;min-width:0}
.ohio-h2ts__media{position:relative;display:block;height:193.9px;border-radius:6px;overflow:hidden;background:#d9cfe8}
.ohio-h2ts__media img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.ohio-h2ts__media:after{content:"";position:absolute;inset:0;pointer-events:none;     /* purple tint of the frame thumbnails, strongest bottom-left */
  background:linear-gradient(0deg,rgba(78,44,124,.6) 0,rgba(78,44,124,0) 62%),linear-gradient(90deg,rgba(112,78,166,.5) 0,rgba(130,96,180,.25) 48%,rgba(160,130,200,0) 100%)}
.ohio-h2ts__play{position:absolute;z-index:1;left:50%;top:50%;width:41.4px;height:41.4px;margin:-20.7px 0 0 -20.7px;border:.83px solid #fff;border-radius:50%;
  background:rgba(255,255,255,.12);box-sizing:border-box}
.ohio-h2ts__play:before{content:"";position:absolute;left:14.3px;top:11px;width:15.8px;height:18.1px;background:url(../../img/home2/talkshow-play.svg) 0 0/100% 100% no-repeat}
.ohio-h2ts__badge{position:absolute;z-index:1;left:12px;bottom:12.7px;display:flex;align-items:center;gap:6.6px}
.ohio-h2ts__badge i{display:block;width:16.9px;height:28px;background:url(../../img/home2/talkshow-mic.svg) 0 0/100% 100% no-repeat}
.ohio-h2ts__badge b{font:700 14.69px/15.8px 'Montserrat',sans-serif;color:#fff}
.ohio-h2ts__t{margin:8.7px 0 0;padding:0 12px;max-width:100%;font:500 15.739px/19px 'Montserrat',sans-serif;letter-spacing:0;text-transform:none;color:#474747;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ohio-h2ts__t a{color:inherit;text-decoration:none}
.ohio-h2ts__t a:hover{color:#5c3d94}

/* button 3798:19339: 215.5 × 51.7, 1.29 #422666 outline, r 13.6, label 21px Medium, arrow 13.5×11.3 */
.ohio-h2ts__more{display:flex;align-items:center;justify-content:center;gap:7.8px;box-sizing:border-box;width:215.5px;height:51.7px;min-height:0;margin:-2.5px auto 0;padding:0;
  border:1.29px solid #422666;border-radius:13.6px;background:transparent;box-shadow:none;cursor:pointer;
  font:500 21px/26px 'Montserrat',sans-serif;letter-spacing:0;text-transform:none;color:#422666}
.ohio-h2ts__more i{display:block;width:13.5px;height:11.3px;background:url(../../img/home2/talkshow-arrow.svg) 0 0/100% 100% no-repeat}
.ohio-h2ts__more.is-open i{transform:rotate(-90deg)}
.ohio-h2ts__more:hover{background:#422666;color:#fff}
.ohio-h2ts__more:hover i{filter:brightness(0) invert(1)}
.ohio-h2ts__row[hidden]{display:none}

/* below 1280: scale the column down; ≤849: stack */
@media (max-width:1279px){
  .ohio-h2ts__in{left:0;width:auto;padding:0 24px}
  .ohio-h2ts__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
  .ohio-h2ts__media{height:auto;aspect-ratio:372.1/193.9}
  .ohio-h2ts__title{font-size:clamp(24px,3.4vw,36px);white-space:normal;height:auto}
}
@media (max-width:849px){
  .ohio-h2ts{padding:28px 0}
  .ohio-h2ts__in{padding:0 16px}
  .ohio-h2ts__title{font-size:22px;line-height:1.3;margin-bottom:16px}
  .ohio-h2ts__row{margin-bottom:24px}
  .ohio-h2ts__cards{grid-template-columns:1fr;gap:16px}
  .ohio-h2ts__t{padding:0 4px}
}

/* ≤767: Figma "Trang chủ – Mobile" 3637:7021, Section / Talkshow 3765:10960 (390 frame px = page px).
   Grey 50, pad 40/20, gap 24: title + 40×3 bar · per topic: 4×40 orange bar + "Chuyên đề" 13/18 / topic 15/22 uppercase,
   then a sideways row of 169-wide cards (gap 12): thumb 169×96 r10 with a 34 white play button, title 12/17 ×2 ·
   outline button 220×48 r12 "Xem thêm →". */
@media (max-width:767px){
  .ohio-h2ts{padding:40px 0;background:#f6f5f8}
  .ohio-h2ts__in{display:flex;flex-direction:column;gap:24px;padding:0 20px}
  .ohio-h2ts .ohio-h2ts__title{max-width:310px;margin:0 auto;color:#422666!important} /* 3765:10962 wraps after "SĨ" */
  .ohio-h2ts .ohio-h2ts__title:after{content:"";display:block;width:40px;height:3px;margin:12px auto 0;border-radius:2px;background:var(--ohio-cta,#f6911c)}
  .ohio-h2ts__row{margin:0}
  .ohio-h2ts__head{height:40px;padding-left:14px}
  .ohio-h2ts__head:before{left:0;top:0;width:4px;height:40px;border-radius:2px;background:#f6911c}
  .ohio-h2ts__head small{font:400 13px/18px var(--ohio-font-body);color:#6e6780}
  .ohio-h2ts .ohio-h2ts__head strong{margin:0;font:700 15px/22px var(--ohio-font-body)!important;text-transform:uppercase;color:#2a2633}
  .ohio-h2ts__cards{display:flex;gap:12px;margin:12px 0 0;overflow-x:auto; /* 3765:10970: rail clips at the 350 column */scroll-snap-type:x mandatory;scrollbar-width:none}
  .ohio-h2ts__cards::-webkit-scrollbar{display:none}
  .ohio-h2ts__card{flex:0 0 169px;scroll-snap-align:start}
  .ohio-h2ts__media{height:96px;aspect-ratio:auto;border-radius:10px}
  .ohio-h2ts__badge{display:none}
  .ohio-h2ts__play{width:34px;height:34px;margin:-17px 0 0 -17px;border:0;background:#fff}
  .ohio-h2ts__play:before{left:12px;top:11px;width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 2.2v7.6L9.6 6z' fill='%23422666'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .ohio-h2ts__t{margin-top:8px;padding:0;font:500 12px/17px var(--ohio-font-body);color:#2a2633}
  .ohio-h2ts .ohio-h2ts__more{width:220px;height:48px;margin:0 auto;gap:8px;border:1.5px solid #422666;border-radius:12px;background:#fff}
  .ohio-h2ts .ohio-h2ts__more,.ohio-h2ts .ohio-h2ts__more *{font-size:14px!important;font-weight:700!important;line-height:20px!important;letter-spacing:.56px!important}
  .ohio-h2ts__more i{width:16px;height:16px;background:url(../../img/home2/mobile-arrow-right.svg) center/16px no-repeat}
}