/* =========================================================
   === V9 — editorial + mobile refinements
   - Magazine news single (featured image detached + uniform 24px,
     author byline chip under image, breadcrumb on top).
   - Breadcrumb thành phần dùng chung .sf-crumbrow (light/dark).
   - Mobile nav: robust slide-out right + scrim + close + aria.
   - Share row: equal 48px square buttons; .sf-copied [hidden] bảo vệ.
   - Sidebar single post: hết cuộn trong — static, show đủ nội dung.
   - TOC mobile: mục lục trong panel, link to chạm ≥40px.
   - single-sf_sport: editorial "mới nhất" card của môn.
   V9 CSS — nối tiếp sau sportify-v8.css (được enqueue cuối).
   ========================================================= */

/* ---------- 1) Breadcrumb (chung, sáng + tối tự nhiên) ---------- */
.sf-crumbrow{
	display:flex; align-items:center; flex-wrap:wrap; gap:6px;
	font-family:var(--sf-head); font-size:12px; letter-spacing:.5px;
	color:#8b9aad; margin:0 0 var(--sp2);
}
.sf-crumbrow a.sf-crumb{color:#8b9aad; text-decoration:none; transition:color 180ms ease}
.sf-crumbrow a.sf-crumb:hover{color:var(--sf-navy)}
.sf-crumb-sep{color:#c5d0dc; pointer-events:none}
.sf-crumb-here{color:#52647b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60vw}
.sf-crumb-here[aria-current="page"]{font-weight:600}
/* Breadcrumb trên nền tối (hero navy / sport / tour / venue) */
.sf-hero .sf-crumbrow, .sf-hero-in .sf-crumbrow,
.sf-venue-hero .sf-crumbrow, .sf-tour-hero .sf-crumbrow,
.sf-sport-hero .sf-crumbrow{color:#b7c6d6}
.sf-hero .sf-crumbrow a.sf-crumb,
.sf-hero-in .sf-crumbrow a.sf-crumb,
.sf-venue-hero .sf-crumbrow a.sf-crumb,
.sf-tour-hero .sf-crumbrow a.sf-crumb,
.sf-sport-hero .sf-crumbrow a.sf-crumb{color:#c3d0de}
.sf-hero .sf-crumbrow a.sf-crumb:hover,
.sf-hero-in .sf-crumbrow a.sf-crumb:hover,
.sf-venue-hero .sf-crumbrow a.sf-crumb:hover,
.sf-tour-hero .sf-crumbrow a.sf-crumb:hover,
.sf-sport-hero .sf-crumbrow a.sf-crumb:hover{color:#fff}
.sf-hero .sf-crumb-sep,
.sf-hero-in .sf-crumb-sep,
.sf-venue-hero .sf-crumb-sep,
.sf-tour-hero .sf-crumb-sep,
.sf-sport-hero .sf-crumb-sep{color:#5f7186}
.sf-hero .sf-crumb-here,
.sf-hero-in .sf-crumb-here,
.sf-venue-hero .sf-crumb-here,
.sf-tour-hero .sf-crumb-here,
.sf-sport-hero .sf-crumb-here{color:#e8eef6}
/* Lớp cũ trên trang product hiện vẫn đi qua helper */
.sf-breadcrumb.sf-anim-open{padding-top:var(--sp6)}

/* ---------- 2) News single — magazine header + figure + byline ---------- */
.sf-single-thumbwrap{max-width:1060px}
.sf-single-thumbwrap .sf-single-herofigure{
	/* Tách hẳn khỏi band navy: hở trắng phía trên, bo đều 24, không viền kính. */
	margin:var(--sp8) 0 0; overflow:hidden; border-radius:24px;
	background:var(--sf-cream); line-height:0;
}
.sf-single-thumbwrap .sf-single-herofigure img{
	width:100%; height:auto; object-fit:cover; display:block;
	border-radius:0; max-height:none; aspect-ratio:auto;
}
.sf-single-thumbwrap .sf-single-covercap{
	margin:0; padding:10px 16px 14px; font-size:13px; color:#7c8ca0;
	background:#fff; line-height:1.5; text-align:left;
}
.sf-single-byline{
	display:flex; align-items:center; flex-wrap:wrap;
	gap:var(--sp2) var(--sp3); margin:var(--sp6) 0 var(--sp3);
	padding:var(--sp3) var(--sp4); background:#fff;
	border:1px solid rgba(11,28,44,.08); border-radius:16px;
}
.sf-single-byline .sf-av-ini{width:42px; height:42px; font-size:15px; flex:none}
.sf-byline-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.sf-byline-label{font-family:var(--sf-mono); font-size:10px; letter-spacing:.16em; color:#8b9aad; text-transform:uppercase}
.sf-byline-name{font-family:var(--sf-head); color:var(--sf-navy); font-size:14px; font-weight:700}
.sf-byline-sep{width:1px; height:22px; background:rgba(11,28,44,.12)}
.sf-byline-meta{font-family:var(--sf-mono); color:#66788c; font-size:12px}
.sf-byline-meta em{font-style:italic}

/* ---------- 3) Mobile nav — rebuild: slide from right đơn giản ---------- */
.sf-mobile-nav{
	position:fixed; top:0; right:0; bottom:0; z-index:120;
	width:min(340px,88vw); background:var(--sf-navy); color:#e8eef6;
	padding:0; margin:0; border-left:1px solid rgba(255,255,255,.12);
	transform:translateX(100%); visibility:hidden;
	opacity:0; overflow:hidden;
	transition:transform 260ms var(--tr-ease), opacity 220ms ease, visibility 0s linear 300ms;
	display:block;
	/* V22b: khi đóng không nhận click; khi mở mới bật pointer-events */
	pointer-events:none;
}
.sf-mobile-nav[hidden]{display:none}
.sf-mobile-nav.is-open{
	transform:translateX(0); opacity:1; visibility:visible;
	transition:transform 260ms var(--tr-ease), opacity 220ms ease;
	animation:none;
	pointer-events:auto;
}
/* V22b: ép menu nằm TRÊN scrim, dưới search overlay; luôn 1 nguồn CSS duy nhất */
.sf-mobile-nav, .sf-mobile-nav.is-open{display:block}
@media (min-width:769px){ .sf-mobile-nav, .sf-mobile-nav.is-open{display:none!important} }
/* V22d — FIX stacking context: .sf-header có position:sticky z-index:99 nên tạo
   stacking context RIÊNG; .sf-mobile-nav (z-index:120) chỉ có tác dụng bên trong
   header. Scrim nằm ở <body> (z-index:115) sẽ ĐÈ LÊN menu => menu mờ & không
   click được. Giải: hạ scrim xuống dưới header (z-index:90). */
.sf-mobile-scrim{
	position:fixed; inset:0; z-index:90; background:rgba(6,16,27,.55);
	-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.sf-mobile-scrim[hidden]{display:none}
.sf-mobile-inner{
	height:100%; overflow-y:auto; overscroll-behavior:contain;
	padding:calc(48px + env(safe-area-inset-top,0px)) 20px 44px;
	display:flex; flex-direction:column; gap:var(--sp2);
}
.sf-mobile-close{
	position:absolute; top:12px; right:14px; z-index:2;
	width:40px; height:40px; border:none; border-radius:12px; cursor:pointer;
	background:rgba(255,255,255,.08); color:#fff; font-size:18px; line-height:1;
	display:inline-flex; align-items:center; justify-content:center;
	transition:background-color 180ms ease;
}
.sf-mobile-close:hover{background:var(--sf-lime); color:var(--sf-navy)}
.sf-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sf-burger.is-open span:nth-child(2){opacity:0}
.sf-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sf-burger span{display:block; width:22px; height:2px; margin:0; transition:transform 200ms var(--tr-ease), opacity 180ms ease}
/* Menu con (kể cả .sf-dd của dropdown môn, hoặc .sub-menu của wp_nav_menu) luôn mở tầng sâu */
.sf-mobile-nav .sf-mobile-inner .sf-nav-list{display:block}
.sf-mobile-nav .sf-nav-list{list-style:none; margin:0; padding:0}
.sf-mobile-nav .sf-nav-list>li{margin:0; border-bottom:1px solid rgba(255,255,255,.07)}
.sf-mobile-nav .sf-nav-list a{
	display:flex; align-items:center; min-height:44px;
	padding:12px 6px; font-size:14px; letter-spacing:.4px;
	color:#e8eef6; text-decoration:none; gap:10px;
}
.sf-mobile-nav .sf-nav-list a:hover,
.sf-mobile-nav .sf-nav-list li.current-menu-item>a,
.sf-mobile-nav .sf-nav-list li.current_page_item>a{color:var(--sf-lime)}
.sf-mobile-nav .sf-nav-list li.has-child>.sf-dd,
.sf-mobile-nav .sf-nav-list .sub-menu{
	position:static; visibility:visible; opacity:1; transform:none;
	min-width:0; margin:2px 0 8px; border:none; border-left:2px solid var(--sf-lime);
	border-radius:0; box-shadow:none; padding:0 0 0 12px; background:transparent;
	display:block; list-style:none;
}
.sf-mobile-nav .sf-nav-list li.has-child>.sf-dd a,
.sf-mobile-nav .sf-nav-list .sub-menu a{
	min-height:40px; padding:9px 6px; font-size:13px; color:#c3d0de;
}
.sf-mobile-nav .sf-nav-list li.has-child>.sf-dd a:hover,
.sf-mobile-nav .sf-nav-list .sub-menu a:hover{color:#fff}

/* ---------- 4) Share row — nút đều 48px vuông bo 12, message sạch ---------- */
.sf-sn-row{display:flex; flex-wrap:wrap; gap:var(--sp2)}
.sf-sn-row .sf-sn,
.sf-sn-row button.sf-sn{
	width:48px; height:48px; padding:0; box-sizing:border-box;
	flex:0 0 48px; justify-content:center; align-items:center;
	border-radius:12px; font-size:18px;
}
.sf-sn-row .sf-sn svg,
.sf-sn-row button.sf-sn svg{width:19px; height:19px}
.sf-copied[hidden]{display:none!important}
.sf-copied{font-size:12.5px; color:#0e8f4b; display:inline-flex}

/* ---------- 5) Sidebar single news — hiện HẾT không cuộn trong ---------- */
.sf-single-wrap>.sf-single-aside{
	position:static; top:auto; align-self:auto;
	max-height:none; height:auto; padding-right:0;
}
@media (min-width:901px){
	.sf-single-wrap>.sf-single-aside{position:static}
}
/* mobile: sidebar vẫn đặt dưới bài (order 2) — v7 đã lo phần này, ta nhấn giữ */
@media (max-width:900px){
	.sf-single-wrap>.sf-single-aside{order:2; position:static}
}

/* ---------- 6) TOC card — thoáng & to chạm trên mobile ---------- */
.sf-toc-card{background:#f7f5f1}
.sf-toc-card>details>summary{list-style:none; cursor:pointer}
.sf-toc-card>details>summary::-webkit-details-marker{display:none}
.sf-toc-card details[open] .sf-aside-title::after,
.sf-toc-card details:not([open]) .sf-aside-title::after{background:rgba(11,28,44,.1)}
#sf-toc{font-size:0; display:flex; flex-direction:column; gap:2px; margin:0}
#sf-toc>ol, #sf-toc ol, #sf-toc ul, #sf-toc li{list-style:none; margin:0; padding:0; display:block}
#sf-toc ol{display:flex; flex-direction:column; gap:1px}
#sf-toc a{
	font-size:13.5px; padding:6px 12px; min-height:40px; align-items:center;
	box-sizing:border-box; line-height:1.3;
}
.sf-toc-card.sf-toc-long:not(.sf-toc-open) #sf-toc{max-height:200px}
.sf-toc-more{min-height:40px; font-size:12.5px}
@media (max-width:768px){
	.sf-toc-card{position:static; margin-left:0; width:100%}
	#sf-toc a{font-size:14.5px; min-height:44px}
}

/* ---------- 7) single-sf_sport — editorial card bài mới nhất (nếu có) ---------- */
.sf-latest-editorial{padding-top:var(--sp6); padding-bottom:var(--sp6)}
.sf-latest-card{
	display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
	gap:0; background:#fff; border:1px solid rgba(11,28,44,.08);
	border-radius:22px; overflow:hidden; box-shadow:0 16px 40px rgba(11,28,44,.07);
}
.sf-latest-media{display:block; position:relative; min-height:280px; background:var(--sf-cream)}
.sf-latest-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sf-latest-body{display:flex; flex-direction:column; gap:var(--sp3); justify-content:center; padding:var(--sp6)}
.sf-latest-kicker{margin:0}
.sf-latest-kicker .sf-num{color:var(--sf-lime)}
.sf-latest-meta{font-family:var(--sf-mono); color:var(--sf-coral); font-size:12px; letter-spacing:.4px; margin:0}
.sf-latest-title{margin:0}
.sf-latest-title a{font-family:var(--sf-head); font-size:clamp(21px,3.2vw,30px); line-height:1.15; color:var(--sf-navy); text-decoration:none}
.sf-latest-title a:hover{color:var(--sf-coral)}
.sf-latest-ex{color:#42536a; line-height:1.65; font-size:15px; margin:0}
.sf-latest-body .sf-btn{align-self:flex-start}
@media (max-width:820px){
	.sf-latest-card{grid-template-columns:1fr}
	.sf-latest-media{min-height:0; aspect-ratio:16/9}
	.sf-latest-media img{position:relative; aspect-ratio:16/9}
	.sf-latest-body{padding:var(--sp5,20px)}
}

/* ---------- V22b — Logo ảnh trong header ---------- */
.sf-logo{display:inline-flex; align-items:center; gap:10px}
.sf-logo .sf-logo-img,
.sf-logo img.sf-logo-img{
	display:block; height:38px; width:auto; max-width:min(200px,46vw);
	object-fit:contain;
}
@media (max-width:768px){
	.sf-logo .sf-logo-img,
	.sf-logo img.sf-logo-img{height:32px; max-width:min(160px,44vw)}
}

/* ---------- V22b — Archive tin tức (/tin-tuc/, /sports/{môn}/tin-tuc/) ---------- */
.sf-news-archive .sf-card-sport .sf-card-kick{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;
}
.sf-news-archive .sf-card-kick .sf-read{
	font-family:var(--sf-mono); font-size:11.5px; color:#66788c; letter-spacing:.3px;
}
.sf-news-archive .sf-card-title{font-size:17px; line-height:1.3; margin:0 0 6px}
.sf-news-archive .sf-card-meta{
	color:#5a6b7d; font-size:13.5px; line-height:1.55; margin:0;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sf-news-archive .sf-filters{margin-bottom:var(--sp4,24px)}
.sf-news-archive .sf-filters .sf-pill[href]{text-decoration:none}
.sf-news-archive .sf-empty-state .sf-btn{margin-top:var(--sp2,8px)}

/* ---------- V22d — Nút Tài khoản ở header ---------- */
.sf-header-actions{display:flex; align-items:center; gap:8px}
.sf-account-btn{
	display:inline-flex; align-items:center; gap:8px;
	min-height:40px; padding:9px 14px; border-radius:10px;
	border:1px solid rgba(255,255,255,.22); background:transparent;
	color:#fff; text-decoration:none; white-space:nowrap;
	font-family:var(--sf-font); font-size:12px; font-weight:600; letter-spacing:1.1px;
	transition:background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.sf-account-btn:hover,
.sf-account-btn:focus-visible{
	background:var(--sf-lime); border-color:var(--sf-lime); color:var(--sf-navy);
}
.sf-account-btn.is-logged-in{border-color:rgba(200,240,0,.55); color:var(--sf-lime)}
.sf-account-btn.is-logged-in:hover{background:var(--sf-lime); color:var(--sf-navy)}
.sf-acc-ico{display:inline-flex; align-items:center; justify-content:center; line-height:0}
.sf-acc-ico svg{display:block}
@media (max-width:768px){
	.sf-acc-label{display:none}
	.sf-account-btn{padding:9px 11px; min-height:38px}
}

/* ---------- V22d — Liên hệ ở footer ---------- */
.sf-footer-contact li a{display:inline-flex; align-items:center; gap:8px; line-height:1.5}
.sf-fc-ico{display:inline-flex; align-items:center; justify-content:center; line-height:0; flex:0 0 auto; opacity:.85}
.sf-fc-ico svg{display:block}
.sf-footer-contact li a:hover .sf-fc-ico{opacity:1}
.sf-socials{display:flex; flex-wrap:wrap; gap:8px}
.sf-socials a{
	display:inline-block; padding:6px 11px; border-radius:999px;
	border:1px solid rgba(255,255,255,.18); color:#e8eef6;
	font-size:12px; letter-spacing:.4px; text-decoration:none;
	transition:background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sf-socials a:hover,.sf-socials a:focus-visible{
	background:var(--sf-lime); border-color:var(--sf-lime); color:var(--sf-navy);
}
.sf-socials-empty{color:#93a2b3; font-size:13px; margin:0}
.sf-footer-brand .sf-logo .sf-logo-img{height:34px; max-width:180px}