/* tuvi.css.bwt - V55: FULL HEIGHT & GLASS CLOSE BUTTON */

/* 1. CƯỠNG BỨC CANH GIỮA TIÊU ĐỀ */
h1, .title-head, .page-title, .blog-post-title, .article-title {
  text-align: center !important; display: block !important; width: 100% !important;
}

/* 2. KHUNG WIDGET */
#tv-box {
  background: #ffffff; padding: 30px 20px; border-radius: 20px;
  text-align: center !important; max-width: 550px; width: 100%;
  margin: 30px auto !important; border: 2px solid #00b894;
  box-shadow: 0 10px 30px rgba(0, 184, 148, 0.15);
  font-family: 'Nunito', sans-serif; box-sizing: border-box; display: block;
}
#tv-box * { box-sizing: border-box; outline: none; }

#tv-box h2 {
  color: #00b894 !important; margin: 0 0 25px 0 !important;
  font-size: 26px !important; font-weight: 900 !important;
  text-transform: uppercase !important; text-align: center !important;
  border: none !important; padding: 0 !important; background: none !important;
  display: block !important; width: 100% !important;
}
#tv-box h2::before, #tv-box h2::after { display: none !important; }

/* Form chọn */
.tv-row { display: flex; gap: 15px; margin-bottom: 25px; text-align: left; }
.tv-c1 { flex: 60%; } .tv-c2 { flex: 40%; }
#tv-box label { font-size: 13px; font-weight: 700; color: #666; display: block; margin-bottom: 5px; text-transform: uppercase; }
#tv-box select {
  width: 100%; padding: 12px 35px 12px 15px !important; font-size: 16px;
  border-radius: 10px; background-color: #f0fff4; border: 1px solid #00b894;
  color: #00896c; font-weight: 700; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300b894'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
#tv-btn {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  color: #fff; padding: 16px; border-radius: 10px; font-weight: 800;
  font-size: 18px; text-transform: uppercase; cursor: pointer;
  display: block; width: 100%; text-align: center !important;
  box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3); transition: transform 0.2s;
}
#tv-btn:active { transform: scale(0.98); }

/* 3. POPUP KẾT QUẢ (FULL MÀN HÌNH - THOÁNG ĐÃNG) */
#tv-pop {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85); z-index: 2147483647 !important;
  justify-content: center; align-items: flex-end; /* Mobile hiện từ dưới lên */
  backdrop-filter: blur(5px);
}

#tv-cont {
  background: #fff; width: 95%; max-width: 600px;
  height: 85vh; /* CHIỀU CAO 92% MÀN HÌNH (Rất thoáng) */
  border-radius: 20px 20px 0 0; /* Bo tròn góc trên */
  display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Nunito', sans-serif; position: relative;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

#tv-head {
  padding: 20px 15px; border-bottom: 1px solid #f0f0f0;
  text-align: center; background: #fff; flex-shrink: 0;
}
#tv-tt { margin: 0; font-size: 24px; color: #00b894; font-weight: 900; text-transform: uppercase; }
#tv-sub { font-size: 14px; color: #777; margin-top: 5px; font-weight: 700; }

#tv-body {
  padding: 20px 20px 100px 20px; /* Padding dưới dày để ko bị nút X che chữ */
  overflow-y: auto; text-align: justify;
  line-height: 1.6; font-size: 16px; color: #333; flex-grow: 1;
  -webkit-overflow-scrolling: touch;
}

/* 4. NÚT ĐÓNG (HÌNH TRÒN TRONG SUỐT - ĐẸP) */
#tv-close {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); /* Đen trong suốt */
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(4px); z-index: 10;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.2s;
}
#tv-close:active { transform: translateX(-50%) scale(0.9); background: #000; }
#tv-close svg { width: 24px; height: 24px; fill: #fff; }

/* Style Nội dung */
.tv-it { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px dashed #eee; }
.tv-it:last-child { border: none; }
.tv-lb { display: flex; align-items: center; gap: 10px; color: #00b894; font-weight: 800; margin-bottom: 8px; text-transform: uppercase; font-size: 15px; }
.tv-ico { width: 24px; height: 24px; flex-shrink: 0; fill: #00b894; }
.tv-adv { padding: 20px; background: #e0f2f1; border: 1px solid #80cbc4; border-radius: 12px; color: #00695c; margin-top: 15px; }
.tv-adv .tv-lb { color: #00695c; } .tv-adv .tv-ico { fill: #00695c; }
.tv-adv.bad { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
.tv-adv.bad .tv-lb { color: #c62828; } .tv-adv.bad .tv-ico { fill: #c62828; }

/* PC: Popup hiện giữa màn hình, Mobile: Hiện từ dưới lên */
@media (min-width: 768px) {
  #tv-pop { align-items: center; }
  #tv-cont { border-radius: 20px; height: auto; max-height: 85vh; animation: fadeIn 0.3s; }
  @keyframes fadeIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
}