:root{
  --fg:#222; --muted:#6b7280; --red:#c62828; --accent:#ff7043;
  --bg:#f9fafb; --card:#ffffff; --line:#e5e7eb;
}
.sub-desc {
  font-size: 12px;
  color: #004989;
  margin: 8px auto 12px auto;
  text-align: center;
  max-width: 800px;
  line-height: 1.5;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body.lotto{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, Arial, "TH Sarabun New", sans-serif;
  text-align: center;   
}

/* ✅ Wrapper */
.container {
  max-width: 800px;     
  margin: 0 auto;       
  padding: 0 20px;      
}

/* ขับตำแหน่งช่อง งวดประจำวันที่ */
.draw-date { 
  margin: 1px 0 -5px;     /* ✅ ขยับลงมา */
  font-size: 22px; 
  font-weight: bold; 
  color: #000; 
  text-align: center;
}

/* Utilities */
.title-red{ color:var(--red); }
.center{ text-align:center; }
.sub{ color:var(--muted); font-size:14px; }
.muted{ color:var(--muted); font-size:13px; text-align:center; }
.hidden{ display:none; }

/* ✅ Top summary */
.top-summary{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 20px;
  align-items: center;
}
.prize-row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 760px;
  width: 100%;
}
@media(max-width:600px){
  .prize-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    position: relative;
    top: -20px;
  }
}
.prize-box{
  background:var(--card); 
  border-radius:12px; 
  padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.07); 
  text-align:center;
  width:100%;
  max-width:340px;
  margin: 0 auto;
}
.prize-box h2{ margin:0 0 8px; font-weight:800; font-size:20px; color:#333;}
.big-num{ font-size:44px; font-weight:900; color:var(--red); letter-spacing:2px; }
.xl-num{ font-size:38px; font-weight:800; color:#333; }
.row-nums{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.num3{ font-size:38px; font-weight:800; letter-spacing:2px; }

/* Sections */
.section{
  background:#fff; 
  margin:18px auto; 
  padding:14px 12px 22px;
  border:1px solid var(--line);
  max-width: 760px;       
  border-radius: 12px;
  box-shadow:0 2px 5px rgba(0,0,0,0.05);
  text-align:center;
}
@media(max-width:600px){
  .section{
    width: 95% !important;
    margin: 0 auto 18px auto !important;
  }
}

/* Grid */
.grid{ 
  display:grid; 
  gap:10px; 
  justify-content: center;  
}
.fit-2{ 
  grid-template-columns: repeat(2, minmax(100px, 1fr)); 
  max-width: 300px;         
  margin: 0 auto;
}
.fit-5{ 
  grid-template-columns: repeat(5, minmax(80px, 1fr)); 
  max-width: 600px;         
  margin: 0 auto;
}
.grid .num6{ 
  font-size:20px; 
  font-weight:800; 
  text-align:center;        
}
.grid .num6 span{ 
  display:inline-block; 
  min-width:80px; 
  text-align:center; 
}

/* ตรวจลอตเตอรี่ */
.under-top{
  background:#fff; margin:0 auto 18px; padding:16px;
  border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08);
  max-width: 760px;   
}
@media(max-width:600px){
  .under-top{
    width: 95% !important;
    margin: 0 auto 18px auto !important;
  }
}
.check-area{ display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; }
.note{ color:#b45309; margin:6px 0 14px; font-size:14px; }

/* ปุ่ม */
.btn{
  font-size:16px; font-weight:800; background:var(--accent);
  color:#fff; border:0; padding:8px 14px; border-radius:10px; cursor:pointer; margin-top:10px;
  transition: background 0.2s, transform 0.2s;
}


/* ✅ ข้อความตอนถูกรางวัล */
:root {
  --font-size-header: 20px; /* ขนาดข้อความส่วนหัว */
  --font-size-body: 18px;   /* ขนาดข้อความด้านล่าง */
  --font-size-number: 45px; /* ขนาดเลข */
  --box-scale: 1.5;           /* ปรับทั้งก้อน win/lose */
}

   .win .result-header { background: #22bb03 !important; /* เขียวเข้ม */ 
   border-radius: 6px; }
   .lose .result-header { background: #dd0000 !important; /* แดงเข้ม */
    border-radius: 6px; }

/* กล่องถูกรางวัล */
#resultArea .win {
  font-size: calc(var(--font-size-body) * var(--box-scale));
  color: #ffffff;
  background: #1c9504;
  padding: calc(10px * var(--box-scale));
  border-radius: calc(6px * var(--box-scale));
  margin: calc(8px * var(--box-scale)) 0;
  line-height: 1.5;
}

/* กล่องไม่ถูกรางวัล */
#resultArea .lose {
  font-size: calc(var(--font-size-body) * var(--box-scale));
  color: #ffffff;
  background: #ab0202;
  padding: calc(10px * var(--box-scale));
  border-radius: calc(6px * var(--box-scale));
  margin: calc(8px * var(--box-scale)) 0;
  line-height: 1.5;
}

/* ส่วนหัว */
#resultArea .result-header {
  font-weight: bold;
  font-size: calc(var(--font-size-header) * var(--box-scale));
  margin-bottom: calc(5px * var(--box-scale));
}

/* เลข 6 หลัก */
#resultArea .prize-number {
  font-size: calc(var(--font-size-number) * var(--box-scale));
  font-weight: bold;
  color: #ffffff;
}



/* บริจาค */
.donate-btn{
  width:100%; max-width:400px; font-size:18px; padding:10px; border-radius:16px;
  background:#3b82f6; color:#fff; font-weight:800; cursor:pointer; border:none;
  margin: 10px auto;
}
.qr{
  margin-top:20px; text-align:center; background:#fff; border:1px dashed #d1d5db;
  border-radius:12px; padding:12px;
  max-width: 400px; margin-left:auto; margin-right:auto;
}
.qr img{
  width:100%; max-width:240px; display:block; margin:0 auto 8px; border-radius:8px;

}
/* ปุ่มดาวน์โหลด QR */
.btn-download {
  display: inline-block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  background: #10b981;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn-download:hover {
  background: #059669;
  transform: scale(1.05);
}

/* Footer */
.footer{ text-align:center; color:var(--muted); padding:18px 0 36px; }

/* Responsive */
@media (max-width: 900px){
  .check-area{ grid-template-columns:1fr; }
}

/* ✅ ช่องกรอกลอตเตอรี่ */
.ticket-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 14px auto 0 auto;
  max-width: 600px;   
}
@media(max-width:600px){
  .ticket-grid{
    width: 95% !important;
    margin: 0 auto !important;
  }
}
.ticket {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.ticket:hover { transform: translateY(-2px); }
.ticket label {
  font-size: 16px;
  font-weight: 800;
  color: #374151;
  white-space: nowrap;
}
.ticket input {
  width: 100%;
  max-width: 200px;   
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px solid #d1d5db;
  border-radius: 10px;
  background: #fdfdfd;
  min-height: 44px;
  margin: 0 auto;
  transition: all 0.2s ease-in-out;
}
.ticket input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  background: #fff;
}
@media (max-width: 480px) {
  .ticket {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ticket label {
    margin-bottom: 8px;
    text-align: center;
    font-size: 14px;
  }
  .ticket input {
    font-size: 20px;
  }
}
@media (max-width: 600px) {
  /* ✅ ให้กล่องรวมกึ่งกลาง */
  .ticket-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 380px;   /* กำหนดกว้างสุด */
    margin: 0 auto;
  }

  /* ✅ ให้แต่ละ ticket ไม่ยืดเต็มจอ */
  .ticket {
    width: 100%;
    max-width: 320px;   /* จำกัดกว้าง */
    margin: 0 auto 10px auto;
  }

  .ticket input {
    font-size: 20px;
    max-width: 180px;   /* ช่องเล็กลง */
  }
}
@media (max-width: 600px) {
  html {
    font-size: 18px;   /* ปรับพื้นฐานทั้งเว็บ */
  }
  

  body {
    line-height: 1.6;
  }



  /* กล่องแสดงผลรางวัล */
  .big-num {
    font-size: 70px;
  }
  .xl-num {
    font-size: 70px;
  }
  .num3 {
    font-size: 50px;
  }
  .prize-box h2 {
    font-size: 22px;
  }

  /* ช่องกรอก */
  .ticket label {
    font-size: 18px;
  }
  .ticket input {
    font-size: 24px;
    min-height: 50px;
  }

  /* ผลตรวจ */
  .checker-right h3 {
    font-size: 22px;
  }
  .big-results .win,
  .big-results .lose {
    font-size: 20px;
  }

  /* ปุ่ม */
  .btn, .donate-btn, .btn-download {
    font-size: 18px;
    padding: 10px 18px;
  }

  /* footer */
  .footer {
    font-size: 16px;
  }
}
/* ✅ ปรับเฉพาะมือถือ */
@media (max-width: 480px) {
  .donate-btn {
    font-size: 24px;   /* ✅ ตัวอักษรใหญ่ขึ้น */
    padding: 16px;     /* ✅ เพิ่ม padding ให้ปุ่มไม่แคบ */
  }
}
/* ปรับช่องกรอกหวยเฉพาะมือถือ */
@media (max-width: 480px) {
  .ticket {
    padding: 8px;                 /* ลดขนาดกรอบนอก */
    gap: 6px;                     /* ลดช่องว่างระหว่าง label กับ input */
    border-radius: 8px;           /* มุมโค้งเล็กลง */
  }
  .ticket label {
    font-size: 14px;              /* ลดขนาดตัวหนังสือ */
    font-weight: 700;
    margin: 0;                    /* ชิดขอบบน */
    text-align: left;             /* ✅ จัด label ชิดซ้าย */
  }
  .ticket input {
    font-size: 18px;              /* ลดขนาดตัวอักษรในช่องกรอก */
    padding: 4px;
    min-height: 38px;             /* ช่องเตี้ยลง */
  }
  .ticket-grid {
    gap: 8px;                     /* ลดช่องว่างระหว่างกล่องแต่ละใบ */
    max-width: 100%;              /* ใช้พื้นที่พอดีจอ */
  }
}
/* ✅ มือถือ: ปรับช่องกรอก */
@media (max-width: 480px) {
  .ticket {
    display: grid;
    grid-template-columns: 60px 1fr;  /* ✅ ใบที่ อยู่ซ้าย, ช่องอยู่ขวา */
    align-items: center;
    gap: 6px;
    background: transparent;  /* ❌ ไม่มีกรอบนอก */
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .ticket label {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-align: right;   /* ✅ ชิดขวาให้อยู่ใกล้ช่อง */
  }

  .ticket input {
    width: 100%;
    max-width: 160px;    
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 6px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: #fff;
    min-height: 40px;
  }
}

@media (max-width: 480px) {
  .checker-right {
    display: block;          /* ใช้ block แทน flex */
    width: 100%;
    min-height: unset;       /* ยกเลิก min-height */
    margin: 10px auto;
    padding: 12px;
  }

}
/* ค่า default (คอมพิวเตอร์) */
.fit-5 { 
  grid-template-columns: repeat(5, minmax(80px, 1fr)); 
  max-width: 600px;         
  margin: 0 auto;
}

/* ✅ สำหรับมือถือ */
@media (max-width: 480px) {
  .fit-5 { 
    grid-template-columns: repeat(3, 1fr); 
    max-width: 100%;
  }
}
/* ค่าเริ่มต้น (คอมพิวเตอร์ / แท็บเล็ต) → แสดงต่อเนื่อง */
.page-title .mobile-break::before {
  content: " ";
}

/* ✅ เฉพาะมือถือ */
@media (max-width: 480px) {
  .page-title .mobile-break::before {
    content: "\A";     /* บังคับขึ้นบรรทัดใหม่ */
    white-space: pre;  /* รักษา newline */
  }
}

/* เปลี่ยนสีข้อความจางในช่องกรอก */
.ticket input::placeholder {
  color: #9ca3af;   /* เทาอ่อน */
  font-size: 16px;  /* ปรับขนาดตัวอักษรได้ */
  opacity: 1;       /* ทำให้ชัดเต็มที่ (ค่ามาตรฐานคือ 0.5) */
}

/* ✅ ปรับขนาดปุ่มเฉพาะมือถือ */
@media (max-width: 768px) {
  #checkBtn {
    font-size: 25px;      /* ขยายขนาดตัวอักษร */
    padding: 14px 24px;   /* เพิ่มพื้นที่ปุ่ม */
    width: 100%;          /* กินเต็มบรรทัด */
  }
}

/* ✅ เฉพาะคอมพิวเตอร์ (หน้าจอกว้าง ≥ 992px) */
@media screen and (min-width: 992px) {
  .header-img {
    width: 100vw;       /* ยืดเต็มจอ */
    max-width: 100vw;   /* ไม่ถูกบีบด้วย container */
    margin: 0;          /* ลบ margin auto */
    border-radius: 0;   /* กันไม่ให้โค้ง */
  }
}

/* ขนาดภาพ header สำหรับมือถือ/แอพ */
@media only screen and (max-width: 768px) {
.header-container {
  display: flex;
  justify-content: center; /* จัดกลางแนวนอน */
  align-items: center;     /* จัดกลางแนวตั้งถ้าสูงเกิน */
  }
}

/* ขนาดภาพ header สำหรับมือถือ/แอพ */
@media only screen and (max-width: 768px) {
  .header-img {
    display: block;
    margin: 0 auto;

    width: 100% !important;    /* ให้พอดีกับจอ */
    height: 150px;             /* fix ความสูงไว้ */
    object-fit: cover;         /* ตัด/ขยายให้เต็ม ไม่ให้มีขอบขาว */
  }
}


/* มือถือ (กว้างไม่เกิน 480px) → บังคับขึ้นบรรทัดใหม่ */
@media (max-width: 480px) {
  .draw-date span.date-label,
  .draw-date span.date-value {
    display: block;   /* ✅ แยกเป็น 2 บรรทัด */
    text-align: center;
    margin: -5px 0;   /* ✅ ระยะห่างเล็กน้อยระหว่างบรรทัด */
  }
}
/* เปลี่ยนสีและขนาดของหัวข้อ "รางวัลที่ ..." */
.prize-box h2,
.section h2 {
  color: #004c74;           /* ตัวหนังสือสีขาว */
  font-size: 25px;
  font-weight: 900;
  background: #c7f0ff;      /* พื้นหลังแถบสีพื้น */
  padding: 6px 16px;        /* ระยะห่างในแถบ */
  border-radius: 8px;       /* มุมโค้งมน */
  display: 100%;    /* แถบยาวแค่ขนาดข้อความ */
}

/* เลขรางวัลที่ 1 */
#prize1 {
  color: #0488c6;   /* แดงเข้ม */
  font-size: 80px;  /* ใหญ่ขึ้น */
  font-weight: 900;
}

/* เลขท้าย 2 ตัว */
#twoLast {
  color: #0488c6;   /* น้ำเงิน */
  font-size: 80px;
  font-weight: 900;
}

/* เลขหน้า 3 ตัว */
#threeFront .num3 {
  color: #0488c6;   /* เขียว */
  font-size: 40px;
  font-weight: 800;
}

/* เลขท้าย 3 ตัว */
#threeBack .num3 {
  color: #0488c6;   /* ส้ม */
  font-size: 40px;
  font-weight: 800;
}

/* ✅ ปรับเฉพาะมือถือให้เล็กลงนิด */
@media (max-width: 480px) {
  #prize1 { font-size: 70px; }
  #twoLast { font-size: 60px; }
  #threeFront .num3,
  #threeBack .num3 { font-size: 60px; }
}

/* ✅ ขยายช่องกรอกหวยให้ใหญ่และยาวขึ้น */
.ticket input {
  width: 130%;
  max-width: 250px;   /* เดิม 200px → ขยายให้ยาวขึ้น */
  min-height: 60px;   /* เดิม 44px → สูงขึ้น */
  font-size: 28px;    /* เดิม 22px → ตัวใหญ่ขึ้น */
  padding: 10px 14px; /* เพิ่ม padding ด้านใน */
  border-radius: 12px;
}
@media (max-width: 600px) {
  .ticket input {
    max-width: 260px;   /* ยาวขึ้น */
    min-height: 55px;   /* สูงขึ้น */
    font-size: 24px;    /* ตัวใหญ่ขึ้น */
  }
}

@media (max-width: 480px) {
  .ticket input {
    max-width: 240px;
    min-height: 50px;
    font-size: 22px;
    padding: 8px;
  }
}
/* 🎯 ค่าเริ่มต้น (มือถือ) → แต่ละช่องเรียงลง */
#inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 🎯 เฉพาะคอม (จอกว้าง ≥ 992px) → จัดเป็น Grid 2 แถว 5 ช่อง */
@media screen and (min-width: 992px) {
  #inputs {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 ช่องต่อแถว */
    gap: 15px;
    max-width: 900px; /* กำหนดความกว้างรวม */
    margin: 0 auto;   /* จัดให้อยู่กลางจอ */
  }

  .ticket {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f8;
    padding: 10px;
    border-radius: 6px;
  }

  .ticket label {
    margin-bottom: 6px;
    font-weight: bold;
  }

  .ticket input {
    width: 100%;
    font-size: 18px;
    text-align: center;
    padding: 6px 10px;
  }
}

.donate-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;

  display: flex;              /* ✅ ใช้ flex */
  justify-content: center;    /* ✅ จัดรูปให้อยู่ตรงกลาง */
  align-items: center;

  width: 100%;                /* ✅ กินเต็มบรรทัดของ parent */
  max-width: 400px;           /* ✅ จำกัดขนาดปุ่ม */
  margin: 15px auto;          /* ✅ margin auto จัดกึ่งกลาง */
}

.donate-btn .donate-img {
  max-width: 115%;            /* ✅ รูปไม่เกินปุ่ม */
  height: auto;
  display: block;
}
.btn {
  background: linear-gradient(180deg, #18aadf, #006c93); /* ไล่น้ำเงิน */
  color: #fff;
}
.btn:hover {
  background: linear-gradient(180deg, #18aadf, #006c93);
}
.play-badge {
  width: 200px;   /* ปรับขนาดกว้างตามต้องการ */
  height: auto;   /* ให้สูงปรับเอง */
  max-width: 100%; /* ป้องกันไม่ให้เกิน container */
  transition: transform 0.2s;
}
.play-badge:hover {
  transform: scale(1.05);
}

:root {
  --btn-scale: 0.7;      /* ✅ ปรับขนาดปุ่มทั้งชุด */
  --btn-margin-top: -20px;
  --btn-margin-bottom: -100px;
}

.google-play-btn {
  display: inline-block;
  font-size: 0;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 8px;
  background: #d7d7d7;
  color: #fff;
  text-decoration: none;

  /* ✅ ปรับขนาดทั้งบล็อก */
  transform: scale(var(--btn-scale));
  transform-origin: center;

  /* ✅ ปรับระยะห่างด้านนอก */
  margin: var(--btn-margin-top) 0 var(--btn-margin-bottom) 0;
}




#mainHeading {
  text-align: center;
  margin: 10px 0 20px;
  line-height: 1.5;
  margin-top: -5px;
  margin-bottom: 10px;
}

#mainHeading span {
  display: block;         /* ✅ บังคับให้ขึ้นบรรทัดใหม่ */
}

/* หัวข้อหลัก */
#mainHeading .h1-main {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background-color: #005eac; /* ส้ม */
    padding: 5px 10px;      /* เพิ่มช่องว่างในกล่อง */
  border-radius: 0px;     /* มุมโค้งมน */
  margin: 1px 0;          /* เว้นระยะระหว่างแต่ละบรรทัด */
}

/* วันที่ */
#mainHeading .h1-date {
  font-size: 0.9rem;
  font-weight: 600;
  color: #00476b;
  background-color: #c3eaff; /* ส้ม */
    padding: 5px 10px;      /* เพิ่มช่องว่างในกล่อง */
  border-radius: 0px;     /* มุมโค้งมน */
  margin: 3px 0;          /* เว้นระยะระหว่างแต่ละบรรทัด */
}

/* ข้อความเสริม */
#mainHeading .h1-sub {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background-color: #ff8800; /* เทา */
  display: inline-block;   /* ✅ พื้นหลังหดตามขนาดข้อความ */
  padding: 5px 15px;       /* เพิ่มช่องว่างด้านใน */
  border-radius: 20px;     /* มุมโค้งมน */
  position: relative;
  top: -8px;
}