:root{
      --green-600:#16a34a; /* primary */
      --green-700:#15803d;
      --white:#fff;
      --border:#16a34a;
      --shadow:0 8px 24px rgba(22,163,74,.15);
      --bg:#ffffff;
      --muted:#334155;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,"Noto Sans",sans-serif;color:#0a0a0a;background:var(--bg)}
    a{color:inherit;text-decoration:none}

    /* Navbar */
    .navbar{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:2px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,.04)}
    .container{max-width:1200px;margin:0 auto;padding:.75rem 1rem;display:flex;align-items:center;gap:1rem}
    .brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.25rem;color:var(--green-700)}
    .brand svg{width:28px;height:28px;color:var(--green-600)}
    .nav-links{margin-left:auto;display:flex;gap:.5rem}
    .nav-links a{padding:.5rem .75rem;border:1.5px solid var(--border);border-radius:9999px;color:var(--green-700);transition:background .2s,color .2s,transform .12s}
    .nav-links a:hover{background:var(--green-600);color:var(--white);transform:translateY(-1px)}

    /* Layout */
    .layout {
      display:grid;
      grid-template-columns:260px 1fr 260px;
      gap:1rem;
      max-width:100%;
      margin:1rem auto;
      padding:0;
    }
    .sidebar{background:var(--green-600);color:var(--white);border-radius:0px;padding:1rem;position:sticky;top:84px;height:fit-content;box-shadow:var(--shadow)}
    .sidebar h3{margin:.25rem 0 .5rem}
    .sidebar p,.sidebar li{color:#f8fafc;opacity:.95;line-height:1.5}
    .sidebar ul{padding-left:1rem;margin:.5rem 0}

    .main{background:var(--white);border:2px solid var(--border);border-radius:0px;padding:1rem;box-shadow:var(--shadow);min-height:60vh}
    .controls{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
    input[type="search"]{flex:1 1 280px;padding:.6rem .8rem;border:2px solid var(--border);border-radius:12px;outline:none}
    select{padding:.6rem .8rem;border:2px solid var(--border);border-radius:12px;background:var(--white)}

    .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
    .card{border:2px solid var(--border);border-radius:16px;padding:.85rem;transition:transform .12s ease,box-shadow .12s ease}
    .card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
    .card h4{margin:.25rem 0 .5rem;color:var(--green-700)}
    .meta{font-size:.9rem;opacity:.85;display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
    .btn{display:inline-block;padding:.5rem .8rem;border-radius:10px;background:var(--green-600);color:var(--white)}

    footer{text-align:center;padding:2rem 0;color:var(--green-700);border-top:2px solid var(--border);background:var(--white)}

    /* Scroll-to-top with progress ring */
    .scroll-top{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;border:none;background:conic-gradient(var(--green-600) 0deg 0deg,#e5e7eb 0deg 360deg);display:grid;place-content:center;color:var(--white);font-weight:700;cursor:pointer;box-shadow:var(--shadow);outline-offset:3px}
    .scroll-top .inner{width:46px;height:46px;border-radius:50%;background:var(--green-600);display:grid;place-content:center}
    .scroll-top[hidden]{display:none}

    @media (max-width:1100px){
      .layout{grid-template-columns:1fr}
      .sidebar{position:relative;top:0}
      .grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:640px){
      .grid{grid-template-columns:1fr}
    }
    /* Xem full trên Mobile */
@media (max-width: 640px) {
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  .layout {
    max-width: 100%;
    margin: 0;       /* bỏ margin auto */
    padding: 0;      /* bỏ padding 1rem */
  }
}
/* Xóa dấu chấm UL */
#fabMenu,
#fabMenu li {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
/* Căn câu hỏi đúng/sai sang trái, đáp án sang phải */
.tf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20px; /* giữ khoảng cách như cũ */
}

.tf-text {
  flex: 1;
}

.tf-answers {
  display: flex;
  gap: 20px;
}

.tf-answers label {
  display: flex;
  align-items: center;
  gap: 5px;
}
/* In đậm khi chọn câu hỏi */
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin: 4px 0;
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.choice-letter {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: var(--green-600);
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
}

.choice input[type="radio"]:checked + .choice-letter {
  background: var(--green-700);
}

.choice-text {
  flex: 1;
}
/* Nút nộp bài */
#submitBtn{
  display:block;
  margin:16px auto;
}
  .viettay {
    text-align: center;
    font-weight: normal;
    font-family: 'Pacifico', cursive;
    font-size: 28px;
    margin: 15px 0;
}
 /* đang chọn: xanh lá nhạt */
  .choice.selected{
    background:#85c685;
    border-color:#2e7d32 !important;
    transition:background .15s, border-color .15s, color .15s;
  }
  /* nộp bài: đúng = xanh lá đậm */
  .choice.correct{
    background:#42b548;
    color:#fff;
    border-color:#2e7d32 !important;
  }
  .choice.correct .choice-letter{ color:#fff; }
  /* nộp bài: sai = đỏ nhạt */
  .choice.wrong{
    background:#ffecec;
    border-color:#d6312e !important;
  }
  .choice.correct-soft{
    background:#aae5aa;
    border-color:#2e7d32!important;
  }