/*
 * TCCIT ISOLATED PAGE COMMON THEME
 * IMPORTANT:
 * - Does NOT style header.php selectors.
 * - Does NOT style ff.php/footer selectors.
 * - No global *, body, a, p, h1, h2, h3, ul, li, button selectors.
 * - All selectors are namespaced under .tccit-page-root or .tccit-page-*
 */

/* Page shell */
.tccit-page-root {
  --tccit-page-brown: #5a351f;
  --tccit-page-brown-dark: #3e2415;
  --tccit-page-gold: #c58a32;
  --tccit-page-gold-light: #e4bd73;
  --tccit-page-cream: #fbf5e8;
  --tccit-page-paper: #ffffff;
  --tccit-page-text: #3f3a35;
  --tccit-page-muted: #756e65;
  --tccit-page-border: #eadfce;
  --tccit-page-shadow: 0 8px 24px rgba(70, 42, 20, .09);

  display: block;
  width: 100%;
  color: var(--tccit-page-text);
  background: var(--tccit-page-cream);
}

.tccit-page-root *,
.tccit-page-root *::before,
.tccit-page-root *::after {
  box-sizing: border-box;
}

.tccit-page-wrap {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 50px;
}

.tccit-page-section {
  margin: 0 0 26px;
}

.tccit-page-panel {
  background: var(--tccit-page-paper);
  border: 1px solid var(--tccit-page-border);
  border-radius: 12px;
  padding: 30px;
  box-shadow: var(--tccit-page-shadow);
}

.tccit-page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(62,36,21,.94), rgba(90,53,31,.82)),
    url("../img/new_campus.jpg") center/cover no-repeat;
  color: #fff;
  padding: 54px 20px;
  text-align: center;
}

.tccit-page-head-inner {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.tccit-page-head-title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 800;
}

.tccit-page-head-text {
  margin: 10px 0 0;
  color: rgba(255,255,255,.9);
  font-size: 15px;
  line-height: 1.7;
}

.tccit-page-title {
  margin: 0 0 16px;
  color: var(--tccit-page-brown);
  font-size: 26px;
  line-height: 1.3;
  font-weight: 800;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tccit-page-gold-light);
}

.tccit-page-subtitle {
  margin: 0 0 12px;
  color: var(--tccit-page-brown);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

.tccit-page-text {
  margin: 0 0 12px;
  color: var(--tccit-page-text);
  line-height: 1.8;
  font-size: 15px;
}

.tccit-page-muted {
  color: var(--tccit-page-muted);
}

.tccit-page-list {
  margin: 0;
  padding: 0 0 0 22px;
  color: var(--tccit-page-text);
}

.tccit-page-list li {
  margin: 0 0 8px;
  line-height: 1.7;
}

.tccit-page-grid {
  display: grid;
  gap: 20px;
}

.tccit-page-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tccit-page-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tccit-page-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tccit-page-card {
  background: #fff;
  border: 1px solid var(--tccit-page-border);
  border-top: 4px solid var(--tccit-page-gold);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 5px 18px rgba(70,42,20,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.tccit-page-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(70,42,20,.10);
}

.tccit-page-card-title {
  margin: 0 0 8px;
  color: var(--tccit-page-brown);
  font-size: 18px;
  font-weight: 700;
}

.tccit-page-card-text {
  margin: 0;
  color: var(--tccit-page-muted);
  line-height: 1.7;
}

.tccit-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--tccit-page-brown);
  border-radius: 5px;
  background: var(--tccit-page-brown);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.tccit-page-btn:hover {
  background: var(--tccit-page-brown-dark);
  color: #fff;
  transform: translateY(-1px);
}

.tccit-page-btn-gold {
  border-color: var(--tccit-page-gold);
  background: var(--tccit-page-gold);
  color: #fff;
}

.tccit-page-btn-gold:hover {
  background: #a96f20;
  color: #fff;
}

.tccit-page-center {
  text-align: center;
}

.tccit-page-contact {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-left: 4px solid var(--tccit-page-gold);
  background: #fffaf0;
  border-radius: 5px;
}

.tccit-page-contact-row {
  line-height: 1.7;
}

.tccit-page-notice {
  padding: 14px 16px;
  margin: 0 0 10px;
  border-left: 4px solid var(--tccit-page-gold);
  background: #fffaf0;
  border-radius: 4px;
}

.tccit-page-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--tccit-page-border);
  border-radius: 8px;
  background: #fff;
}

.tccit-page-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.tccit-page-table th,
.tccit-page-table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--tccit-page-border);
  text-align: left;
  line-height: 1.5;
}

.tccit-page-table th {
  background: var(--tccit-page-brown);
  color: #fff;
  font-weight: 700;
}

.tccit-page-table tr:last-child td {
  border-bottom: 0;
}

.tccit-page-form {
  display: grid;
  gap: 16px;
}

.tccit-page-field {
  display: grid;
  gap: 7px;
}

.tccit-page-field-label {
  color: var(--tccit-page-brown);
  font-weight: 700;
}

.tccit-page-field input,
.tccit-page-field select,
.tccit-page-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d9cdbb;
  border-radius: 5px;
  background: #fff;
  color: var(--tccit-page-text);
  font: inherit;
  outline: none;
}

.tccit-page-field input:focus,
.tccit-page-field select:focus,
.tccit-page-field textarea:focus {
  border-color: var(--tccit-page-gold);
  box-shadow: 0 0 0 3px rgba(197,138,50,.12);
}

.tccit-page-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tccit-page-gallery-item {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--tccit-page-border);
  background: #fff;
}

.tccit-page-gallery-item img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .35s ease;
}

.tccit-page-gallery-item:hover img {
  transform: scale(1.04);
}

.tccit-page-profile {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.tccit-page-profile-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  border: 4px solid #f0dfc2;
}

.tccit-page-alert {
  padding: 13px 16px;
  border-radius: 5px;
  margin: 0 0 16px;
}

.tccit-page-alert-success {
  background: #edf8ef;
  border: 1px solid #b9ddbf;
  color: #286438;
}

.tccit-page-alert-error {
  background: #fff0ef;
  border: 1px solid #e4b7b3;
  color: #8a3029;
}

.tccit-page-breadcrumb {
  margin: 0 0 18px;
  color: var(--tccit-page-muted);
  font-size: 14px;
}

.tccit-page-breadcrumb a {
  color: var(--tccit-page-brown);
  text-decoration: none;
}

.tccit-page-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tccit-page-stat {
  padding: 20px;
  text-align: center;
  border: 1px solid var(--tccit-page-border);
  border-radius: 8px;
  background: #fff;
}

.tccit-page-stat-number {
  display: block;
  color: var(--tccit-page-brown);
  font-size: 28px;
  font-weight: 800;
}

.tccit-page-stat-label {
  display: block;
  margin-top: 4px;
  color: var(--tccit-page-muted);
  font-size: 13px;
}

.tccit-page-quote {
  padding: 20px 22px;
  border-left: 4px solid var(--tccit-page-gold);
  background: #fffaf0;
  color: var(--tccit-page-text);
  line-height: 1.8;
}

.tccit-page-spacer {
  height: 10px;
}

.tccit-page-backtop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--tccit-page-brown);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
}

.tccit-page-backtop.is-visible {
  display: flex;
}

@media (max-width: 900px) {
  .tccit-page-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tccit-page-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tccit-page-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tccit-page-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .tccit-page-wrap {
    width: min(100% - 20px, 1120px);
    padding-top: 22px;
  }

  .tccit-page-panel {
    padding: 20px;
    border-radius: 8px;
  }

  .tccit-page-head {
    padding: 38px 14px;
  }

  .tccit-page-grid-2,
  .tccit-page-grid-3,
  .tccit-page-grid-4,
  .tccit-page-gallery,
  .tccit-page-stats {
    grid-template-columns: 1fr;
  }

  .tccit-page-profile {
    grid-template-columns: 1fr;
  }

  .tccit-page-profile-img {
    width: 120px;
    height: 120px;
  }

  .tccit-page-btn {
    width: 100%;
  }
}


/* =========================================================
   TCCIT ONLINE TEST SYSTEM - ISOLATED COMMON THEME
   Does not style header/footer or generic site elements.
========================================================= */
.tccit-test-root{display:block;width:100%;background:#fbf5e8;color:#3f3a35;}
.tccit-test-root *,.tccit-test-root *:before,.tccit-test-root *:after{box-sizing:border-box;}
.tccit-test-wrap{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:30px 0 50px;}
.tccit-test-hero{background:linear-gradient(90deg,#3e2415,#6b4124);color:#fff;padding:28px 30px;border-radius:12px;margin-bottom:22px;box-shadow:0 8px 24px rgba(70,42,20,.12);}
.tccit-test-hero h1{margin:0 0 6px;color:#fff;font-size:30px;line-height:1.25;}
.tccit-test-hero p{margin:0;color:rgba(255,255,255,.88);line-height:1.6;}
.tccit-test-panel{background:#fff;border:1px solid #eadfce;border-radius:12px;padding:24px;box-shadow:0 8px 24px rgba(70,42,20,.07);margin-bottom:20px;}
.tccit-test-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.tccit-test-card{background:#fff;border:1px solid #eadfce;border-top:4px solid #c58a32;border-radius:10px;padding:20px;box-shadow:0 5px 18px rgba(70,42,20,.06);}
.tccit-test-card h2,.tccit-test-card h3{margin:0 0 8px;color:#5a351f;}
.tccit-test-card p{margin:6px 0;color:#756e65;line-height:1.6;}
.tccit-test-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0;}
.tccit-test-meta div{padding:9px;background:#fffaf0;border-radius:6px;font-size:13px;}
.tccit-test-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;border:1px solid #5a351f;border-radius:5px;background:#5a351f;color:#fff;text-decoration:none;font-weight:700;cursor:pointer;}
.tccit-test-btn:hover{background:#3e2415;color:#fff;}
.tccit-test-btn-gold{background:#c58a32;border-color:#c58a32;}
.tccit-test-btn-danger{background:#a52a2a;border-color:#a52a2a;}
.tccit-test-btn-light{background:#f2eadb;color:#5a351f;border-color:#eadfce;}
.tccit-test-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px;}
.tccit-test-alert{padding:12px 14px;border-radius:7px;margin-bottom:15px;border:1px solid #eadfce;}
.tccit-test-alert-error{background:#fff0f0;color:#a52a2a;border-color:#f0caca;}
.tccit-test-alert-success{background:#edf8ef;color:#236b2e;border-color:#cfe7d2;}
.tccit-test-question{background:#fff;border:1px solid #eadfce;border-radius:10px;padding:20px;margin-bottom:16px;}
.tccit-test-question-title{font-weight:700;color:#3e2415;line-height:1.6;margin-bottom:14px;}
.tccit-test-option{display:block;padding:11px 12px;margin:8px 0;border:1px solid #eadfce;border-radius:7px;cursor:pointer;background:#fffaf0;}
.tccit-test-option:hover{border-color:#c58a32;background:#fff8e9;}
.tccit-test-option input{margin-right:8px;}
.tccit-test-top{display:flex;justify-content:space-between;gap:15px;align-items:center;position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #eadfce;padding:12px 0;margin-bottom:18px;}
.tccit-test-timer{font-size:22px;font-weight:800;color:#a52a2a;white-space:nowrap;}
.tccit-test-result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0;}
.tccit-test-stat{background:#fffaf0;border:1px solid #eadfce;border-radius:8px;padding:16px;text-align:center;}
.tccit-test-stat strong{display:block;font-size:24px;color:#5a351f;}
.tccit-test-table-wrap{width:100%;overflow-x:auto;}
.tccit-test-table{width:100%;border-collapse:collapse;min-width:700px;}
.tccit-test-table th{background:#5a351f;color:#fff;text-align:left;padding:11px;}
.tccit-test-table td{padding:10px;border-bottom:1px solid #eadfce;vertical-align:top;}
.tccit-test-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
.tccit-test-field{display:block;}
.tccit-test-field-full{grid-column:1/-1;}
.tccit-test-field label{display:block;font-weight:700;color:#5a351f;margin-bottom:6px;}
.tccit-test-field input,.tccit-test-field select,.tccit-test-field textarea{width:100%;padding:11px 12px;border:1px solid #d9cdbb;border-radius:6px;background:#fff;color:#3f3a35;font:inherit;}
.tccit-test-field textarea{min-height:100px;resize:vertical;}
.tccit-test-small{font-size:12px;color:#756e65;}
.tccit-test-badge{display:inline-block;padding:5px 9px;border-radius:20px;font-size:12px;font-weight:700;background:#f2eadb;color:#5a351f;}
.tccit-test-badge-pass{background:#dff2e2;color:#236b2e;}
.tccit-test-badge-fail{background:#f8dada;color:#8d2424;}
.tccit-test-admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
@media(max-width:850px){.tccit-test-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.tccit-test-result-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.tccit-test-wrap{width:min(100% - 20px,1120px);padding:18px 0 35px;}.tccit-test-hero{padding:22px 18px;}.tccit-test-hero h1{font-size:25px;}.tccit-test-grid,.tccit-test-form-grid{grid-template-columns:1fr;}.tccit-test-field-full{grid-column:auto;}.tccit-test-result-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.tccit-test-panel{padding:16px;}.tccit-test-top{align-items:flex-start;}.tccit-test-timer{font-size:18px;}}

/* ============================================================
   TYPING TEST - isolated styles
   ============================================================ */
.tccit-test-root .tccit-typing-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.tccit-test-root .tccit-typing-head h1{margin:4px 0;font-size:30px}.tccit-test-root .tccit-typing-timer{min-width:110px;text-align:center;padding:14px 18px;border-radius:14px;background:#183f44;color:#fff;font-size:25px;font-weight:800}.tccit-test-root .tccit-typing-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.tccit-test-root .tccit-typing-stats span{padding:12px;border-radius:12px;background:#f4f8f8;text-align:center;font-size:13px}.tccit-test-root .tccit-typing-stats b{display:block;font-size:19px;margin-top:3px}.tccit-test-root .tccit-typing-paragraph{padding:22px;border:1px solid #dbe8e8;border-radius:16px;background:#fbfefe;font-size:18px;line-height:2;letter-spacing:.2px;margin-bottom:16px}.tccit-test-root .tccit-typing-input{width:100%;min-height:180px;resize:vertical;border:2px solid #cbdede;border-radius:16px;padding:18px;font-size:18px;line-height:1.8;outline:none;font-family:inherit}.tccit-test-root .tccit-typing-input:focus{border-color:#e2a11a;box-shadow:0 0 0 4px rgba(226,161,26,.10)}.tccit-test-root .tccit-typing-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.tccit-test-root .tccit-typing-result-grid>div{padding:18px;border-radius:14px;background:#f4f8f8;text-align:center}.tccit-test-root .tccit-typing-result-grid b{display:block;font-size:13px}.tccit-test-root .tccit-typing-result-grid strong{display:block;font-size:25px;margin-top:5px}.tccit-test-root .tccit-test-typing-link{margin-top:24px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#f7fbfb,#fff7e8);border:1px solid #e4eeee;display:flex;align-items:center;justify-content:space-between;gap:15px}.tccit-test-root .tccit-test-typing-link>div{display:flex;align-items:center;gap:12px}.tccit-test-root .tccit-test-typing-link>div>span{font-size:30px}.tccit-test-root .tccit-test-typing-link strong{display:block}.tccit-test-root .tccit-test-typing-link small{display:block;color:#667;margin-top:3px}@media(max-width:700px){.tccit-test-root .tccit-typing-head{align-items:flex-start;flex-direction:column}.tccit-test-root .tccit-typing-stats{grid-template-columns:repeat(2,1fr)}.tccit-test-root .tccit-typing-result-grid{grid-template-columns:repeat(2,1fr)}.tccit-test-root .tccit-test-typing-link{flex-direction:column;align-items:stretch}}