/* ==== Quiz base ==== */
#disc-quiz-root {
    min-height: 300px;
}

/* Font: nếu bạn muốn Be Vietnam Pro thì enqueue ở PHP (mục dưới) */
#disc-quiz-root { font-family: "Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }


/* Scrollbar */
#disc-quiz-root .custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

#disc-quiz-root .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#disc-quiz-root .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* “3D shadows” */
#disc-quiz-root .shadow-3d {
    box-shadow: 0 4px 0 #1e40af;
}

#disc-quiz-root .shadow-3d-sm {
    box-shadow: 0 2px 0 #cbd5e1;
}

#disc-quiz-root .shadow-3d-lg {
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
}

#disc-quiz-root .shadow-3d-orange {
    box-shadow: 0 4px 0 #c2410c;
}

/* Orange submit button */
#disc-quiz-root .btn-submit-orange {
    background-color: #f97316 !important;
    border-color: #c2410c !important;
    color: #fff !important;
}

#disc-quiz-root .btn-submit-orange:hover {
    background-color: #ea580c !important;
}
/* Ô đáp án nổi bật hơn */
#disc-quiz-root .dq-option{
  border: 2px solid #e5e7eb; /* viền rõ hơn */
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); /* nổi bật */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#disc-quiz-root .dq-option:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
  border-color: #cbd5e1;
}
#disc-quiz-root .dq-option:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

/* Ô đáp án khi chọn */
#disc-quiz-root .dq-option.is-selected{
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 14px 34px rgba(59, 130, 246, 0.22);
}
#disc-quiz-root .dq-option{
  border: 2px solid #e5e7eb !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
#disc-quiz-root .dq-option:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14) !important;
  border-color: #cbd5e1 !important;
}
#disc-quiz-root .dq-option.is-selected{
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.22) !important;
}
/* ====== LAYOUT: rộng hơn PC + Mobile, thấp hơn chút ====== */
#disc-quiz-root .dq-container{
  width: min(1320px, calc(100vw - 28px));
  margin: 14px auto;
}
@media (max-width: 768px){
  #disc-quiz-root .dq-container{
    width: calc(100vw - 16px);
    margin: 10px auto;
  }
}

/* ====== CARD: mềm & sang hơn (giống hình 2) ====== */
#disc-quiz-root .dq-card{
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.05);
}
#disc-quiz-root .dq-card-main{
  min-height: 440px;              /* giảm chiều cao so với 500 */
}
@media (max-width: 768px){
  #disc-quiz-root .dq-card-main{
    min-height: 380px;            /* mobile thấp hơn */
  }
}
#disc-quiz-root .dq-card-side{
  padding: 16px;
  max-height: calc(100vh - 1.2rem);
  overflow: auto;
}

/* ====== Question head: bỏ badge cam, đẹp như hình 2 ====== */
#disc-quiz-root .dq-qhead{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 18px;
}
#disc-quiz-root .dq-qindex{
  background: #eef2ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
#disc-quiz-root .dq-qtext{
  font-size: 1.25rem; /* ~ text-xl */
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
}
@media (min-width: 768px){
  #disc-quiz-root .dq-qtext{ font-size: 1.5rem; } /* ~ text-2xl */
}

/* ====== OPTION: ô đáp án mềm, nổi, chọn nhìn sang ====== */
#disc-quiz-root .dq-option{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid #e6e8ef;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
#disc-quiz-root .dq-option:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
  border-color: #d7dbe6;
}
#disc-quiz-root .dq-option.is-selected{
  background: #f0f7ff;
  border-color: #3b82f6;
  box-shadow: 0 18px 40px rgba(59, 130, 246, 0.18);
}

/* ====== NÚT: mềm, hiện đại (giảm cảm giác "thô") ====== */
#disc-quiz-root button{
  border-radius: 12px !important;
}
#disc-quiz-root .btn-submit-orange{
  background: linear-gradient(180deg, #ff8a2a, #f97316) !important;
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.28) !important;
  border: 1px solid rgba(234, 88, 12, 0.35) !important;
}
#disc-quiz-root .btn-submit-orange:hover{
  filter: brightness(0.98);
}

/* ===== FIX OVERFLOW RIGHT ===== */
#disc-quiz-root{
  overflow-x: hidden;       /* chặn tràn */
}

#disc-quiz-root .dq-container{
  max-width: 100%;
  overflow-x: hidden;       /* chặn tràn ở wrapper */
}

/* flex con không bị “phình” gây tràn */
#disc-quiz-root .dq-container *{
  box-sizing: border-box;
}
#disc-quiz-root .dq-container .min-w-0{
  min-width: 0 !important;
}
/* BỎ THANH SCROLL Ở SIDEBAR (cột phải) */
#disc-quiz-root .dq-card-side{
  overflow: visible !important;
  max-height: none !important;
}

/* Nếu vẫn còn do phần grid danh sách câu hỏi */
#disc-quiz-root .dq-card-side .custom-scrollbar{
  overflow: visible !important;
  max-height: none !important;
}

/* ===== OPTION: HOVER CAM + SELECTED CAM ===== */

/* Hover: nền cam nhạt + viền cam + chữ đậm hơn nhẹ */
#disc-quiz-root .dq-option:hover{
  background: #fff7ed !important;            /* cam nhạt */
  border-color: #fb923c !important;          /* cam */
  box-shadow: 0 16px 34px rgba(249,115,22,0.18) !important;
}

/* Selected: nền cam nhạt hơn + viền cam đậm */
#disc-quiz-root .dq-option.is-selected{
  background: #fff3e6 !important;
  border-color: #f97316 !important;
  box-shadow: 0 18px 40px rgba(249,115,22,0.22) !important;
}

/* Nếu bạn đang có rule cũ is-selected màu xanh => chặn lại */
#disc-quiz-root .dq-option.is-selected{
  /* override xanh */
  outline: none !important;
}
/* ===== MOBILE: 2 nút cùng 1 dòng + xem lại sau ở giữa ===== */
@media (max-width: 640px){

  /* Nới khung quiz trên mobile (tăng bề ngang) */
  #disc-quiz-root .dq-container{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #disc-quiz-root .dq-card-main{
    border-radius: 18px !important;
  }

  /* Hàng chứa 3 nút dưới cùng (Quay lại / Xem lại / Câu tiếp) */
  #disc-quiz-root .dq-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;  /* 2 cột */
    gap: 12px !important;
    align-items: center !important;
  }

  /* Quay lại + Câu tiếp cùng 1 hàng */
  #disc-quiz-root .dq-btn-prev{
    width: 100% !important;
    order: 1;
  }
  #disc-quiz-root .dq-btn-next{
    width: 100% !important;
    order: 2;
  }

  /* Xem lại sau xuống dòng, ở giữa */
  #disc-quiz-root .dq-btn-mark{
    grid-column: 1 / -1 !important;   /* chiếm 2 cột */
    width: 100% !important;
    justify-content: center !important;
    order: 3;

    /* Khung rõ ràng hơn */
    border: 2px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15,23,42,0.10) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
  }

  /* Làm 2 nút dễ phân biệt */
  #disc-quiz-root .dq-btn-prev{
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
  }
  #disc-quiz-root .dq-btn-next{
    background: #2563eb !important;
    color: #fff !important;
    border-color: #1e40af !important;
  }
}
/* ===========================
   QUIZ LIST CARDS (SQ)
=========================== */
.sq-wrap{
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 10px;
}

.sq-head{
  margin-bottom: 14px;
}
.sq-title{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px 0;
  letter-spacing: .2px;
}
.sq-desc{
  color: #64748b;
  font-size: 14px;
}

.sq-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* Card */
.sq-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none !important;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

.sq-card:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 15%, rgba(59,130,246,.16), transparent 55%),
              radial-gradient(circle at 85% 0%, rgba(249,115,22,.18), transparent 55%);
  pointer-events:none;
}

.sq-card:hover{
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 16px 40px rgba(15,23,42,0.10);
}

/* top */
.sq-top{
  position: relative;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.sq-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  font-size: 18px;
}

.sq-badges{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sq-badge{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0f172a;
  line-height: 1;
}

.sq-badge-level{
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}
.sq-badge-time{
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

/* body */
.sq-body{
  position: relative;
  padding-top: 2px;
}
.sq-name{
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 8px;
}

.sq-meta{
  display:flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #475569;
}
.sq-meta-item{
  display:flex;
  align-items:center;
  gap: 8px;
}
.sq-meta-item b{
  color: #0f172a;
  font-weight: 900;
}
.sq-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

/* foot */
.sq-foot{
  position: relative;
  margin-top: auto;
  display:flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}

.sq-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #fff;
  border: 1px solid rgba(30,64,175,.25);
  box-shadow: 0 10px 18px rgba(37,99,235,.22);
}

.sq-card:hover .sq-btn{
  filter: brightness(1.03);
}

/* empty */
.sq-empty{
  grid-column: 1 / -1;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 16px;
  color: #475569;
  text-align: center;
}

/* Mobile tối ưu */
@media (max-width: 640px){
  .sq-grid{ gap: 10px; }
  .sq-card{ border-radius: 14px; padding: 12px; }
  .sq-name{ font-size: 15px; }
}
/* =========================
   QUIZ LIST STYLE (ẢNH 2)
========================= */
.sq2-wrap{
  max-width: 1240px;
  margin: 18px auto;
  padding: 0 12px;
}

/* Khối bọc đẹp */
.sq2-hero{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
  margin-bottom: 16px;
}
.sq2-title{
  margin: 0 0 6px 0;
  font-size: 28px;
  font-weight: 900;
  color: #0f172a;
}
.sq2-desc{
  margin: 0;
  font-size: 15px;
  color: #475569;
}

/* Grid card */
.sq2-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1100px){
  .sq2-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .sq2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .sq2-grid{ grid-template-columns: 1fr; }
}

/* Card */
.sq2-card{
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow: hidden;
}
.sq2-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
  border-color: #d1d5db;
}

.sq2-link{
  position:absolute;
  inset:0;
  z-index: 1;
}

/* Top */
.sq2-top{ position: relative; z-index: 2; }
.sq2-name{
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.35;
  min-height: 44px; /* giữ đều card */
}

.sq2-subject{
  font-size: 14px;
  color: #64748b;
  margin-bottom: 10px;
}

/* Info row */
.sq2-info{
  position: relative;
  z-index: 2;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.sq2-pill{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 14px;
  color: #475569;
}
.sq2-pill-right{
  justify-content: flex-end;
}
.sq2-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 12px;
}

/* Bottom */
.sq2-bottom{
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

/* Rating */
.sq2-rating{ display:flex; flex-direction: column; gap: 6px; }
.sq2-stars{ display:flex; gap: 2px; line-height: 1; }
.sq2-star{
  font-size: 14px;
  color: #cbd5e1; /* sao rỗng */
}
.sq2-star.is-full{
  color: #f59e0b; /* vàng */
}
.sq2-small{
  font-size: 13px;
  color: #64748b;
}
.sq2-small b{
  color: #0f172a;
  font-weight: 900;
}
.sq2-dot{ margin: 0 6px; }

/* Button giống ảnh 2 */
.sq2-btn{
  position: relative;
  z-index: 2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 120px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 900;
  font-size: 14px;
  color: #fff !important;
  background: #22c55e;
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.22);
  transition: filter .15s ease, transform .15s ease;
}
.sq2-btn:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* Empty */
.sq2-empty{
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 16px;
  color: #64748b;
  text-align:center;
}
// CSS cho list đề thi (in trực tiếp, chắc chắn ăn)
add_action('wp_head', function () {
    global $post;
    if (!$post || !is_a($post, 'WP_Post')) return;

    if (has_shortcode($post->post_content, 'quiz_list')) {
        ?>
        <style>
        /* =========================
           QUIZ LIST STYLE (ẢNH 2)
        ========================= */
        .sq2-wrap{
          max-width: 1240px;
          margin: 18px auto;
          padding: 0 12px;
        }

        /* Khối bọc đẹp */
        .sq2-hero{
          background: #ffffff;
          border: 1px solid #e5e7eb;
          border-radius: 18px;
          padding: 18px 18px;
          box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
          margin-bottom: 16px;
        }
        .sq2-title{
          margin: 0 0 6px 0;
          font-size: 28px;
          font-weight: 900;
          color: #0f172a;
        }
        .sq2-desc{
          margin: 0;
          font-size: 15px;
          color: #475569;
        }

        /* Grid card */
        .sq2-grid{
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 16px;
        }

        @media (max-width: 1100px){
          .sq2-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (max-width: 820px){
          .sq2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 520px){
          .sq2-grid{ grid-template-columns: 1fr; }
        }

        /* Card */
        .sq2-card{
          position: relative;
          background: #fff;
          border: 1px solid #e5e7eb;
          border-radius: 18px;
          padding: 16px 16px 14px;
          box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
          transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
          overflow: hidden;
        }
        .sq2-card:hover{
          transform: translateY(-2px);
          box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
          border-color: #d1d5db;
        }

        .sq2-link{
          position:absolute;
          inset:0;
          z-index: 1;
        }

        /* Top */
        .sq2-top{ position: relative; z-index: 2; }
        .sq2-name{
          margin: 0 0 10px 0;
          font-size: 16px;
          font-weight: 900;
          color: #0f172a;
          line-height: 1.35;
          min-height: 44px;
        }

        .sq2-subject{
          font-size: 14px;
          color: #64748b;
          margin-bottom: 10px;
        }

        /* Info row */
        .sq2-info{
          position: relative;
          z-index: 2;
          display:flex;
          justify-content: space-between;
          gap: 10px;
          margin-top: 4px;
        }

        .sq2-pill{
          display:flex;
          align-items:center;
          gap: 8px;
          font-size: 14px;
          color: #475569;
        }
        .sq2-pill-right{
          justify-content: flex-end;
        }
        .sq2-ico{
          width: 18px;
          height: 18px;
          display:inline-flex;
          align-items:center;
          justify-content:center;
          border-radius: 999px;
          background: #f1f5f9;
          font-size: 12px;
        }

        /* Bottom */
        .sq2-bottom{
          position: relative;
          z-index: 2;
          margin-top: 14px;
          display:flex;
          align-items:center;
          justify-content: space-between;
          gap: 12px;
        }

        /* Rating */
        .sq2-rating{ display:flex; flex-direction: column; gap: 6px; }
        .sq2-stars{ display:flex; gap: 2px; line-height: 1; }
        .sq2-star{
          font-size: 14px;
          color: #cbd5e1;
        }
        .sq2-star.is-full{
          color: #f59e0b;
        }
        .sq2-small{
          font-size: 13px;
          color: #64748b;
        }
        .sq2-small b{
          color: #0f172a;
          font-weight: 900;
        }
        .sq2-dot{ margin: 0 6px; }

        /* Button */
        .sq2-btn{
          position: relative;
          z-index: 2;
          display:inline-flex;
          align-items:center;
          justify-content:center;
          min-width: 120px;
          padding: 12px 14px;
          border-radius: 12px;
          text-decoration: none !important;
          font-weight: 900;
          font-size: 14px;
          color: #fff !important;
          background: #22c55e;
          box-shadow: 0 10px 22px rgba(34, 197, 94, 0.22);
          transition: filter .15s ease, transform .15s ease;
        }
        .sq2-btn:hover{
          filter: brightness(0.98);
          transform: translateY(-1px);
        }

        .sq2-empty{
          background: #fff;
          border: 1px dashed #cbd5e1;
          border-radius: 14px;
          padding: 16px;
          color: #64748b;
          text-align:center;
        }
        </style>
        <?php
    }
}, 99);
/* === Dropdown + Search cực gọn cho 100 môn === */
.sqh-picker{
  display:flex;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}

.sqh-search{
  flex:1;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background:#fff;
  font-weight:700;
  outline:none;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.sqh-search:focus{
  border-color:#ff6a00;
  box-shadow: 0 14px 28px rgba(255,106,0,.14);
}

.sqh-select{
  min-width: 260px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background:#fff;
  font-weight:800;
  outline:none;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.sqh-select:focus{
  border-color:#1d4ed8;
  box-shadow: 0 14px 28px rgba(29,78,216,.12);
}