/* =========================================================
   Messtori Event Discover – CSS v1.7
   - Popup mobile-safe, không trượt ngang
   - Cuộn toàn bộ (cover + info + content)
   - Nút đóng luôn nổi, dễ bấm
   - CTA kiểu Luma (đẹp trên mọi thiết bị)
   - Google Maps embed responsive
   - Flatsome friendly
   ========================================================= */
   
   
/* ==== MED Modal: luôn nổi trên cùng (kể cả header sticky / UX Builder tooltips) ==== */
#med-event-modal.med-modal{
  position: fixed;
  inset: 0;
  z-index: 999999999999 !important; /* siêu cao để thắng mọi thứ */
}

#med-event-modal .med-modal-dialog{
  position: relative;
  z-index: 999999999999 !important; /* cao hơn overlay */
}

/* Cô lập stacking context để theme không “kéo” modal xuống dưới */
#med-event-modal, #med-event-modal *{
  isolation: isolate;
}

/* Khi modal mở: vô hiệu mọi pointer ở lớp dính trên cùng (header sticky, overlays) */
html.med-modal-open .header,
html.med-modal-open .header-wrapper,
html.med-modal-open .ux-header,
html.med-modal-open .sticky-header,
html.med-modal-open .mfp-wrap,
html.med-modal-open .mfp-bg,
html.med-modal-open #wpadminbar,          /* thanh admin WP */
html.med-modal-open .ub-tooltip,          /* tooltip UX Builder (nếu có) */
html.med-modal-open [class*="uxb-"],
html.med-modal-open [data-uxb-tooltip]{
  pointer-events: none !important;
}

/* Nhưng nội dung khung dialog vẫn tương tác bình thường */
#med-event-modal .med-modal-dialog,
#med-event-modal .med-modal-dialog *{
  pointer-events: auto !important;
}

/* Khóa cuộn nền khi modal mở */
html.med-modal-open, body.med-modal-open{
  overflow: hidden !important;
}


   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   /* Ẩn thanh filter trên Event Discover */
.med-event-discover .med-filters{ display:none !important; }
/* Khoảng cách card đồng đều */
.med-event-discover.med-grid-only .col{ margin-bottom:22px; }


/* ---------- FILTER BAR ---------- */
.med-event-discover .med-filters{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px;
}
.med-event-discover .med-filters input[type="search"],
.med-event-discover .med-filters input[type="text"],
.med-event-discover .med-filters select{
  padding:10px 12px; min-width:160px;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
.med-event-discover .med-filters .button{ border-radius:999px; padding:10px 16px; }

/* ---------- EVENT CARD GRID ---------- */
.med-event .box-image{ position:relative; }
.med-event .box-text{ padding:14px 6px; }
.med-date-badge{
  position:absolute; left:12px; top:12px;
  background:#fff; color:#111; border-radius:999px;
  padding:6px 10px; font-weight:700; font-size:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.med-event .med-meta{ font-size:14px; color:#555; margin:6px 0 10px; }
.med-event .med-meta .med-row{ margin:3px 0; }
.med-event .med-actions .button{ margin-right:8px; border-radius:999px; }
.med-event.box:hover .name a{ text-decoration:underline; }

/* ---------- PAGINATION ---------- */
.med-pagination ul{ display:flex; gap:6px; justify-content:center; margin-top:20px; }
.med-pagination li a, .med-pagination li span{
  display:inline-block; padding:8px 12px; border-radius:8px;
  border:1px solid #e5e7eb; background:#fff;
}
.med-pagination li .current{ background:#111; color:#fff; border-color:#111; }

/* =========================================================
   MODAL POPUP – nhỏ gọn, 1 cột, cuộn toàn bộ, mobile-safe
   ========================================================= */

/* Khóa cuộn nền khi mở modal */
html.med-modal-open, body.med-modal-open{
  overflow:hidden; overscroll-behavior:none; width:100%; max-width:100%;
}

/* Overlay (mặc định ẩn) */
.med-modal{
  display:none; position:fixed; inset:0;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background:rgba(0,0,0,.6); z-index:99999;
  overflow-y:auto; overflow-x:hidden;      /* NGĂN kéo ngang */
  touch-action:none;                        /* chặn kéo nền */
}
.med-modal *{ -webkit-tap-highlight-color: transparent; }

/* Hộp modal */
.med-modal-dialog{
  position:relative; background:#fff; color:#111;
  width:min(580px, 94vw);
  margin:0 auto; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  max-height: calc(100dvh - (max(12px, env(safe-area-inset-top)) + max(12px, env(safe-area-inset-bottom))));
  display:flex; flex-direction:column; overflow:hidden;
}

/* Nút Đóng – luôn nổi trên nội dung, chừa safe-area */
.med-modal-close{
  position:absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 2px);
  right: calc(max(12px, env(safe-area-inset-right)) + 2px);
  z-index:20;                                /* cao hơn body */
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  background:rgba(255,255,255,.95);
  border:1px solid #e9ecef; border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  cursor:pointer; touch-action:manipulation;
}
.med-modal-close:active{ transform:scale(.98); }

/* VÙNG CUỘN NỘI DUNG – chứa cả ảnh + info + content (cuộn hết cùng nhau) */
.med-modal-body{
  position:relative; z-index:1;              /* dưới nút close */
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding-bottom: max(10px, env(safe-area-inset-bottom));  /* tránh bị che ở đáy iOS */
}

/* Ảnh cover (cuộn cùng nội dung) */
.med-cover img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; background:#f3f4f6;
}

/* Sections (một cột) */
.med-section{ padding:18px 20px; }
.med-section + .med-section{ border-top:1px solid #f0f2f4; }

.med-title{ margin:0 0 6px; font-size:22px; line-height:1.3; }
.med-info{
  background:#fafafa; border:1px solid #f0f2f4; border-radius:12px;
  padding:14px; font-size:14px; color:#444;
}
.med-info .med-line{ margin:6px 0; }
.med-info .med-k{ font-weight:600; min-width:96px; display:inline-block; }

.med-content{ font-size:15px; line-height:1.7; color:#222; overflow-wrap:anywhere; }
.med-content p{ margin:0 0 12px; }
.med-content ul{ margin:10px 0 12px 18px; }
.med-content img{ max-width:100%; height:auto; border-radius:8px; }

/* =========================================================
   CTA kiểu Luma (đẹp, gọn)
   ========================================================= */
.med-cta{ margin-top:16px; display:flex; }
.med-modal .med-cta .button.med-cta-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; letter-spacing:.2px; font-size:15px;
  padding:12px 22px; border-radius:9999px;
  background:linear-gradient(180deg, #ff385c 0%, #e11d48 100%);
  border:1px solid rgba(0,0,0,.06);
  color:#fff; text-transform:none;
  box-shadow:0 6px 18px rgba(225, 29, 72, .28), 0 1px 0 rgba(0,0,0,.08) inset;
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.med-modal .med-cta .button.med-cta-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(225,29,72,.32), 0 1px 0 rgba(255,255,255,.1) inset;
  filter:saturate(1.02);
}
.med-modal .med-cta .button.med-cta-primary:active{
  transform:translateY(0);
  box-shadow:0 4px 14px rgba(225,29,72,.28) inset;
}
.med-modal .med-cta .button.med-cta-primary:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,56,92,.25), 0 8px 22px rgba(225,29,72,.3);
}

/* Mobile CTA */
@media (max-width:768px){
  .med-title{ font-size:20px; }
  .med-modal-dialog{ width:96vw; }
  .med-modal .med-cta{ justify-content:center; }
  .med-modal .med-cta .button.med-cta-primary{
    width:100%; max-width:420px;
    padding:12px 18px; font-size:15px;
  }
}

/* Trạng thái disabled (nếu cần) */
.med-modal .med-cta .button.med-cta-primary[disabled],
.med-modal .med-cta .button.med-cta-primary.is-disabled{
  background:linear-gradient(180deg,#cbd5e1 0%,#94a3b8 100%);
  box-shadow:none; cursor:not-allowed; opacity:.9;
}

/* =========================================================
   Google Maps embed responsive
   ========================================================= */
.med-map-wrap{
  position:relative; width:100%;
  border-radius:12px; overflow:hidden;
  border:1px solid #eef1f4; background:#f6f7f9;
  aspect-ratio:16/9; /* responsive */
}
.med-map-wrap .med-map-iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* =========================================================
   TƯƠNG THÍCH FLATSOME
   ========================================================= */
.med-event .box-image .image-cover img{ width:100%; height:auto; display:block; }


/* ===== Join card (Luma-style) ===== */
.med-join{ 
  margin-top:16px; background:#fff; 
  border:1px solid #eef1f4; border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
  padding:14px 16px;
}
.med-join .med-join-title{
  margin:0 0 8px; font-size:12px; line-height:1;
  color:#6b7280; text-transform:uppercase; letter-spacing:.06em;
}
.med-join p{ margin:8px 0 12px; font-size:14px; color:#111; }

.med-join .med-join-actions{ display:flex; gap:10px; }

/* Nút đen gọn, pill */
.med-join-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:9999px;
  background:#111; color:#fff; border:1px solid #111;
  font-weight:700; letter-spacing:.2px; font-size:14px;
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.med-join-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.15); }
.med-join-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,0,0,.2); }

/* Mobile: full-width đẹp */
@media (max-width:768px){
  .med-join .med-join-actions{ justify-content:center; }
  .med-join-btn{ width:100%; max-width:420px; }
}



/* ==== Featured badge (🔥 Sự kiện nổi bật) ==== */
.med-featured {
  display:flex; align-items:center; gap:8px;
  width:fit-content;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(135deg,#ff7a18 0%, #ff0069 100%);
  box-shadow:0 6px 18px rgba(255,0,105,.25);
  margin:0 0 10px;
}
.med-featured svg{ width:16px; height:16px; flex:0 0 16px; }

/* ==== Web3 Info Card (đổi mới + icon) ==== */
.med-info--web3{
  position:relative;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%, #fbfbff 100%);
  border:1px solid rgba(140,160,255,.25);
  box-shadow:
    0 10px 28px rgba(12, 20, 60, .06),
    0 1px 0 rgba(255,255,255,.8) inset;
  padding:14px 14px;
}
.med-info--web3 .med-list{ display:flex; flex-direction:column; gap:10px; }

.med-row--web3{
  display:grid; grid-template-columns: 28px 120px 1fr; gap:10px; align-items:center;
}
@media (max-width:640px){
  .med-row--web3{ grid-template-columns: 28px 1fr; }
  .med-row--web3 .med-k{ display:none; } /* ẩn nhãn dài trên mobile, giữ icon + value */
}

.med-ico{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12);
  font-size:14px;
}
.mi-time    { background:linear-gradient(135deg,#7c3aed,#3b82f6); }
.mi-loc     { background:linear-gradient(135deg,#06b6d4,#3b82f6); }
.mi-addr    { background:linear-gradient(135deg,#14b8a6,#22c55e); }
.mi-price   { background:linear-gradient(135deg,#fb923c,#f97316); }
.mi-link    { background:linear-gradient(135deg,#ef4444,#f43f5e); }

.med-k{ font-weight:700; color:#1f2937; }
.med-v{ color:#111; }

/* Link trong info card */
.med-info--web3 a{ color:#2563eb; text-decoration: none; font-weight:600; }
.med-info--web3 a:hover{ text-decoration: underline; }

/* Làm info card “nổi bật” hơn một chút khi hover (desktop) */
@media (hover:hover){
  .med-info--web3:hover{ transform:translateY(-1px); transition:transform .15s ease; }
}


/* ===== Join card — Web3 glassmorphism ===== */
.med-join{
  position:relative;
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,.85);               /* fallback */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 10px 28px rgba(12, 20, 60, .06),
    0 1px 0 rgba(255,255,255,.8) inset;
  border:1px solid rgba(140,160,255,.25);
  overflow:hidden;
}

/* viền gradient mảnh (đặt dưới dạng overlay) */
.med-join::before{
  content:"";
  position:absolute; inset:0; border-radius:16px;
  padding:1px; pointer-events:none;
  background:linear-gradient(135deg,#8b5cf6, #06b6d4, #22c55e, #f59e0b);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* label nhỏ */
.med-join .med-join-title{
  margin:0 0 10px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#6b7280;
  display:flex; align-items:center; gap:8px;
}
.med-join .med-join-title .dot{
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,#22c55e,#06b6d4);
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

/* nội dung */
.med-join p{ margin:0 0 14px; color:#0f172a; }

/* khu vực actions */
.med-join .med-join-actions{ display:flex; gap:10px; }

/* ===== Button đen + viền gradient + glow ===== */
.med-join-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 18px; border-radius:9999px;
  background:#0b0b0f; color:#fff; font-weight:700; font-size:14px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
}

/* viền gradient mảnh bên ngoài nút */
.med-join-btn::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4,#22c55e,#f59e0b);
  filter:blur(6px); opacity:.35;
}

/* hover/focus */
.med-join-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.28); }
.med-join-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(139,92,246,.3), 0 10px 24px rgba(0,0,0,.28); }

/* icon trong nút */
.med-join-btn .ico{ width:16px; height:16px; display:inline-block; }

/* Mobile: full width */
@media (max-width:768px){
  .med-join .med-join-actions{ justify-content:center; }
  .med-join-btn{ width:100%; max-width:420px; }
}


/* ===== Status pill under title ===== */
.med-status-wrap{ margin:2px 0 10px; }
.med-status{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  border:1px solid #e5e7eb; background:#f8fafc; color:#0f172a;
  width:max-content;
}
.med-status .dot{ width:8px; height:8px; border-radius:50%; background:#94a3b8; }
.med-status .med-countdown{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight:700; margin-left:6px; padding-left:6px;
  border-left:1px dashed rgba(0,0,0,.12);
}

/* Colors per state */
.med-status.is-upcoming{
  background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.25); color:#1e3a8a;
}
.med-status.is-upcoming .dot{ background:#3b82f6; }

.med-status.is-live{
  background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.28); color:#065f46;
}
.med-status.is-live .dot{ background:#10b981; animation:pulse 1.5s infinite; }

.med-status.is-ended{
  background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.30); color:#334155;
}
.med-status.is-ended .dot{ background:#94a3b8; }

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(16,185,129,.45) }
  70%{ box-shadow:0 0 0 8px rgba(16,185,129,0) }
  100%{ box-shadow:0 0 0 0 rgba(16,185,129,0) }
}



/* Ẩn thanh filter nếu còn sót */
.med-event-discover .med-filters{ display:none !important; }

/* Header nhẹ nhàng */
.med-ed-head{ margin-bottom:14px; }
.med-ed-title{ margin:0; font-size:28px; line-height:1.25; }
.med-ed-sub{ margin:4px 0 0; color:#64748b; }

/* Card grid */
.med-grid .med-card-wrap{ margin-bottom:22px; }
.med-event .box-image{ position:relative; border-radius:14px; overflow:hidden; }
.med-event .box-image img{ width:100%; height:auto; display:block; }
.med-thumb-fallback{
  display:flex; align-items:center; justify-content:center; height:180px;
  background:#0f172a; color:#fff; font-weight:700; letter-spacing:.2em;
}
.med-date-badge{
  position:absolute; left:12px; top:12px;
  background:#fff; color:#111; border-radius:999px; padding:6px 10px;
  font-weight:700; font-size:12px; box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.med-event .box-text{ padding:12px 4px 6px; }
.med-event .name{ font-size:18px; margin:0 0 6px; line-height:1.35; }
.med-event .med-meta{ font-size:14px; color:#555; margin:6px 0 10px; }
.med-event .med-meta .med-row{ margin:3px 0; }
.med-event .med-actions .button{ border-radius:999px; padding:6px 12px; }

/* Hover tinh tế */
.med-event:hover .name a,
.med-event.box:hover .name { text-decoration:underline; }


/* =========================================================
   Messtori – Event Cards (Web3 compact)
   - Card nhỏ gọn, cân đối
   - Viền gradient nhẹ + glass hover
   - Ảnh 16:9, badge ngày
   - Typography gọn, meta rõ, nút nhỏ
   - Mượt trên mọi thiết bị
   ========================================================= */

/* Khoảng cách đều giữa các cột */
.med-event-discover.med-grid-only .col { margin-bottom: 18px; }

/* Card khung */
.med-event.box{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(140,160,255,.22);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, .06),
    0 1px 0 rgba(255,255,255,.8) inset;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* “Viền gradient” mảnh kiểu Web3 (overlay) */
.med-event.box::before{
  content: "";
  position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4, #22c55e, #f59e0b);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .0; transition: opacity .2s ease;
}

/* Hover nâng nhẹ + sáng viền */
.med-event.box:hover{
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, .10),
    0 1px 0 rgba(255,255,255,.9) inset;
  border-color: rgba(140,160,255,.36);
}
.med-event.box:hover::before{ opacity: .35; }

/* Ảnh 16:9 nhỏ gọn */
.med-event .box-image{ position: relative; overflow: hidden; }
.med-event .box-image .image-cover { display:block; }
.med-event .box-image img{
  width: 100%; height: auto; display: block;
  aspect-ratio: 16/9; object-fit: cover; background: #f3f4f6;
  transform: scale(1.001); transition: transform .4s ease;
}
.med-event.box:hover .box-image img{ transform: scale(1.03); }

/* Badge ngày */
.med-date-badge{
  position: absolute; left: 10px; top: 10px;
  background: #fff; color: #0f172a;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 999px; padding: 4px 9px;
  font-weight: 700; font-size: 12px;
  box-shadow: 0 6px 16px rgba(2,8,23,.10);
}

/* Nội dung card – compact */
.med-event .box-text{ padding: 10px 10px 12px; }
.med-event .name{
  font-size: 16px; line-height: 1.35; margin: 0 0 6px;
  color: #0f172a;
}
.med-event .name a{ color: inherit; text-decoration: none; }
.med-event.box:hover .name a{ text-decoration: underline; }

/* Meta gọn */
.med-event .med-meta{ font-size: 13px; color: #475569; margin: 4px 0 8px; }
.med-event .med-meta .med-row{ margin: 2px 0; }

/* Actions – nút nhỏ, bo tròn */
.med-event .med-actions .button{
  --btn-py: 6px; --btn-px: 10px;
  padding: var(--btn-py) var(--btn-px);
  font-size: 12px; line-height: 1; border-radius: 999px;
  border: 1px solid #e5e7eb; background: #fff; color: #0f172a;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.med-event .med-actions .button:hover{
  border-color: #c7d2fe; background: #0b0b0f; color: #fff; transform: translateY(-1px);
}
/* Flatsome “outline” an toàn */
.med-event .med-actions .button.outline{
  background: #fff; color: #0f172a; border-color: #e2e8f0;
}
.med-event .med-actions .button.is-small{ font-size: 12px; }

/* Placeholder khi không có ảnh */
.med-thumb-fallback{
  display:flex; align-items:center; justify-content:center;
  height: 160px; letter-spacing: .18em; font-weight: 700;
  background: #0f172a; color: #fff;
}

/* Lưới responsive – giữ card nhỏ, gọn */
@media (max-width: 1024px){
  .med-event .name{ font-size: 15px; }
  .med-event .med-meta{ font-size: 12.5px; }
}
@media (max-width: 640px){
  .med-event .box-text{ padding: 10px 8px 12px; }
  .med-event .name{ font-size: 15px; }
  .med-date-badge{ padding: 4px 8px; font-size: 11px; }
}

/* Dark-ish mode friendly (tuỳ chọn) */
@media (prefers-color-scheme: dark){
  .med-event.box{
    background: #0b0b0f; border-color: rgba(148,163,184,.20);
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }
  .med-event .name{ color: #e5e7eb; }
  .med-event .med-meta{ color: #94a3b8; }
  .med-event .med-actions .button{ background:#0f172a; color:#e5e7eb; border-color:#1f2937; }
  .med-event .med-actions .button:hover{ background:#111827; border-color:#3b82f6; }
  .med-date-badge{ background:#0f172a; color:#e5e7eb; border-color:#1f2937; }
}


/* ==== Card compact Web3 (grid) ===================================== */
.med-card{
  border-radius:14px; overflow:hidden; background:#fff;
  border:1px solid rgba(140,160,255,.22);
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.med-card::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  padding:1px;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4,#22c55e,#f59e0b);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .2s ease;
}
.med-card:hover{ transform:translateY(-2px); border-color:rgba(140,160,255,.36); box-shadow:0 10px 24px rgba(15,23,42,.10); }
.med-card:hover::before{ opacity:.35; }

/* Ảnh 16:9, bỏ khoảng trắng “thừa” */
.med-card .box-image{ position:relative; overflow:hidden; }
.med-card .box-image img{
  width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#f3f4f6;
  transform:scale(1.001); transition:transform .4s ease;
}
.med-card:hover .box-image img{ transform:scale(1.03); }

/* Badge ngày (gọn) */
.med-card .med-date-badge{
  position:absolute; left:10px; top:10px;
  background:#fff; color:#0f172a; border:1px solid rgba(15,23,42,.08);
  border-radius:999px; padding:4px 9px; font-weight:700; font-size:12px;
  box-shadow:0 6px 16px rgba(2,8,23,.10);
}

/* Spotlight badge (góc phải) */
.med-card .med-spotlight{
  position:absolute; right:10px; top:10px; display:inline-flex; align-items:center; gap:6px;
  padding:4px 9px; border-radius:999px; font-size:12px; font-weight:700;
  background:linear-gradient(90deg,#ff7a18,#ff3d81); color:#fff; box-shadow:0 6px 16px rgba(2,8,23,.18);
}
.med-card .med-spotlight svg{ display:block; }

/* Nội dung – nhỏ gọn, sát ảnh (không khoảng trống) */
.med-card .box-text{ padding:10px 10px 12px; }

/* Status pill */
.med-status{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid #e5e7eb; background:#f8fafc; color:#0f172a; margin-bottom:8px;
}
.med-status .dot{ width:8px; height:8px; border-radius:50%; background:#94a3b8; }
.med-status.is-upcoming{ background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.25); color:#1e3a8a; }
.med-status.is-upcoming .dot{ background:#3b82f6; }
.med-status.is-live{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.28); color:#065f46; }
.med-status.is-live .dot{ background:#10b981; animation:pulse 1.5s infinite; }
.med-status.is-ended{ background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.30); color:#334155; }
.med-status.is-ended .dot{ background:#94a3b8; }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* Tiêu đề & meta compact */
.med-card .name{ font-size:16px; line-height:1.35; margin:0 0 6px; color:#0f172a; }
.med-card .name a{ color:inherit; text-decoration:none; }
.med-card:hover .name a{ text-decoration:underline; }
.med-card .med-meta{ font-size:13px; color:#475569; margin:4px 0 8px; }
.med-card .med-meta .med-row{ margin:2px 0; }

/* Nút nhỏ */
.med-card .med-actions .button{
  padding:6px 10px; font-size:12px; line-height:1; border-radius:999px;
  border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  transition:all .15s ease;
}
.med-card .med-actions .button:hover{ background:#0b0b0f; color:#fff; border-color:#0b0b0f; transform:translateY(-1px); }
.med-card .med-actions .button + .button{ margin-left:6px; }

/* Placeholder khi không có ảnh (đã có, giữ kích thước nhỏ) */
.med-thumb-fallback{ display:flex; align-items:center; justify-content:center; height:160px; letter-spacing:.18em; font-weight:700; background:#0f172a; color:#fff; }

/* Responsive tweaks */
@media (max-width:1024px){
  .med-card .name{ font-size:15px; }
  .med-card .med-meta{ font-size:12.5px; }
}
@media (max-width:640px){
  .med-card .box-text{ padding:10px 8px 12px; }
  .med-card .med-date-badge{ padding:4px 8px; font-size:11px; }
}
@media (prefers-color-scheme: dark){
  .med-card{ background:#0b0b0f; border-color:rgba(148,163,184,.20); box-shadow:0 8px 22px rgba(0,0,0,.35); }
  .med-card .name{ color:#e5e7eb; }
  .med-card .med-meta{ color:#94a3b8; }
  .med-card .med-actions .button{ background:#0f172a; color:#e5e7eb; border-color:#1f2937; }
  .med-card .med-actions .button:hover{ background:#111827; border-color:#3b82f6; }
  .med-card .med-date-badge{ background:#0f172a; color:#e5e7eb; border-color:#1f2937; }
}


/* ===== Messtori – Card compact v2 ===== */

/* Giảm tổng thể */
.med-card{
  border-radius:12px;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.med-card .box-image img{
  aspect-ratio:16/9;  /* giữ tỉ lệ nhưng thấp hơn vì padding ít */
  transform:none;
}
.med-card:hover .box-image img{ transform:scale(1.02); }

/* Badge ngày + Spotlight nhỏ hơn */
.med-card .med-date-badge{ padding:3px 8px; font-size:11px; }
.med-card .med-spotlight{ padding:3px 8px; font-size:11px; gap:5px; }

/* Nội dung sát ảnh, padding nhỏ */
.med-card .box-text{ padding:8px 10px 10px; }

/* Status pill gọn + đếm ngược monospaced */
.med-status{
  padding:4px 8px; margin-bottom:6px; font-size:11.5px;
}
.med-status .countdown{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:600; opacity:.95;
}

/* Tiêu đề & meta nhỏ hơn */
.med-card .name{ font-size:15px; margin:0 0 5px; }
.med-card .med-meta{ font-size:12.5px; margin:2px 0 8px; }
.med-card .med-meta .med-row{ margin:2px 0; }

/* Nút siêu gọn */
.med-card .med-actions .button{
  padding:5px 9px; font-size:11.5px; border-radius:999px;
}
.med-card .med-actions .button + .button{ margin-left:6px; }

/* Khoảng cách cột */
.med-event-discover.med-grid-only .col{ margin-bottom:16px; }

/* Mobile tweaks */
@media (max-width:640px){
  .med-card .box-text{ padding:8px 8px 10px; }
  .med-card .name{ font-size:14.5px; }
  .med-card .med-meta{ font-size:12px; }
  .med-card .med-date-badge{ font-size:10.5px; padding:3px 7px; }
}

/* Dark-friendly giữ như cũ (tuỳ chọn) */


.med-event .med-sponsor{
  position:absolute; right:10px; top:12px;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.72); color:#fff; padding:6px 10px;
  border-radius:999px; font-size:12px; font-weight:600;
  backdrop-filter: blur(4px);
}
.med-event .med-sponsor svg{ opacity:.95 }
/* Nếu muốn ưu tiên Sponsor so với Spotlight, có thể đẩy z-index cao hơn */
.med-event .med-sponsor{ z-index:3 }
.med-event .med-spotlight{ z-index:2 }



/* ---- Share event (chỉ áp dụng trong popup) ---- */
#med-event-modal .med-share-wrap{
  margin-top: 14px;                 /* tách nhẹ khỏi khung info */
  display: flex;
  align-items: center;
}

#med-event-modal .med-share-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;              /* pill */
  border: 1px solid #e5e7eb;        /* xám nhạt */
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 2px 10px rgba(59,130,246,.05);
}

#med-event-modal .med-share-btn .med-share-ico{
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef2ff;              /* tím rất nhạt */
  color: #4f46e5;                    /* tím web3 */
  line-height: 1;
  font-size: 14px;
}

#med-event-modal .med-share-btn:hover{
  transform: translateY(-1px);
  border-color: #c7d2fe;
  box-shadow: 0 8px 20px rgba(99,102,241,.15);
}

#med-event-modal .med-share-btn:active{
  transform: translateY(0);
}

/* trạng thái sau khi copy thành công (JS sẽ thêm class .copied) */
#med-event-modal .med-share-btn.copied{
  background: #ecfdf5;              /* xanh mint nhạt */
  border-color: #34d399;
  color: #065f46;
}

#med-event-modal .med-share-btn.copied .med-share-ico{
  background: #d1fae5;
  color: #059669;
}



/* ===== FIX iOS: prevent prefers-color-scheme dark from breaking light UI on mobile ===== */
@media (max-width: 860px){
  /* Force cards to light palette on mobile */
  .med-event.box,
  .med-card{
    background:#fff !important;
    border-color: rgba(140,160,255,.22) !important;
  }
  .med-event .name,
  .med-card .name{ color:#0f172a !important; }
  .med-event .med-meta,
  .med-card .med-meta{ color:#475569 !important; }

  .med-date-badge,
  .med-card .med-date-badge{
    background:#fff !important;
    color:#0f172a !important;
    border-color: rgba(15,23,42,.08) !important;
  }

  .med-event .med-actions .button,
  .med-card .med-actions .button{
    background:#fff !important;
    color:#0f172a !important;
    border-color:#e2e8f0 !important;
  }
}


/* =========================================================
   HARD FIX (Mobile): Force LIGHT UI for Event Discover cards
   - Stops iOS prefers-color-scheme:dark from flipping colors
   - Scoped to Event Discover only
   ========================================================= */
@media (max-width: 1024px){

  /* 1) Force ALL text inside event grid to dark text */
  .med-event-discover,
  .med-event-discover *{
    color: inherit !important;
  }

  /* 2) Force card shells to white */
  .med-event-discover .med-event.box,
  .med-event-discover .med-card{
    background: #ffffff !important;
    color: rgba(15,23,42,.95) !important;
    border-color: rgba(140,160,255,.22) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
  }

  /* 3) Titles + meta */
  .med-event-discover .med-event .name,
  .med-event-discover .med-card .name,
  .med-event-discover .med-event .name a,
  .med-event-discover .med-card .name a{
    color: #0f172a !important;
  }
  .med-event-discover .med-event .med-meta,
  .med-event-discover .med-card .med-meta,
  .med-event-discover .med-event .med-meta *,
  .med-event-discover .med-card .med-meta *{
    color: #475569 !important;
  }

  /* 4) Date badge */
  .med-event-discover .med-date-badge,
  .med-event-discover .med-card .med-date-badge{
    background:#ffffff !important;
    color:#0f172a !important;
    border-color: rgba(15,23,42,.08) !important;
  }

  /* 5) Buttons */
  .med-event-discover .med-actions .button,
  .med-event-discover .med-actions .button.outline,
  .med-event-discover .med-card .med-actions .button{
    background:#ffffff !important;
    color:#0f172a !important;
    border-color:#e2e8f0 !important;
  }

  /* 6) Any accidental dark backgrounds on text blocks */
  .med-event-discover .box-text,
  .med-event-discover .med-event .box-text,
  .med-event-discover .med-card .box-text{
    background: transparent !important;
  }
}