@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ฟอนต์หลัก */
* { font-family: 'Kanit', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", "Noto Sans", sans-serif; }

/* =========================
   THEME: Red–Gold (Chinese)
   ========================= */
:root {
  /* พื้นหลัง/พื้นผิวโทนกระดาษอุ่น */
  --bg: #FFF9F2;
  --surface: #FFFFFF;
  --surface-2: #FFF3E6;
  --border: #F1D7C4;

  /* ตัวอักษร */
  --text: #2B1B12;
  --text-dim: #7A4E32;

  /* แดงจีน (primary) + ไล่เฉด */
  --primary: #C52128;
  --primary-600: #A5181E;
  --primary-700: #800D12;

  /* ทอง */
  --accent: #E6B422;

  /* อื่น ๆ */
  --success: #16a34a;
  --warning: #E69C2E;
  --danger: #D83A3A;

  --ring: rgba(230, 180, 34, .28);
  --shadow: 0 10px 30px rgba(197,33,40,.12);

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
}

* { box-sizing: border-box }
html, body { height: 100% }

body{
  margin:0;
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(197,33,40,.06), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(230,180,34,.07), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.45;
}

a { color: inherit; text-decoration: none }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(
    180deg,
    #C52128 0%,   /* แดงจีนสด */
    #A5181E 60%,  /* แดงเข้ม */
    #800D12 100%  /* แดงเข้มสุด */
  );
  border-bottom: 1px solid #B22222; /* เส้นแดงเข้ม */
  box-shadow: 0 4px 20px rgba(197, 33, 40, .25); /* เงาโทนแดง */
}

.nav{
  max-width:1100px; margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
}

.brand{ display:flex; align-items:center; gap:12px; font-weight:500; letter-spacing:.2px }
.brand .logo{
  width:40px; height:40px; border-radius:12px;
  background: radial-gradient(90px 60px at 60% 30%, var(--accent), var(--primary));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 4px 16px rgba(197,33,40,.35);
  display:grid; place-items:center; color:#fff; font-weight:600;
}
.brand span{ font-size:1.15rem; color:var(--primary-700) }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  background: var(--primary); color:#fff; border-radius:12px;
  border:1px solid rgba(255,255,255,.4); box-shadow:0 6px 16px rgba(197,33,40,.25);
  font-weight:600;
}
.btn:hover{ background:var(--primary-600) }
.btn-outline{
  background:transparent; color:var(--primary-700);
  border:1px solid var(--border); box-shadow:none;
}
.btn-outline:hover{ background:var(--surface-2) }

/* WRAPPER */
.wrapper{ max-width:1100px; margin:28px auto 60px; padding:0 18px }

/* TABS */
.tabs{
  display:flex; flex-wrap:wrap; gap:10px; padding:10px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom:18px;
}
.tab{
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface-2);
  color:#7A4E32; /* น้ำตาลทองอ่านง่าย */
  font-weight:600; cursor:pointer; user-select:none;
}
.tab:hover{ background:#FFEFD9 }
.tab.active{
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color:#fff; border-color:transparent;
  box-shadow: 0 8px 20px rgba(197,33,40,.22);
}

/* LEAGUE CARDS */
.league-group{
  margin-bottom:20px; border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow);
}
.league-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px; color:#fff; font-weight:600;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 55%, var(--primary-700) 100%);
}
.league-list{ display:flex; flex-direction:column }

.match-row{
  display:grid; grid-template-columns: 1fr auto 1fr auto;
  align-items:center; gap:14px; padding:12px 14px;
  border-top:1px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF6E8 100%);
}
.match-row:nth-child(odd){ background:#fff }

.home-ls-items, .away-ls-items{ display:flex; align-items:center; gap:10px }
.away-ls-items{
  justify-content:flex-end; /* แทน align-items:right ที่ไม่ถูกต้อง */
  text-align:right;
}

.home-ls-image, .away-ls-image{
  width:36px; height:36px; border-radius:10px; overflow:hidden;
  border:1px solid var(--border);
  background:#FFF3E6; display:grid; place-items:center;
}
.home-ls-image img, .away-ls-image img{ width:100%; height:100%; object-fit:cover }

.home-ls-name, .away-ls-name{ font-weight:600; color:var(--text) }

.detail-ls-items{ justify-self:center }
.status-ls-items{
  font-weight:700; color:#6E461F;
  background: linear-gradient(180deg, #FFFDF5, #FFECC4);
  border: 1px solid #F3D9A8;
  padding:8px 12px; border-radius:999px; min-width:120px; text-align:center;
}
.status-live{
  color:#fff; background: linear-gradient(135deg, #16a34a, #20c997);
  border:none; box-shadow:0 8px 16px rgba(16,185,129,.25);
}

/* PLAY BUTTON */
.play-duball-items{ justify-self:end }
.play-btn{
  width:42px; height:42px; border-radius:14px; display:inline-grid; place-items:center;
  background: linear-gradient(135deg, #FFF3C4, #FFE08A);
  border:1px solid #F3D27A; position:relative;
}
.play-btn::after{
  content:""; width:0; height:0;
  border-left:12px solid #7F4E00; /* สามเหลี่ยมทองเข้ม */
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.play-btn-live{
  background: linear-gradient(135deg, var(--live-red), var(--live-red-dark));
  border-color: transparent;
  color: #fff;
  animation: liveBlink 1.1s ease-in-out infinite;
  position: relative;       /* สำหรับ pseudo ring */
}
.play-btn-live::after{ border-left-color:#fff; }

/* วงแหวนกระเพื่อมรอบปุ่ม */
.play-btn-live::before{
  content:"";
  position:absolute; inset:-4px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(230, 69, 46, .35);
  animation: livePulse 1.1s ease-out infinite;
  pointer-events:none;
}
@keyframes liveBlink{
  0%,100%{
    transform: scale(1);
    filter: brightness(1);
  }
  50%{
    transform: scale(1.05);
    filter: brightness(1.15);
  }
}

/* แอนิเมชันวงแหวนกระเพื่อมออก */
@keyframes livePulse{
  0%   { box-shadow: 0 0 0 0   rgba(230, 69, 46, .35); }
  70%  { box-shadow: 0 0 0 12px rgba(230, 69, 46, 0); }
  100% { box-shadow: 0 0 0 0   rgba(230, 69, 46, 0); }
}
/* FOOTER / EMPTY */
.footer{ text-align:center; padding:32px 18px; color:var(--text-dim) }
.empty, .error{
  padding:24px; text-align:center; color:var(--text-dim);
  border:1px dashed var(--border); border-radius:16px; background:var(--surface);
}

/* RESPONSIVE */
@media (max-width:700px){
  .match-row{
    grid-template-columns:1fr auto auto;
    grid-template-areas: "home detail play" "away away away";
    row-gap:8px;
  }
  .home-ls-items{ grid-area: home }
  .detail-ls-items{ grid-area: detail }
  .play-duball-items{ grid-area: play }
  .away-ls-items{ grid-area: away }
}

/* BANNER: 2 ต่อแถว */
.banner-header{
  max-width:1100px; height:auto; margin:15px auto; display:grid;
  grid-template-columns: repeat(2, 1fr); gap:12px;
}
.banner-header a img{
  display:block; width:100%; height:150px; object-fit:cover;
  border-radius:10px; border:1px solid #F1D7A6; box-shadow:var(--shadow); background:#fff;
}
@media (max-width:700px){
  .banner-header{ grid-template-columns:1fr }
}

/* VIDEO CONTAINER */
.container-watch{ max-width:1100px; margin:0 auto; padding:0 18px }
.vdo-container{
  background:var(--surface);
  border:1px solid #F1D7A6;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 18px 40px rgba(197,33,40,.12);
  position:relative;
  aspect-ratio:16/9;
}
.responsive-iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; background:#000; border-radius:inherit;
}

/* ใช้เมื่อ embed player script ลง #html5 */
#html5{ position:absolute; inset:0; display:none; }

/* เพิ่มคลาสยูทิลิตี้ */
.txt-seo{ text-align:center; color:var(--text-dim) }
/* =========================
   CHINESE AESTHETIC ENHANCE
   วางต่อท้าย main.css
   ========================= */

/* 1) โหมดจีน: เพิ่มแพทเทิร์นพื้นแบบ "leiwen" (ฟ้าผ่า/เมฆมงคล) */
.theme-china body{
  background:
    radial-gradient(900px 480px at 100% 0%, rgba(230,180,34,.10), transparent 60%),
    radial-gradient(1000px 600px at 0% -10%, rgba(197,33,40,.10), transparent 60%),
    var(--bg);
}
.theme-china body::before{
  /* ลายจีนจาง ๆ ชั้นล่าง (SVG data URI) */
  content:"";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.08;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23B68A2A' fill-opacity='0.6'%3E%3Cpath d='M10 10h40v10H20v20h30v10H10zM70 10h40v10H80v20h30v10H70zM10 70h40v10H20v20h30v10H10zM70 70h40v10H80v20h30v10H70z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* 2) ริบบิ้นมงคลใต้ Header */
.festive-ribbon{
  background: linear-gradient(90deg, rgba(181,18,30,.0) 0%, rgba(181,18,30,.08) 20%, rgba(181,18,30,.08) 80%, rgba(181,18,30,.0) 100%);
  border-bottom: 1px solid #F1D7A6;
}
.festive-ribbon .ribbon-inner{
  max-width:1100px; margin: 0 auto; padding:8px 18px;
  color:#7A4E32; font-weight:700; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.ribbon-dot{
  width:8px; height:8px; border-radius:99px; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(230,180,34,.25);
}

/* 3) โคมจีน (ตกแต่ง) */
.lantern{
  position: fixed; top: 72px; z-index: 5; opacity:.65; filter: drop-shadow(0 10px 20px rgba(197,33,40,.25));
  transition: transform .25s ease;
}
.lantern:hover{ transform: translateY(-2px) }
.lantern-left{ left: 10px }
.lantern-right{ right: 10px; transform: scaleX(-1) } /* สะท้อนขวา */
@media (max-width: 980px){
  .lantern{ display:none } /* ซ่อนบนจอเล็ก */
}

/* 4) หัวการ์ดลีก: คิ้วแดง/ทอง, เติมเส้นขอบ */
.theme-china .league-head{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 55%, var(--primary-700) 100%);
  color:#fff;
  position: relative;
}
.theme-china .league-head::after{
  content:""; position:absolute; inset:auto 14px -6px 14px; height:6px;
  background: linear-gradient(90deg, rgba(230,180,34,0) 0%, rgba(230,180,34,.9) 50%, rgba(230,180,34,0) 100%);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 10px rgba(197,33,40,.18);
}

/* 5) การ์ดลีก: มุมลายเมฆ/กลีบ (ใช้ pseudo-element) */
.theme-china .league-group{
  position: relative;
  border-color:#F1D7A6;
  box-shadow: 0 16px 36px rgba(197,33,40,.12);
}
.theme-china .league-group::before,
.theme-china .league-group::after{
  content:""; position:absolute; width:28px; height:28px; z-index:1; opacity:.9;
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 14c0-5.523 4.477-10 10-10h4c1.105 0 2 .895 2 2v4c0 5.523-4.477 10-10 10H6c-1.105 0-2-.895-2-2v-4z' fill='%23E6B422' fill-opacity='.95'/%3E%3C/svg%3E");
  background-size: 28px 28px;
}
.theme-china .league-group::before{ left:-1px; top:-1px; transform: rotate(180deg) }
.theme-china .league-group::after{ right:-1px; bottom:-1px }

/* 6) ป้ายเวลา: ทองอ่อนหรูขึ้น */
.theme-china .status-ls-items{
  background: linear-gradient(180deg, #FFFDF5, #FFE6B5);
  border: 1px solid #F0D49A;
  color:#6E461F;
}

/* 7) ปุ่มเล่น: ทองเข้ม + Active แดงทอง */
.theme-china .play-btn{
  background: linear-gradient(135deg, #FFE39A, #FFD068);
  border:1px solid #F3D27A;
}
.theme-china .play-btn::after{ border-left-color:#7F4E00 }
.theme-china .play-btn-live{
  background: linear-gradient(135deg, #C52128, #E6452E);
  border-color:transparent; box-shadow: 0 10px 22px rgba(197,33,40,.28);
}
.theme-china .play-btn-live::after{ border-left-color:#fff }

/* 8) Tabs: เส้นทอง + แดง active */
.theme-china .tab{ background:#FFF1D9; border-color:#F1D7A6; color:#6E461F }
.theme-china .tab:hover{ background:#FFE8C2 }
.theme-china .tab.active{
  background: linear-gradient(135deg, #C52128, #A5181E);
  color:#fff; border-color:transparent;
  box-shadow: 0 8px 22px rgba(197,33,40,.22);
}

/* 9) แบนเนอร์: กรอบทองโทนอุ่น */
.theme-china .banner-header a img{ border-color:#EECF91 }

/* 10) ปรับเล็กน้อยกับโลโก้/ปุ่ม */
.theme-china .brand .logo{
  background: radial-gradient(90px 60px at 60% 30%, var(--accent), var(--primary));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 6px 18px rgba(197,33,40,.35);
}
.theme-china .btn{
  background: linear-gradient(135deg, #C52128, #A5181E);
  box-shadow: 0 6px 16px rgba(197,33,40,.25);
}
.theme-china .btn:hover{ background: #8E0F15 }
/* ===== Mobile navbar: 2 big CTA buttons ===== */
@media (max-width: 700px){
  /* แปลง .nav เป็นเลย์เอาต์ 2 แถว: แถวโลโก้ + แถวปุ่ม */
  .nav{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "actions";
    row-gap: 6px;
    align-items: start;
  }
  .brand{ grid-area: brand; }

  /* กล่องปุ่ม */
  .nav-actions{
    grid-area: actions;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* สองปุ่มเคียงกัน */
    gap: 10px;
    width: 100%;
  }

  /* ปุ่มใหญ่ กดง่าย เต็มคอลัมน์ */
  .nav-actions .btn{
    width: 100%;
    justify-content: center;
    padding: 12px 10px;
    font-size: 16px;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(197,33,40,.2); /* โทนจีน */
  }

  /* โทนสีตามธีมแดง–ทอง */
  .nav-actions .btn-primary{
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: #fff;
  }
  .nav-actions .btn-outline{
    background: #fff;
    border-color: #F1D7A6;   /* เส้นทองอ่อน */
    color: var(--primary-700);
  }
}
/* ===== Brand image in navbar ===== */

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

:root{
  --brand-h: 60px; /* ขยายขนาดโลโก้ให้ใหญ่ชัด */
}

.brand img{
  height: var(--brand-h);
  width: auto;
  display: block;
  object-fit: contain;  /* ป้องกันภาพยืด/บิด */
  border-radius: 0;      /* เอาโค้งออก */
  box-shadow: none;      /* เอาเงาออก */
  background: transparent; /* ไม่มีพื้นหลัง */
  padding: 0;            /* ไม่มีขอบ */
}

/* ปุ่มหลักใน navbar (โทนแดง–ทองตามธีมจีน) */
.nav-actions .btn{
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 14px rgba(197,33,40,.20);
}
.nav-actions .btn:hover{ background: var(--primary-600); }

.nav-actions .btn.btn-outline{
  background: #fff;
  color: var(--primary-700);
  border: 1px solid #F1D7A6; /* เส้นทองอ่อน */
  box-shadow: none;
}
.nav-actions .btn.btn-outline:hover{ background: var(--surface-2); }

/* ===== Mobile: แปลง navbar เป็นสองปุ่มใต้โลโก้ ===== */
@media (max-width: 700px){
  .nav{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "actions";
    row-gap: 8px;
    align-items: start;
  }
  .brand{ grid-area: brand; }

  .nav-actions{
    grid-area: actions;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* สองปุ่มเคียงกัน */
    gap: 10px;
    width: 100%;
  }

  /* ปุ่มใหญ่ กดง่าย */
  .nav-actions .btn{
    width: 100%;
    justify-content: center;
    padding: 12px 10px;
    font-size: 16px;
    border-radius: 14px;
  }
}
/* ===== Mobile layout: card 2-row with pill + big play ===== */
@media (max-width:700px){

  /* หัวลีกโค้ง + จุดทองนำหน้า */
  .league-group{ border:none; background:transparent; box-shadow:none; }
  .league-list{ gap:8px; padding:0 4px 8px; }
  .league-head{
    margin:0 4px 8px;
    border-radius:18px 18px 10px 10px;
    padding:10px 14px 10px 28px;   /* เผื่อจุดทอง */
    position:relative;
  }
  .league-head::before{
    content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:10px; height:10px; border-radius:999px; background:var(--accent);
    box-shadow:0 0 0 4px rgba(230,180,34,.2);
  }
  .league-head .ls-league-name{ font-weight:800; }

  /* การ์ดแมตช์ */
  .match-row{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    margin:0 4px;
    box-shadow:var(--shadow);

    /* 2 บรรทัด: home | pill | play  /  away | away | play */
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "home   detail  play"
      "away   away    play";
    gap:10px;
    padding:12px;
    align-items:center;
  }

  .home-ls-items{ grid-area:home; min-width:0; }
  .away-ls-items{
    grid-area:away; min-width:0;
    justify-content: left; gap:10px; text-align:right;
  }
  .detail-ls-items{ grid-area:detail; justify-self:center; }
  .play-duball-items{
    grid-area:play;
    align-self:center;
    grid-row:1 / span 2; /* ปุ่มกิน 2 แถว */
  }

  /* โลโก้ & ชื่อทีม */
  .home-ls-image,.away-ls-image{ width:32px; height:32px; border-radius:9px; }
  .home-ls-name,.away-ls-name{
    font-weight:700;
    font-size:15px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* pill เวลา/สถานะ */
  .status-ls-items{
    min-width:auto;
    padding:6px 12px;
    font-size:12px;
    border-radius:999px;
    background:linear-gradient(180deg,#FFF6CC,#FFE08A);
    border:1px solid #EED28A;
    color:#7A4E32;
  }
  /* สด = แดง (แทนเขียว) */
  .status-live{
    background:linear-gradient(135deg,#DA2A25,#B51218);
    color:#fff; border:none;
    box-shadow:0 8px 18px rgba(197,33,40,.22);
  }

  /* ปุ่มเล่นใหญ่ แตะง่าย */
  .play-btn{ width:50px; height:50px; border-radius:16px; }
  .play-btn::after{
    border-left-width:14px; border-top-width:9px; border-bottom-width:9px;
  }
}

/* XS เพิ่มเติม (จอแคบมาก) */
@media (max-width:380px){
  .home-ls-image,.away-ls-image{ width:28px; height:28px; }
  .home-ls-name,.away-ls-name{ font-size:14px; }
  .status-ls-items{ font-size:11px; padding:5px 9px; }
  .play-btn{ width:46px; height:46px; }
}
.report-btn {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 9999;
  display: inline-block;
  padding: 12px 18px;
  background: linear-gradient(135deg, #C52128, #A5181E); /* แดงจีน */
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;  /* pill button */
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  text-decoration: none;
  transition: all .25s ease;
}

.report-btn:hover {
  background: #800D12;   /* แดงเข้ม hover */
  transform: translateY(-2px);
}
/* มือถือ: ขยายวิดีโอให้สูงใหญ่ชัด */
@media (max-width: 700px){

  /* ให้กรอบวิดีโอไม่ถูกจำกัดความกว้าง/สูง */
  .container-watch{ padding: 0 !important; }
  .vdo-container{
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ===== JWPlayer: บังคับขนาด ===== */
  #video_player_container{
    width: 100% !important;
    height: 65vh !important;      /* ปรับได้: 55–75vh ตามที่ชอบ */
    max-height: 80vh !important;
    background: #000;
  }

  /* ปิดตัวคุมสัดส่วนของ JW ที่ทำให้เตี้ย */
  #video_player_container .jw-aspect{ 
    display: none !important; 
  }

  /* ให้ทุกชั้นใน JW กินเต็มกรอบ */
  #video_player_container,
  #video_player_container .jwplayer,
  #video_player_container .jw-wrapper,
  #video_player_container .jw-media{
    width: 100% !important;
    height: 100% !important;
  }

  /* ตัววีดีโอให้ยืดเต็มกรอบ */
  #video_player_container video.jw-video{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* ครอบเต็ม (จะครอปนิดหน่อย) */
    background: #000;
    display: block;
  }

  /* กันการล้นแนวนอน */
  html, body { overflow-x: hidden; }
}