#dhinhthanh{margin-bottom:10px;display:grid;gap:10px;grid-template-columns:2fr 1fr} #dhinhthanh .boxptth>div.dgtab{display:grid;gap:10px;grid-template-columns:55px 85px 1fr} #dhinhthanh .boxptth a{position:relative;margin-bottom:12px;font-family:var(--font-family-bar);font-size:25px;line-height:1.2;color:#AAA;font-weight:400;text-transform:uppercase} #dhinhthanh .boxptth a:hover{color:RED} #dhinhthanh .boxptth a.active{color:#FFF} #dhinhthanh .boxptth>div.dgcontent,#dlichphatsong>ul{height:418px} #dhinhthanh .boxptth>div.dgcontent>.dxradio{display:none} #dhinhthanh .dglivetv-container,#dhinhthanh .dgliveradio-container{margin:0;max-width:800px} .dlphatsong{padding:0;margin:0 0 12px 0;display:flex;align-items:center;justify-content:space-between} .dlphatsong h3{font-weight:bold;color:#FFF;font-size:18px} .dlphatsong select{border:1px solid #999;border-radius:4px;font-size:14px;font-weight:500;line-height:20px;text-align:left;color:#FFF;padding:8px;background:#0c3054} .dlphatsong option{background:#102b60;color:#FFF;border-radius:4px} #dlichphatsong{width:100%} #dlichphatsong>ul,#dlichphatsong>ul>li{list-style:none} #dlichphatsong>ul{overflow-y:auto;position:relative;padding:0 8px 0 0;background:#05192d} #dlichphatsong>ul>li{align-items:center;border-radius:4px;background:#0c3044;padding:8px;display:grid;grid-template-columns:50px 1fr;gap:5px;margin:10px 0 10px 10px;cursor:pointer} #dlichphatsong>ul>li>span.time{display:block;font-size:14px;font-weight:400;line-height:22px;text-align:left;margin-right:0;color:#AAA} #dlichphatsong>ul>li>div.title{font-size:13px;font-weight:400;line-height:20px;text-align:left;color:#fff;margin-right:6px} #dlichphatsong>ul>li>div.title>h3>a{color:#999;font-weight:normal;font-size:15px} #dlichphatsong>ul>li.live{background:#0c3055;grid-template-columns:50px 1fr 65px} #dlichphatsong>ul>li.live>span.time{color:#FFF} #dlichphatsong>ul>li.live>div.title>h3>a{color:#FFF;font-size:16px;font-weight:bold} #dlichphatsong>ul>li.live>div.title>h3>a:hover{color:RED} #dlichphatsong>ul>li>div.title>div{color:#AAA} #dlichphatsong>ul>li>div.live{background:RED;color:#FFF;padding:5px;border-radius:5px;width:60px;height:30px;font-size:12px;font-family:Roboto} @media (max-width:1024px){#dhinhthanh{grid-template-columns:600px 1fr} #dhinhthanh .boxptth>div.dgcontent,#dlichphatsong>ul{height:340px} } @media (max-width:1024px) and (min-width:576px){#dlichphatsong>ul>li.live>div.title>h3>a{font-size:13px} #dlichphatsong>ul>li>div.title>h3>a{font-size:12px} .dlphatsong h3{font-size:15px} } @media (max-width:980px){#dhinhthanh{grid-template-columns:1fr} } @media (max-width:820px){#dhinhthanh .boxptth>div.dgcontent,#dlichphatsong>ul{height:393px} } @media (max-width:576px){#dhinhthanh .boxptth a{font-size:17px} #dhinhthanh .boxptth>div.dgtab{grid-template-columns:50px 80px 1fr} #dhinhthanh .boxptth>div.dgcontent{height:222px} .dlphatsong h3{font-size:13px;margin-right:10px;color:#DDD} .dlphatsong select{padding:5px} .dlphatsong{margin:0 0 10px 0;justify-content:flex-end} #dlichphatsong>ul{height:250px} }/* Badge "TRỰC TIẾP" trên player LIVE truyền hình (giống trang /ptth): pill đỏ + chấm nhấp nháy */ #dhinhthanh .boxptth .dxtv{position:relative} #dhinhthanh .live-badge{position:absolute;top:12px;left:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;background:#c1041c;color:#fff;font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:4px;text-transform:uppercase;pointer-events:none} #dhinhthanh .live-badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:th-live-pulse 1.5s ease-in-out infinite} @keyframes th-live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}} /* Ẩn badge khi player đã bắt đầu phát (vjs-has-started) — khỏi chiếm chỗ, giống /ptth ẩn poster khi play */ #dhinhthanh .boxptth .dxtv:has(.video-js.vjs-has-started) .live-badge{display:none} /* Chip "Xem lại" + nhãn "Sắp phát" trong lịch phát sóng trang chủ — cùng khuôn với sidebar /ptth (.replay-chip trong custom-260703.css), viết lại ở đây vì trang chủ báo không nạp CSS của /ptth */ #dlichphatsong>ul>li>div.title>a.replay-chip{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 9px;border-radius:999px;background:rgba(220,38,38,.14);border:1px solid rgba(220,38,38,.5);color:#FCA5A5;font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;transition:background-color .2s ease,color .2s ease} #dlichphatsong>ul>li>div.title>a.replay-chip:hover{background:#c1041c;color:#FFF} #dlichphatsong>ul>li>div.title>a.replay-chip>.replay-chip-play{font-size:9px} #dlichphatsong>ul>li>div.title>div.ps-soon{margin-top:6px;font-size:11px;color:#AAA} /* ============================================================================ Khối B trang chủ BÁO — 2 tầng dưới player LIVE (views/.../baothanhhoa/__ptth_block.htm) .ptth-row--vod : Chương trình Truyền hình, thẻ 16:9, 4/view desktop -> 12 thẻ = 3 slide chẵn .ptth-row--aod : Chương trình Phát thanh, thẻ playlist 1 dòng, 4/view -> 8 thẻ = 2 slide chẵn Hai tầng CỐ Ý khác hình dạng (nhìn vs nghe), tầng aod cao ~1/3 tầng vod nên tổng khối chỉ tăng ~110px thay vì gấp đôi. Nền kế thừa .topic (#002e44) nên mọi màu chữ lấy tông sáng. ========================================================================== */ .ptth-row{margin-top:24px} .ptth-row__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px} .ptth-row__title{font-family:var(--font-family-bar);font-size:22px;line-height:1.2;color:#FFF;font-weight:400;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px} .ptth-row__title>i{color:#c1041c;font-size:20px} .ptth-row__more{font-size:14px;font-weight:500;color:#AAA;white-space:nowrap} .ptth-row__more::after{content:" ›"} .ptth-row__more:hover{color:#FFF} /* Nút điều hướng: swiper mặc định canh giữa chiều cao slide -> với dải aod thấp thì đè lên chữ. Ghi đè về đúng giữa vùng ảnh của từng tầng. */ .ptth-row .swiper-button-prev,.ptth-row .swiper-button-next{color:#FFF;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);transition:background-color .2s ease} .ptth-row .swiper-button-prev:hover,.ptth-row .swiper-button-next:hover{background:#c1041c} .ptth-row .swiper-button-prev::after,.ptth-row .swiper-button-next::after{font-size:15px;font-weight:700} .ptth-row .swiper-button-disabled{opacity:0;pointer-events:none} /* --- B2 Truyền hình: thẻ 16:9 ------------------------------------------- */ .ptth-vod-swiper .swiper-button-prev,.ptth-vod-swiper .swiper-button-next{top:32%} .ptth-vod-card{display:block} .ptth-vod-card__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#05192d} .ptth-vod-card__thumb>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} .ptth-vod-card:hover .ptth-vod-card__thumb>img{transform:scale(1.05)} .ptth-vod-card__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(193,4,28,.9);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;pointer-events:none} .ptth-vod-card__play>svg{width:20px;height:20px;fill:#FFF} .ptth-vod-card:hover .ptth-vod-card__play{opacity:1} .ptth-vod-card__cate{display:block;margin-top:8px;font-size:12px;font-weight:600;color:#c1041c;text-transform:uppercase} .ptth-vod-card__title{margin:4px 0 0;font-size:15px;font-weight:500;line-height:1.4;color:#FFF;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ptth-vod-card:hover .ptth-vod-card__title{color:#FCA5A5} /* --- B3 Phát thanh: thẻ playlist 1 dòng, cao ~1/3 thẻ B2 ----------------- */ .ptth-aod-strip .swiper-button-prev,.ptth-aod-strip .swiper-button-next{top:50%} .ptth-aod-card{display:grid;grid-template-columns:56px 1fr 36px;align-items:center;gap:10px;padding:8px;border-radius:8px;background:#0c3044;border:1px solid transparent;transition:border-color .2s ease} .ptth-aod-card:hover{border-color:rgba(193,4,28,.5)} .ptth-aod-card__cover{width:56px;height:56px;border-radius:6px;overflow:hidden;background:#05192d;display:block;flex-shrink:0} .ptth-aod-card__cover>img{width:100%;height:100%;object-fit:cover;display:block} .ptth-aod-card__body{min-width:0} .ptth-aod-card__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:500;line-height:1.35;color:#FFF} .ptth-aod-card__title:hover{color:#FCA5A5} .ptth-aod-card__meta{margin-top:4px;display:flex;align-items:center;gap:8px;font-size:11px;color:#AAA} .ptth-aod-card__cate{color:#7FB2D8;text-transform:uppercase;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ptth-aod-card__dur{white-space:nowrap} .ptth-aod-card__dur::before{content:"⏱ "} .ptth-aod-card__play{width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:rgba(193,4,28,.85);display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;transition:background-color .2s ease} .ptth-aod-card__play:hover{background:#c1041c} .ptth-aod-card__play>svg{width:16px;height:16px;fill:#FFF} .ptth-aod-card__play>.ico-pause,.ptth-aod-card__play.is-playing>.ico-play{display:none} .ptth-aod-card__play.is-playing>.ico-pause{display:block} @media (max-width:1024px){.ptth-row__title{font-size:19px}} @media (max-width:576px){ .ptth-row{margin-top:18px} .ptth-row__title{font-size:17px} .ptth-vod-card__title{font-size:14px} /* Nút điều hướng vô dụng khi vuốt bằng ngón tay, lại che mất thẻ ở màn hẹp */ .ptth-row .swiper-button-prev,.ptth-row .swiper-button-next{display:none} } /* Căn thẳng player LIVE với danh sách lịch phát sóng. #dhinhthanh là grid 2 CỘT ĐỘC LẬP nên phần tiêu đề của hai cột không tự khớp chiều cao: cột trái (.dgtab = TV/Radio, chữ trơn) cao 34px, cột phải (.dlphatsong = h3 +