/* =========================================================
   Design tokens — RMIT-inspired: navy + red, soft shadows,
   pill-shaped inputs/buttons
   ========================================================= */
:root{
  --red:#C8102E;
  --red-dark:#9E0C24;
  --red-soft:rgba(200,16,46,0.08);
  --navy-900:#0A1330;
  --navy-800:#10193B;
  --navy-700:#172353;
  --ink:#1F2430;
  --ink-soft:#5B6270;
  --bg:#F4F5F7;
  --panel:#FFFFFF;
  --border:#E3E5EA;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(10,19,48,.06);
  --shadow-md:0 12px 32px rgba(10,19,48,.10);
  --ease:all .25s ease;
}

body{
  font-size:16px !important;
  color:var(--ink);
  background:var(--bg);
  font-family:"Roboto",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif !important;
  min-width:980px;
  line-height:1.6
}
a{color:var(--navy-700);transition:var(--ease)}
a:hover{color:var(--red);text-decoration:none !important}
.color-1{color:var(--red)}
.color-2{color:var(--red-dark)}
.color-3{color:var(--navy-700)}
.w190{width:190px}
.w520{width:520px}

/* Layout */
html, body, #wrapper{height:100%;margin:0;padding:0;border:none}
.wrap{width:980px;margin:0 auto}

.top-main{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));box-shadow:var(--shadow-sm)}

.footer-main{background:var(--navy-900);border-top:none}
.footer-main p{text-align:center;color:rgba(255,255,255,.85);padding:18px 0;line-height:22px;font-size:13px;letter-spacing:.3px}

.content-main{background:var(--panel);margin:0 auto 40px;width:980px;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-md);overflow:hidden}

/* Header / logo */
.logo{height:74px;position:relative}
.logo h1{position:absolute;left:14px;top:9px}
.logo h1 a{
  height:65px;
  background:url(../Images/dongnaiLogo.png) no-repeat left center;
  background-size:54px 54px;
  display:block;
  padding:6px 0 0 68px;
  font-family:"Roboto",sans-serif;
  font-weight:700;
  font-size:19px;
  line-height:23px;
  color:#fff;
  letter-spacing:.2px
}
.logo h1 a span{
  display:block;
  font-size:13px;
  font-weight:400;
  color:rgba(255,255,255,.72);
  margin-top:4px
}

/* Nav bar (light, RMIT style — used elsewhere on the site) */
.navigation{height:auto;border-top:1px solid var(--border);background:var(--panel)}
.navigation ul{float:left}
.navigation ul li{display:inline;float:left}
.navigation ul li a{
  padding:14px 26px;
  border-right:1px solid var(--border);
  float:left;
  font-size:14px;
  font-weight:600;
  color:var(--navy-800)
}
.navigation ul li a:hover{background:var(--red-soft);color:var(--red)}
.nav-active{background:var(--red) !important;color:#fff !important;border-radius:var(--radius-pill)}

.user-info{float:right;color:var(--ink-soft)}
.user-info p{padding:14px 10px 0 0;font-size:13px}
.user-info p a{color:var(--ink-soft)}
.user-info p a:hover{color:var(--red)}

/* Form */
.form-reg{padding:36px 20px;position:relative}
.form-reg ul{width:640px;margin:0 auto}
.form-reg label{font-weight:600;font-size:14px;display:inline-block;color:var(--ink-soft);width:150px}
.form-reg span{display:inline-block}
.form-reg li{padding:10px 0}

.big-tittle{color:var(--navy-800);font-weight:700;font-size:24px}

.e-input{
  border:1px solid var(--border);
  padding:10px 16px;
  height:20px;
  color:var(--ink);
  font-size:14px;
  width:300px;
  border-radius:var(--radius-pill);
  background:var(--bg);
  transition:var(--ease)
}
.e-input:focus{
  border-color:var(--red);
  background:#fff;
  box-shadow:0 0 0 4px var(--red-soft);
  outline:none
}

.tab{background:url(../Images/tab.png) no-repeat left 25px}
.e-comment{padding-top:0 !important;font-size:12px;font-style:italic;color:var(--ink-soft)}
.form-reg-2{padding:35px;width:1070px}

.e-btn{
  background:var(--red);
  color:#fff;
  text-align:center;
  padding:12px 34px;
  border:0;
  cursor:pointer;
  font-weight:700;
  display:inline-block;
  font-family:"Roboto",sans-serif;
  font-size:15px;
  border-radius:var(--radius-pill);
  letter-spacing:.3px;
  box-shadow:0 8px 20px rgba(200,16,46,.28);
  transition:var(--ease)
}
.e-btn:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(200,16,46,.35)}
.e-btn:active{transform:translateY(0)}
.e-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}

.preview{padding-left:10px;font-size:14px;color:var(--ink-soft)}
.rule{border-top:1px solid var(--border);padding:20px 0;width:100%}

/* Question / result list */
.q-list{}
.q-list li:first-child{position:relative;padding-top:8px}
.q-list li:first-child::before{
  content:"";
  display:block;
  width:40px;
  height:4px;
  background:var(--red);
  border-radius:2px;
  margin:0 auto 14px
}
.q-list h2{text-transform:uppercase;font-size:19px;font-weight:700;padding-bottom:10px;line-height:28px;color:var(--navy-800);letter-spacing:.3px}
.q-list table p{padding-bottom:10px}
.q-list label{width:150px}
.q-info{margin:24px 0;font-size:16px;color:var(--ink-soft);text-align:center}