/* ==========================================================================
   Home "Câu chuyện khách hàng" — frame y 3600–4384 (Figma home frame 3409:1942, nodes 3798:18602…19161).
   Stage = 1278.5×784 frame px, left edge at frame x 320.9 (featured cover, 3798:18637), top at frame y 3600.
   Offsets = frame coord − (320.9, 3600), frame = box + (10.2, 10.4). --u = 1px ≥1280 viewport, scales below; ≤849 stacks.
   ========================================================================== */
.ohio-h2sto{--u:1px;position:relative;background:#fff;overflow-x:clip;font-family:'Montserrat',sans-serif}
@media (max-width:1279px){.ohio-h2sto{--u:calc(100vw / 1280)}}
.ohio-h2sto__stage{position:relative;width:calc(1278.5 * var(--u));height:calc(784 * var(--u));margin-left:calc(50% - 639.1 * var(--u))}
.ohio-h2sto__stage *{box-sizing:border-box}
.ohio-h2sto a{color:inherit;text-decoration:none}
.ohio-h2sto :where(h2,h3,h4,p,span){text-transform:none;letter-spacing:0}
.ohio-h2sto__title,.ohio-h2sto__feat,.ohio-h2sto__list{position:absolute}
.ohio-h2sto__cover,.ohio-h2sto__ftitle,.ohio-h2sto__fex,.ohio-h2sto__date{position:absolute}

/* title 36px SemiBold #5c3d94 (3798:18604): box x 682.8 w 451 → centre 908.3 → 587.4; top 3647.7 → 47.7 */
.ohio-h2sto__title{left:calc(587.4 * var(--u));top:calc(47.7 * var(--u));transform:translateX(-50%);width:max-content;margin:0;white-space:nowrap;
  font:600 calc(36 * var(--u))/calc(44 * var(--u)) 'Montserrat',sans-serif;color:#5c3d94;text-transform:none;letter-spacing:0}

/* featured: cover 675.9×379.4 at (320.9,3732.5); title 22.4px at y 4130.7; excerpt 19.2px at y 4194.5; button y 4255.9; date y 4259.6 */
.ohio-h2sto__feat{left:0;top:calc(132.5 * var(--u));width:calc(675.9 * var(--u));height:calc(560 * var(--u))}
.ohio-h2sto__cover{left:0;top:0;width:100%;height:calc(379.4 * var(--u));border-radius:calc(20 * var(--u));overflow:hidden;background:#e9e2f2}
.ohio-h2sto__cover img,.ohio-h2sto__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ohio-h2sto__ftitle{left:0;top:calc(398.2 * var(--u));width:calc(600 * var(--u));margin:0;color:#2c2c2c;
  font:600 calc(22.397 * var(--u))/calc(26.9 * var(--u)) 'Montserrat',sans-serif;text-transform:none;letter-spacing:0}
.ohio-h2sto__fex{left:0;top:calc(462 * var(--u));width:100%;margin:0;color:#474747;font:400 calc(19.198 * var(--u))/calc(25 * var(--u)) 'Montserrat',sans-serif}
.ohio-h2sto__ftitle,.ohio-h2sto__fex,.ohio-h2sto__ititle,.ohio-h2sto__iex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ohio-h2sto__feat .ohio-h2sto__more{position:absolute;left:calc(-1.5 * var(--u));top:calc(523.4 * var(--u))}
.ohio-h2sto__date{right:0;top:calc(527.1 * var(--u));display:flex;align-items:center;gap:calc(7 * var(--u));color:#787889;white-space:nowrap;
  font:400 calc(17.466 * var(--u))/calc(21 * var(--u)) 'Montserrat',sans-serif}
.ohio-h2sto__date svg{width:calc(19 * var(--u));height:calc(19 * var(--u));flex:none}

/* "Xem thêm" outline button 106.2×25.5, radius 6.7, 10.2px Medium #422666, arrow 6.7×5.6 (3798:19112) */
.ohio-h2sto__more{position:relative;display:block;color:#422666;width:calc(106.2 * var(--u));height:calc(25.5 * var(--u));border:calc(.635 * var(--u)) solid #422666;border-radius:calc(6.7 * var(--u));
  color:#422666;font:500 calc(10.158 * var(--u))/calc(12 * var(--u)) 'Montserrat',sans-serif;background:#fff}
.ohio-h2sto__more span{position:absolute;left:calc(19.4 * var(--u));top:calc(5.3 * var(--u))}
.ohio-h2sto__more svg{position:absolute;left:calc(78.9 * var(--u));top:calc(9.4 * var(--u));width:calc(6.7 * var(--u));height:calc(5.6 * var(--u))}

/* list: thumbs 302.3×170 at x 1023 (702.1), pitch 192, first top 3731.7 (131.7); text at x 1342.7 (+319.7); scroll track 4.9 wide, h 553.2 */
.ohio-h2sto__list{left:calc(702.1 * var(--u));top:calc(131.7 * var(--u));width:calc(576.4 * var(--u));height:calc(553.9 * var(--u));overflow-y:auto;overscroll-behavior:contain}
.ohio-h2sto__list::-webkit-scrollbar{width:calc(4.9 * var(--u))}
.ohio-h2sto__list::-webkit-scrollbar-track{background:#f7f7f7;border-radius:calc(2.5 * var(--u))}
.ohio-h2sto__list::-webkit-scrollbar-thumb{background:linear-gradient(160deg,#f68c1e,#f7b318);border-radius:calc(2.5 * var(--u))}
@supports not selector(::-webkit-scrollbar){.ohio-h2sto__list{scrollbar-width:thin;scrollbar-color:#f68c1e #f7f7f7}}
.ohio-h2sto__item{display:grid;grid-template-columns:calc(302.3 * var(--u)) calc(232 * var(--u));column-gap:calc(17.4 * var(--u));height:calc(170 * var(--u));margin-bottom:calc(22 * var(--u))}
.ohio-h2sto__thumb{display:block;height:100%;border-radius:calc(12 * var(--u));overflow:hidden;background:#e9e2f2}
.ohio-h2sto__body{margin-top:calc(-3.1 * var(--u))}
.ohio-h2sto__ititle{margin:0;color:#2c2c2c;font:600 calc(17.065 * var(--u))/calc(20 * var(--u)) 'Montserrat',sans-serif;text-transform:none;letter-spacing:0}
.ohio-h2sto__iex{margin:calc(8.9 * var(--u)) 0 calc(16.6 * var(--u));color:#474747;font:400 calc(17.065 * var(--u))/calc(22.4 * var(--u)) 'Montserrat',sans-serif}
.ohio-h2sto__body .ohio-h2sto__more{margin-left:calc(-1.2 * var(--u))}

@media (max-width:849px){
  .ohio-h2sto{--u:1px}
  .ohio-h2sto__stage{width:auto;height:auto;margin:0;padding:32px 16px 36px}
  .ohio-h2sto__title,.ohio-h2sto__feat,.ohio-h2sto__list,.ohio-h2sto__cover,.ohio-h2sto__ftitle,.ohio-h2sto__fex,.ohio-h2sto__date,.ohio-h2sto__feat .ohio-h2sto__more{position:static;transform:none;width:auto;height:auto}
  .ohio-h2sto__title{text-align:center;font-size:26px;line-height:1.25;white-space:normal;margin-bottom:20px}
  .ohio-h2sto__cover{display:block;aspect-ratio:16/9;border-radius:16px}
  .ohio-h2sto__ftitle{margin:14px 0 6px;font-size:18px;line-height:1.35}
  .ohio-h2sto__fex{font-size:15px;line-height:1.5}
  .ohio-h2sto__feat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .ohio-h2sto__cover,.ohio-h2sto__ftitle,.ohio-h2sto__fex{flex:0 0 100%}
  .ohio-h2sto__title{width:auto}
  .ohio-h2sto__feat .ohio-h2sto__more{position:relative;left:auto;top:auto;width:calc(106.2 * var(--u));height:calc(25.5 * var(--u));margin-top:12px}
  .ohio-h2sto__date{display:flex;margin-top:12px;font-size:14px}
  .ohio-h2sto__list{display:block;margin-top:24px;max-height:none;overflow:visible}
  .ohio-h2sto__item{grid-template-columns:128px 1fr;column-gap:12px;height:auto;margin-bottom:18px}
  .ohio-h2sto__thumb{height:auto;aspect-ratio:16/9;border-radius:10px}
  .ohio-h2sto__body{margin-top:0}
  .ohio-h2sto__ititle{font-size:14px;line-height:1.3}
  .ohio-h2sto__iex{font-size:13px;line-height:1.45;margin:4px 0 8px}
}
.ohio-h2sto .ohio-h2sto__more,.ohio-h2sto .ohio-h2sto__more span{color:#422666}   /* 3798:19115… Montserrat 500 #422666 */
.ohio-h2sto__all{display:none}   /* mobile frame only */

/* ≤767: Figma "Trang chủ – Mobile" 3637:7021, Section / Câu chuyện khách hàng 3637:7288 (390 frame px = page px).
   Tím 50, pad 40/20, gap 20: 32×3 orange bar over a left-aligned H2 (gap 8) · featured card (border #ECEAF0 r16,
   photo 190, body p16 gap 8: title 16/24 ×3, excerpt 13/20 ×3, "Xem thêm →" | date 12) · 3 row cards 116 (p12 gap 12,
   thumb 160×90 r10, title 15/22 ×2, excerpt 13/20 ×2) · outline button 350×44 r12 "Xem tất cả câu chuyện →". */
@media (max-width:767px){
  .ohio-h2sto{background:#f7f3fb}
  .ohio-h2sto__stage{display:flex;flex-direction:column;gap:20px;padding:40px 20px}
  .ohio-h2sto .ohio-h2sto__title{margin:0;text-align:left;color:#422666!important}
  .ohio-h2sto__title::before{content:"";display:block;width:32px;height:3px;margin-bottom:8px;border-radius:2px;background:var(--ohio-cta,#f6911c)}
  .ohio-h2sto__feat{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;border:1px solid #eceaf0;border-radius:16px;background:#fff;overflow:hidden}
  .ohio-h2sto__feat>*{left:auto;top:auto}
  .ohio-h2sto__cover{flex:0 0 190px;aspect-ratio:auto;border-radius:0}
  .ohio-h2sto .ohio-h2sto__ftitle{flex:none;margin:16px 16px 0;-webkit-line-clamp:3;font:600 16px/24px var(--ohio-font-body);color:#422666}
  .ohio-h2sto .ohio-h2sto__fex{flex:none;margin:8px 16px 0;-webkit-line-clamp:3;font:400 13px/20px var(--ohio-font-body)!important;color:#6e6780}
  .ohio-h2sto .ohio-h2sto__feat .ohio-h2sto__more{align-self:flex-start;margin:8px 16px 16px}
  .ohio-h2sto .ohio-h2sto__date{position:absolute;right:16px;bottom:16px;margin:0;font:400 12px/20px var(--ohio-font-body)!important;color:#6e6780}
  .ohio-h2sto__feat{position:relative;left:auto;top:auto}
  .ohio-h2sto__date svg{display:none}
  .ohio-h2sto .ohio-h2sto__more{display:flex;align-items:center;gap:6px;width:auto;min-width:0;height:20px;padding:0;border:0;border-radius:0;background:none;color:#5e3d8a}
  .ohio-h2sto .ohio-h2sto__more span{position:static;transform:none;color:#5e3d8a;line-height:20px!important}
  .ohio-h2sto .ohio-h2sto__more svg{display:none}
  .ohio-h2sto .ohio-h2sto__more::after{content:"";width:16px;height:16px;background:url(../../img/home2/mobile-arrow-right.svg) center/16px no-repeat}
  .ohio-h2sto__list{display:flex;flex-direction:column;gap:20px;margin:0}
  .ohio-h2sto__item{grid-template-columns:160px minmax(0,1fr);column-gap:12px;margin:0;padding:12px;border:1px solid #eceaf0;border-radius:12px;background:#fff}
  .ohio-h2sto__item:nth-child(n+4),.ohio-h2sto__body .ohio-h2sto__more{display:none}
  .ohio-h2sto__thumb{height:90px;aspect-ratio:auto;border-radius:10px}
  .ohio-h2sto .ohio-h2sto__ititle,.ohio-h2sto .ohio-h2sto__ititle a{font:600 15px/22px var(--ohio-font-body)!important;color:#422666}
  .ohio-h2sto .ohio-h2sto__iex{margin:6px 0 0;font:400 13px/20px var(--ohio-font-body)!important;color:#6e6780}
  .ohio-h2sto__all{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1.5px solid #422666;border-radius:12px;
    font:600 14px/20px var(--ohio-font-body);letter-spacing:.56px;text-transform:uppercase;color:#422666}
  .ohio-h2sto__all::after{content:"";width:18px;height:18px;background:url(../../img/home2/mobile-arrow-right.svg) center/18px no-repeat}
}