/* =============================================================
   SKIN: dooballs.com — น้ำเงินเข้มกลางคืน + ไล่สีฟ้า→ม่วง (ยึดโลโก้ยีราฟ)
   โหลดทับ main.css เมื่อเลือกแบรนด์ "dooballs" ใน Customizer
   scope ใต้ .sp-skin-dooballs — เปลี่ยนทั้งโทนสี + โครง layout
   (มุมโค้งใหญ่ ขอบไล่สี hero 2 คอลัมน์ + โชว์เคส 2x3, กริดข่าว 4 ช่อง)
   ============================================================= */

/* ---- โทเคนสี (ล็อกโหมดมืดตามพื้นโลโก้ #020718) ---- */
.sp-skin-dooballs {
	--sp-bg: #030818;
	--sp-surface: #0A1330;
	--sp-surface-2: #131F48;
	--sp-text: #EAF1FF;
	--sp-text-dim: #8E9DC8;
	--sp-accent: #33A9F5;
	--sp-accent-ink: #03101F;
	--sp-violet: #9B6BFF;
	--sp-live: #FF4D6D;
	--sp-warn: #FFC94D;
	--sp-line: #1E2C5C;
	--sp-shadow: 0 14px 40px rgba(2, 7, 24, .6);
	--sp-radius: 20px;
	--sp-radius-sm: 12px;
	--sp-grad: linear-gradient(90deg, #33A9F5 0%, #6A8CFF 50%, #9B6BFF 100%);
	--sp-grad-soft: linear-gradient(135deg, rgba(51, 169, 245, .18), rgba(155, 107, 255, .18));
	--sp-glow: 0 0 0 1px rgba(106, 140, 255, .35), 0 8px 30px rgba(51, 169, 245, .18);
	color-scheme: dark;
}
.sp-skin-dooballs {
	background: var(--sp-bg); color: var(--sp-text);
	background-image: radial-gradient(900px 500px at 0% -10%, rgba(51, 169, 245, .14), transparent 60%),
	                  radial-gradient(900px 500px at 100% 0%, rgba(155, 107, 255, .14), transparent 60%);
}
.sp-skin-dooballs [data-sp-theme-toggle] { display: none; }
.sp-skin-dooballs a:hover { color: var(--sp-accent); }

/* ---- Header / โลโก้ / ticker ---- */
.sp-skin-dooballs .sp-header { background: rgba(3, 8, 24, .78); backdrop-filter: blur(14px); border-bottom: 0; position: sticky; }
.sp-skin-dooballs .sp-header::after { content: ""; display: block; height: 2px; background: var(--sp-grad); opacity: .9; }
.sp-skin-dooballs .sp-logo { gap: 10px; }
.sp-skin-dooballs .sp-logo--brand img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(106, 140, 255, .45), 0 0 18px rgba(51, 169, 245, .35); }
.sp-skin-dooballs .sp-logo__text {
	font-family: "Chakra Petch", var(--sp-font); font-weight: 700; font-size: 24px; letter-spacing: -.5px;
	background: var(--sp-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sp-skin-dooballs .sp-nav__list a { border-radius: 999px; font-weight: 600; font-size: 14.5px; }
.sp-skin-dooballs .sp-nav__list a:hover, .sp-skin-dooballs .sp-nav__list .current-menu-item a { background: var(--sp-grad-soft); color: #fff; }
.sp-skin-dooballs .sp-iconbtn { border-radius: 50%; }
.sp-skin-dooballs .sp-ticker { background: var(--sp-grad); color: #fff; }
.sp-skin-dooballs .sp-ticker__label { background: rgba(3, 8, 24, .35); color: #fff; border-radius: 0 999px 999px 0; }
.sp-skin-dooballs .sp-ticker--results { background: linear-gradient(90deg, #0A1330, #131F48 50%, #0A1330); color: #EAF1FF; }
.sp-skin-dooballs .sp-ticker--results .sp-ticker__label { background: var(--sp-accent); color: #03101F; }
.sp-skin-dooballs .sp-ticker__league { background: rgba(155, 107, 255, .22); color: #C9B6FF; }
.sp-skin-dooballs .sp-ticker__score { background: #fff; color: #131F48; }
.sp-skin-dooballs .sp-ticker__name { color: rgba(234, 241, 255, .82); }

/* ---- Section head: หัวข้อ + แถบไล่สี ---- */
.sp-skin-dooballs .sp-section__title { font-family: "Chakra Petch", var(--sp-font); font-weight: 700; letter-spacing: -.2px; padding-left: 0; }
.sp-skin-dooballs .sp-section__title::before { display: none; }
.sp-skin-dooballs .sp-section__head { align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--sp-line); position: relative; }
.sp-skin-dooballs .sp-section__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 3px; border-radius: 3px; background: var(--sp-grad); }
.sp-skin-dooballs .sp-section__more { color: var(--sp-accent); font-weight: 600; }
.sp-skin-dooballs .sp-section--alt { background: linear-gradient(180deg, rgba(51, 169, 245, .05), rgba(155, 107, 255, .05)); border-color: var(--sp-line); }

/* ============================================================
   LAYOUT — hero 2 คอลัมน์ (lead ใหญ่ + โชว์เคส 2x3) และกริดข่าว 4 ช่อง
   ============================================================ */
.sp-skin-dooballs .sp-hero__grid { grid-template-columns: 1.55fr 1fr; gap: 20px; }
.sp-skin-dooballs .sp-hero__lead {
	position: relative; border: 1px solid transparent; border-radius: var(--sp-radius);
	background: linear-gradient(var(--sp-surface), var(--sp-surface)) padding-box, var(--sp-grad) border-box;
	box-shadow: var(--sp-shadow);
}
.sp-skin-dooballs .sp-hero__media { aspect-ratio: 16/9; }
.sp-skin-dooballs .sp-hero__body { padding: 20px 24px 24px; }
.sp-skin-dooballs .sp-hero__title { font-family: "Chakra Petch", var(--sp-font); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; }
.sp-skin-dooballs .sp-hero__title a:hover { background: var(--sp-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sp-skin-dooballs .sp-hero__body p { color: var(--sp-text-dim); }

/* side: โชว์เคส 2 คอลัมน์ การ์ดแนวตั้ง (ภาพบน หัวข่าวล่าง) */
.sp-skin-dooballs .sp-hero__side { grid-template-columns: 1fr 1fr; gap: 14px; align-content: stretch; }
.sp-skin-dooballs .sp-hero__item {
	display: block; padding: 10px; border-radius: 16px;
	background: var(--sp-surface); border: 1px solid var(--sp-line);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sp-skin-dooballs .sp-hero__item:hover { transform: translateY(-3px); border-color: rgba(106, 140, 255, .6); box-shadow: var(--sp-glow); }
.sp-skin-dooballs .sp-hero__thumb { width: 100%; aspect-ratio: 16/10; border-radius: 10px; margin-bottom: 8px; }
.sp-skin-dooballs .sp-hero__item h3 { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-skin-dooballs .sp-hero__item .sp-meta { margin-bottom: 0; }
.sp-skin-dooballs .sp-hero__item .sp-meta__read { display: none; }

/* กริดข่าว 4 ช่อง — การ์ดมุมโค้ง แถบไล่สีด้านบน */
.sp-skin-dooballs .sp-card-news { border-radius: var(--sp-radius); border-color: var(--sp-line); position: relative; box-shadow: 0 8px 24px rgba(2, 7, 24, .35); }
.sp-skin-dooballs .sp-card-news::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sp-grad); opacity: 0; transition: opacity .18s ease; z-index: 1; }
.sp-skin-dooballs .sp-card-news:hover { border-color: rgba(106, 140, 255, .6); box-shadow: var(--sp-glow); transform: translateY(-4px); }
.sp-skin-dooballs .sp-card-news:hover::before { opacity: 1; }
.sp-skin-dooballs .sp-card-news__title { font-size: 15.5px; line-height: 1.3; }
.sp-skin-dooballs .sp-card-news__title a:hover { color: var(--sp-accent); }

/* การ์ดแมตช์/วิดีโอ/นับถอยหลัง */
.sp-skin-dooballs .sp-strip { border-bottom: 0; }
.sp-skin-dooballs .sp-card-match { border-radius: 16px; background: var(--sp-surface); }
.sp-skin-dooballs .sp-card-match:hover { border-color: var(--sp-accent); box-shadow: var(--sp-glow); }
.sp-skin-dooballs .sp-card-match--live { border-color: rgba(255, 77, 109, .55); }
.sp-skin-dooballs .sp-card-match__score { color: #fff; }
.sp-skin-dooballs .sp-card-video__media { border-radius: 16px; }
.sp-skin-dooballs .sp-card-video__play { background: rgba(3, 8, 24, .35); }
.sp-skin-dooballs .sp-countdown { background: var(--sp-grad-soft), var(--sp-surface); border: 1px solid rgba(106, 140, 255, .35); border-radius: var(--sp-radius); }
.sp-skin-dooballs .sp-countdown__vs { background: var(--sp-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }
.sp-skin-dooballs .sp-countdown__clock b { background: rgba(3, 8, 24, .6); border-color: rgba(106, 140, 255, .35); border-radius: 12px; color: #fff; }
.sp-skin-dooballs .sp-carousel__dot.is-active { background: var(--sp-grad); }
.sp-skin-dooballs .sp-thumb__ph { background: linear-gradient(135deg, #131F48, #2A1F6B); }

/* ปุ่ม / แท็บ / ชิป / แผง */
.sp-skin-dooballs .sp-btn--primary { background: var(--sp-grad); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(51, 169, 245, .3); }
.sp-skin-dooballs .sp-btn--primary:hover { color: #fff; box-shadow: 0 8px 24px rgba(155, 107, 255, .45); }
.sp-skin-dooballs .sp-btn--ghost { border-color: rgba(106, 140, 255, .4); }
.sp-skin-dooballs .sp-tab { border-radius: 999px; border-color: var(--sp-line); }
.sp-skin-dooballs .sp-tab:hover { border-color: var(--sp-accent); }
.sp-skin-dooballs .sp-tab.is-active, .sp-skin-dooballs .sp-datestrip__day.is-active, .sp-skin-dooballs .sp-pagination .page-numbers.current { background: var(--sp-grad); border-color: transparent; color: #fff; }
.sp-skin-dooballs .sp-datestrip__day.is-active b { color: #fff; }
.sp-skin-dooballs .sp-chip { background: rgba(155, 107, 255, .18); color: #C9B6FF; font-weight: 700; }
.sp-skin-dooballs .sp-panel { border-radius: var(--sp-radius); }
.sp-skin-dooballs .sp-trending__num { background: var(--sp-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sp-skin-dooballs .sp-leaderboard__row, .sp-skin-dooballs .sp-round-teaser, .sp-skin-dooballs .sp-poll__opt { border-radius: 14px; }
.sp-skin-dooballs .sp-poll__bar { background: var(--sp-grad-soft); }
.sp-skin-dooballs .sp-table { border-radius: var(--sp-radius); }
.sp-skin-dooballs .sp-table th { color: var(--sp-accent); }
.sp-skin-dooballs .sp-ls-league { border-radius: 999px; }
.sp-skin-dooballs .sp-scoreboard, .sp-skin-dooballs .sp-profile-head { background: var(--sp-grad-soft), var(--sp-surface); border-radius: var(--sp-radius); }
.sp-skin-dooballs .sp-form-badge--w { background: var(--sp-accent); color: #03101F; }
.sp-skin-dooballs .sp-searchform input[type="search"]:focus, .sp-skin-dooballs .sp-auth-form input:focus { outline-color: var(--sp-violet); }
.sp-skin-dooballs .sp-modal__panel { border-radius: var(--sp-radius); border-color: rgba(106, 140, 255, .4); }
.sp-skin-dooballs .sp-toast { border-color: var(--sp-violet); }

/* Footer */
.sp-skin-dooballs .sp-footer { background: #02061A; border-top: 0; position: relative; }
.sp-skin-dooballs .sp-footer::before { content: ""; display: block; height: 2px; background: var(--sp-grad); }
.sp-skin-dooballs .sp-logo--footer img { width: 56px; height: 56px; }
.sp-skin-dooballs .sp-logo__tagline { display: block; color: var(--sp-text-dim); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.sp-skin-dooballs .sp-socials__item:hover { background: var(--sp-grad); color: #fff; }
.sp-skin-dooballs .sp-footer__bottom { border-color: var(--sp-line); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
	.sp-skin-dooballs .sp-hero__grid { grid-template-columns: 1.3fr 1fr; }
}
@media (max-width: 960px) {
	.sp-skin-dooballs .sp-hero__grid { grid-template-columns: 1fr; }
	.sp-skin-dooballs .sp-hero__side { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.sp-skin-dooballs .sp-header__actions .sp-btn--sm { white-space: nowrap; padding: 6px 10px; font-size: 12.5px; }
	.sp-skin-dooballs .sp-hero__side { grid-template-columns: 1fr 1fr; gap: 10px; }
	.sp-skin-dooballs .sp-hero__item { padding: 8px; }
	.sp-skin-dooballs .sp-hero__body { padding: 16px 18px 18px; }
	.sp-skin-dooballs .sp-logo__text { font-size: 20px; }
}