@charset "utf-8";

/***********************************/
body { font-family: 'Sarabun', sans-serif; background-color: #f8f9fa; color: #222; }
 .navbar-main { background-color: #fff; border-bottom: 1px solid #eee; padding: 15px 0; sticky-top: 0; z-index: 1000; }
 .logo-img { height: 35px; margin-right: 10px; }
 .brand-text { font-weight: 800; font-size: 1.2rem; color: #003366; text-transform: uppercase; }
        
 .user-avatar-nav { width: 35px; height: 35px; object-fit: cover; border-radius: 50%; border: 1px solid #ddd; }
        
 /* Image Display */
.main-img { width: 100%; height: 500px; object-fit: cover; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.thumb-img { width: 100%; height: 80px; object-fit: cover; border-radius: 12px; cursor: pointer; transition: 0.3s; border: 2px solid transparent; }
.thumb-img:hover { border-color: #003366; transform: translateY(-3px); }
.card-content { background: #fff; border-radius: 20px; padding: 30px 5px 30px 5px; margin-bottom: 25px; border: none; box-shadow: 0 2px 15px rgba(0,0,0,0.03); }
.price-tag { background: #fff1f0; color: #ff4d4f; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 1.5rem; display: inline-block; }
.sticky-sidebar { position: sticky; top: 100px; }
.btn-contact { border-radius: 12px; padding: 12px; font-weight: 600; width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.3s; }
.btn-call { background: #003366; color: #fff; border: none; }
 .btn-call:hover { background: #002244; color: #fff; }
  
 /* tag-cloud */  
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
  justify-content: center;
}

.tag {
  text-decoration: none;
  background: #f1f3f5;
  color: #333;
  padding: 8px 16px;
  border-radius: 50px;
  transition: all 0.3s ease;
  font-family: 'Sarabun', sans-serif;
}

.tag:hover {
  background: #003366; /* สีน้ำเงินแบบ SayHi Thailand */
  color: #fff;
  transform: translateY(-3px);
}

/* ตัวอย่างการกำหนดขนาดตามความนิยม */
.size-1 { font-size: 12px; opacity: 0.6; }
.size-2 { font-size: 16px; opacity: 0.8; }
.size-3 { font-size: 20px; font-weight: bold; }
.size-4 { font-size: 24px; font-weight: 800; color: #003366; }
.size-5 { font-size: 30px; font-weight: 900; color: #ff4d4f; }

 /* video */  
  .video {
    width: 100%;
    aspect-ratio: 16 / 9;
    
    /* เพิ่มส่วนนี้เพื่อทำขอบโค้ง */
    border-radius: 15px;   /* ปรับตัวเลขมาก-น้อยตามความต้องการ */
    overflow: hidden;      /* สำคัญมาก: เพื่อตัดขอบวิดีโอให้โค้งตาม Container */
    
    /* แถม: ใส่เงาเบาๆ ให้ดูมีมิติ (ถ้าชอบ) */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
  }

  .video iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
   
 /*  footer */  
 footer { background: #fff; border-top: 1px solid #eee; padding: 40px 0; margin-top: 60px; }