.price {
    font-size: 1.8rem;              /* ขนาดใหญ่ */
    font-weight: bold;              /* หนา */
    color: #004085;                 /* น้ำเงินเข้ม */
    background: linear-gradient(90deg, #e3fcec, #c3f5d8); /* ไล่สีเขียวอ่อน */
    border: 2px solid #0eb2ab;      /* ขอบเขียวพรีเมียม */
    padding: 20px 25px;             /* ระยะห่าง */
    border-radius: 12px;            /* มุมโค้งมน */
    text-align: center;             /* จัดกึ่งกลาง */
    display: block;                 /* ยืดเต็มบรรทัด */
    box-shadow: 0 6px 18px rgba(0,0,0,0.1); /* เงานุ่ม */
    margin: 25px auto;              /* เว้นระยะรอบกล่อง */
    max-width: 600px;               /* จำกัดความกว้าง */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* เพิ่ม effect hover */
}

.price:hover {
    transform: scale(1.02);         /* ขยายเล็กน้อยตอน hover */
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.price-header {
    font-size: 1.6rem;              /* ขนาดใหญ่กว่าปกติ */
    font-weight: bold;              /* ตัวหนา */ 
    padding: 12px 18px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;                      /* ระยะห่าง icon กับข้อความ */
    margin: 20px 0;
}
.price-header i {
        font-size: 2rem;            /* ไอคอนสีส้ม */
}

.price-header span{
    padding-left: 5px;
}

.price-green{ 
    border-left: 10px solid #967C0B;
    color: #967C0B;
    background: #967c0b24;
}

.price-gold{
    border-left: 10px solid #FFC900;
    color: #FFC900;
    /* background: #50675d; */
    border-top: 1px solid #FFC900;
    border-right: 1px solid #FFC900;
    border-bottom: 1px solid #FFC900;
}

.price-orange{ 
    border-left: 10px solid #e67e22; /* แถบสีส้มด้านซ้าย */
    color: #e67e22;                 /* ส้มเข้ม */
    background: #fff5e6;            /* พื้นหลังส้มอ่อน */ 
}

.price span {
    font-size: 1.2rem;   /* ขนาดเล็กลง */
    font-weight: normal; /* ไม่ต้องหนา */
    color: #555;         /* สีเทาอ่อน */
    display: grid;
}

.warning{
    color:red;
    font-style: italic;
}

.warning h3{
    color:red !important
}

.loader {
  border: 6px solid #f3f3f3; /* สีเทาอ่อน */
  border-top: 6px solid #ff9800; /* สีส้ม */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
  display: none; /* ซ่อนไว้ก่อน */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}