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

/* ===== Programball – Base ===== */
.pung-programball{  
  overflow:hidden;
  background:#fff;
  font-family: 'Kanit', sans-serif; /* ✅ ใช้ฟอนต์คณิต */
}

.pung-programball{
  --pb-title-pc: 22px;   /* ชื่อลีก */
  --pb-date-pc: 22px;    /* วันที่ */
  --pb-header-pc: 20px;  /* หัวคอลัมน์เขียว */
  --pb-cell-pc: 18px;    /* ตัวอักษรในแถวข้อมูล */
  --pb-price-pc: 18px;   /* คอลัมน์ราคา (ถ้าต้องการต่างจากแถวทั่วไป) */
}

/* ชื่อลีก (ถ้ามี .league-title จะจับตัวนั้นก่อน) */
.pung-head-blue .league-title{ font-size: var(--pb-title-pc); }
.pung-head-blue > div:nth-child(2){ font-size: var(--pb-title-pc); } /* fallback */
.pung-head-blue .subdate{ font-size: var(--pb-date-pc); }

/* หัวคอลัมน์ */
.pung-head-green .pung-grid > div{ font-size: var(--pb-header-pc); }

/* แถวข้อมูล */
.pung-row .pung-grid > *{ font-size: var(--pb-cell-pc); }
.pung-row .pung-grid > *:nth-child(3){ font-size: var(--pb-price-pc); } /* ราคา */

/* ------ Header Blue ------ */
.pung-head-blue{
  background:#42F3E4; /* ฟ้าหัวเรื่อง */
  color:#000;
  padding:8px 16px;
  display:flex;
  gap:12px;
  align-items:center;
}

.pung-head-green{
  background:#C5FF67; 
  color:#000;
  padding:12px 16px;
  border-bottom:1px solid #e6e6e6;
  font-weight:500;
  font-size: 20px;
}

.pung-grid{
  display:grid;
  grid-template-columns: 0.5fr 1fr 0.5fr 1fr 4fr 0.5fr; /* 6 คอลัมน์ (เดสก์ท็อป) */
  gap:12px;
  align-items:center;
}

.pung-row{
  background:#fff;
  padding:0px 16px;
  border-left:1px solid #e8e8e8;
  border-top:1px solid #e8e8e8;
  border-right:1px solid #e8e8e8;
  color: #000;
}

.pung-row:first-child{ border-top:0px; }
.pung-row:last-child{ border-bottom:1px solid #e8e8e8; }

.pung-head-blue img{
  width: 80px;
  height: 50px;
  max-width: 80px;
  max-height: 50px;
  object-fit: contain;
  display:block;
}

.pung-programball .cell img{
  width: 50px;
  height: 50px;
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
  display:block;
}
.pung-programball .cell.ch { position: relative; }
.pung-programball .cell.ch a {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;           /* กันโดน element ข้างๆ ทับ */
  text-decoration: none;
}
.pung-programball .cell.ch img {
  width: 50px; height: 50px; object-fit: contain; display: block;
}

.pung-row .pung-grid > .cell:nth-child(5){
  line-height:1.35;
}

.pung-grid > div,
.pung-grid > .cell {
  text-align: center;
  justify-self: center; /* ให้ grid item อยู่ตรงกลาง cell */
}

/* ชื่อ + วันที่อยู่บรรทัดเดียวกัน (PC) */
.pung-head-blue > div:nth-child(2){
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: nowrap;
}

.pung-head-blue .subdate{
  display: inline;
  margin: 0;
}

.pung-row .pung-grid .cell .is-hot{
  color:#e53935;
  font-weight:400;
}

.pung-row .pung-grid .cell.expert{
  justify-self: stretch;
  width: 100%;             
  height: 100%;
  text-align: center;      
  display: flex;         
  align-items: center;
  justify-content: center;  
  box-sizing: border-box;
  padding: 12px 0px;
}

/* สไตล์ทรรศนะ 5 แบบ (ใส่คลาสลงที่ cell คอลัมน์ที่ 5: .cell.expert.exp-1..5) */
.pung-row .pung-grid .cell.expert.exp-1 { background:#D80004; color:#fff; }
.pung-row .pung-grid .cell.expert.exp-2 { background:#ED4144; color:#fff; }
.pung-row .pung-grid .cell.expert.exp-3 { background:#1DFD00; color:#0A009D; }
.pung-row .pung-grid .cell.expert.exp-4 { background:#35FF89; color:#0A009D; }
.pung-row .pung-grid .cell.expert.exp-5 { background:#F8E302; color:#0A009D; }

/* ===== Mobile ===== */
@media (max-width: 768px){
  /* หัวฟ้า: ชื่อ + วันที่ เป็นบรรทัดเดียว (Mobile) */

  .pung-head-blue{
    gap: 4px;
    padding: 0px 0px;
  }

  .pung-head-blue > div:nth-child(2){
    display: flex;             /* เดิม: block */
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .pung-head-blue .league-title{
    flex: 1 1 auto;
    min-width: 0;              /* ให้ ellipsis ทำงาน */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   /* ชื่อยาวจะย่อเป็น … */
  }
  .pung-head-blue .subdate{
    flex: 0 0 auto;
    white-space: nowrap;       /* ไม่ตัดบรรทัด */
    margin-top: 0;             /* เดิม: 2px */
    display: inline;           /* เดิม: block */
  }

  /* ฟอนต์ไซส์มือถือ */
  .pung-programball{
    --pb-title-mobile: 14px;
    --pb-date-mobile: 14px;
    --pb-header-mobile: 12px;
    --pb-cell-mobile: 12px;
    --pb-price-mobile: 12px;

    /* เวลา | ทีมเหย้า | ราคา | ทีมเยือน | ทรรศนะ | ช่อง(ไอคอน 30px)
       บีบเวลา→44px, ราคา→56px, ทีมเหย้า/เยือน→0.8fr, เพิ่มที่ให้ทรรศนะ */
    --pb-cols-mobile: 44px 0.8fr 56px 0.8fr minmax(100px, 2.4fr) 44px;
  }

  .pung-row { padding: 0px 5px; }

  .pung-head-blue .league-title{ font-size: var(--pb-title-mobile); }
  .pung-head-blue > div:nth-child(2){ font-size: var(--pb-title-mobile); }
  .pung-head-blue .subdate{ font-size: var(--pb-date-mobile); }
  .pung-head-green .pung-grid > div{ font-size: var(--pb-header-mobile); }
  .pung-row .pung-grid > *{ font-size: var(--pb-cell-mobile); }
  .pung-row .pung-grid > *:nth-child(3){ font-size: var(--pb-price-mobile); }

  /* ไอคอนในเซลล์ทั่วไปให้เล็กลง, ช่องถ่ายทอด 30px */
  .pung-programball .cell img{
    width: 25px;
    height: 25px;
    max-width: 25px;
    max-height: 25px;
    object-fit: contain;
  }
  .pung-programball .cell.ch img { width: 30px; height: 30px; }

  /* ✅ ทำให้หัวเขียวกับพื้นขาว “กริดเดียวกัน + ขอบ/ระยะข้างเท่ากัน” */
  .pung-head-green,
  .pung-row{
    box-sizing: border-box;
    padding: 0 5px;                  /* เท่ากันทั้งหัวและแถว */
    border-left: 1px solid #e8e8e8;  /* เติมกรอบให้หัวเขียวตรงกับแถว */
    border-right: 1px solid #e8e8e8;
  }
  .pung-head-green{ border-bottom:1px solid #e6e6e6; }

  /* ใช้คอลัมน์ชุดเดียวกัน + ลดช่องไฟให้กระชับ */
  .pung-head-green .pung-grid,
  .pung-row .pung-grid{
    grid-template-columns: var(--pb-cols-mobile);
    gap: 8px; /* เดิม 12px */
  }

  /* ระยะหายใจของหัวคอลัมน์ (แนวตั้งเท่านั้น) */
  .pung-head-green .pung-grid > div{
    padding: 10px 0;
  }

  /* ล็อกคอลัมน์ช่องให้พอรูป 30px ทั้งหัวและแถว */
  .pung-head-green .pung-grid > div:nth-child(6),
  .pung-row .pung-grid > .cell:nth-child(6){
    min-width: 44px;   /* ให้ตรงกับคอลัมน์ #6 ใน --pb-cols-mobile */
    justify-self: center;
  }

  /* หัวคอลัมน์ (เฉพาะหัวตาราง) ให้คงเป็นบรรทัดเดียว */
  .pung-head-green .pung-grid > div:nth-child(2),
  .pung-head-green .pung-grid > div:nth-child(4){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* เวลาไม่ขึ้นบรรทัดใหม่ */
  .pung-row .pung-grid > .cell:nth-child(1){
    white-space: nowrap;
  }

  /* ✅ อนุญาตให้ข้อมูลขึ้นบรรทัดใหม่: ทีมเหย้า(2) ทีมเยือน(4) ทรรศนะ(5) */
  .pung-row .pung-grid > .cell:nth-child(2),
  .pung-row .pung-grid > .cell:nth-child(4),
  .pung-row .pung-grid > .cell:nth-child(5){
    white-space: normal;      /* ยกเลิก nowrap */
    overflow: visible;         /* ยกเลิกซ่อนล้น */
    text-overflow: clip;       /* ยกเลิก ellipsis */
    line-height: 1.35;
    word-break: break-word;    /* กันคำยาวติดกัน */
    overflow-wrap: anywhere;   /* เผื่อไม่มีช่องไฟ */
  }

  /* ให้กล่องทรรศนะเป็นบล็อกปกติ จะได้ตัดบรรทัดได้เต็มที่ และจัดกลาง */
  .pung-row .pung-grid .cell.expert{
    display: block;            /* override จาก flex */
    text-align: center;
    padding: 10px 6px;
  }
}