/* =========================================================
   HỌC CỜ TƯỚNG – style.css (CLEAN / AUDIT)
   - Dọn trùng lặp + gom theo khu vực
   - Ưu tiên rule "base" trước, "override/demo" sau
   ========================================================= */

/* =====================================================
   1) VARIABLES
   ===================================================== */
:root{
  --xq-border:#847a33;
  --xq-border2:#847a33;      /* viền phụ (nhạt) */
  --xq-bg:#847a33;
  --xq-panel:#d7d7b3;
  --xq-panel2:#fff;

  /* Base colors (tách rõ: menu / text / link) */
  --xq-text:#333;
  --xq-menu-link:#847a33;
  /* ✅ Link color theo site (như ảnh): #555 */
  --xq-link:#555;
  --xq-link-hover:#555;
}
*{ box-sizing:border-box; }

/* =====================================================
   2) BODY / BACKGROUND
   ===================================================== */
body{
  margin:0 !important;
  padding:0;
  display:block;
}

body.xq-body{
  margin:0;
  font-family:Tahoma,Arial,Helvetica,sans-serif;
  color:var(--xq-text);

  /* Nền ảnh (body2.png) */
  background-image:url("../images/body2.png");
  background-repeat:repeat;
  background-size:auto;
}

/* =====================================================
   2.1) LINKS (global)
   - Link dùng palette của site (đỏ nâu), tách biệt với màu menu và màu text
   ===================================================== */
a{
  color:var(--xq-link);
  text-decoration:none;
}
a:hover{
  color:var(--xq-link-hover);
  text-decoration:underline;
}

/* Menu links: không underline khi hover */
.xq-topnav-item:hover,
.xq-menu a:hover,
.xq-user-menu a:hover,
.xq-footer-links a:hover{
  text-decoration:none;
}

/* Buttons dạng link: không gạch chân khi hover */
a.xq-btn:hover,
a.xq-btn:focus,
a.xq-btn:active,
a.xq-btn-ghost:hover,
a.xq-btn-ghost:focus,
a.xq-btn-ghost:active{
  text-decoration:none;
}

/* Tabs trong trang tài khoản (Thông tin/Tài liệu/Giao dịch/...) không gạch chân khi hover */
.xq-account-tab:hover,
.xq-account-tab:focus,
.xq-account-tab:active{
  text-decoration:none;
}

/* =====================================================
   3) WRAP / LAYOUT (khung chính)
   - Outer ~1080 (padding 20) + inner 1040 (208 + 822 + gap 10)
   ===================================================== */
.xq-wrap{
  max-width:1080px;
  margin:0 auto;
  background:#fff;
  min-height:100vh;

  /*   border-left:1px solid var(--xq-border2);
  border-right:1px solid var(--xq-border2); */

  padding:0 20px;
}

.xq-layout{
  width:1040px;
  margin:0 auto;
  display:flex;
  gap:10px;           /* 208 + 822 + 10 = 1040 */
  padding:0;          /* bỏ padding cũ để canh chuẩn */
}

.xq-sidebar{ width:208px; flex:0 0 208px; }
.xq-content{ width:822px; flex:0 0 822px; min-width:0; }

/* =====================================================
   4) HEADER
   ===================================================== */
.xq-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 16px 10px;
  background:#fff;
}

.xq-logo{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
.xq-logo-mark{
  width:52px;height:52px;border:1px solid var(--xq-border2);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--xq-bg);
  font-size:26px;
}
.xq-logo-title{display:block;font-size:22px;font-weight:700;letter-spacing:.4px}
.xq-logo-sub{display:block;font-size:13px;color:#777;margin-top:2px}

.xq-search{display:flex;gap:6px;align-items:center}
.xq-search input{
  width:180px;max-width:32vw;
  padding:6px 8px;
  border:1px solid var(--xq-border2);
  background:#fff;
}
.xq-search button{
  padding:6px 10px;border:1px solid #88b6ff;background:#eaf3ff;cursor:pointer;
}
.xq-btn-ghost{
  padding:6px 10px;border:1px solid #cfcfcf;background:#fff;text-decoration:none;color:#444;
}

/* =====================================================
   5) TOP NAV
   ===================================================== */
.xq-topnav{
  display:flex;
  border:3px double var(--xq-border);
  background:#fff;
}
.xq-topnav-item{
  flex:1;
  text-align:center;
  text-decoration:none;
  color:var(--xq-menu-link);
  padding:10px 6px;
  font-weight:700;
  border-right:1px solid var(--xq-border2);
}
.xq-topnav-item:last-child{border-right:none}
.xq-topnav-item.is-active{background:var(--xq-panel);}

.xq-breadcrumb{
  padding:8px 10px;
  font-size:12px;
  /*border-bottom:1px solid var(--xq-border2);*/
  color:#666;
}

/* =====================================================
   6) SIDEBAR PANELS (login/menu)
   ===================================================== */
.xq-panel{
  border:1px solid var(--xq-border);
  background:#fff;
  margin-bottom:10px;
}
.xq-panel-title{
  background:var(--xq-panel);
  border-bottom:1px solid var(--xq-border);
  /* ✅ Giữ màu tiêu đề panel như hiện tại (tách riêng khỏi nội dung bài viết) */
  color:var(--xq-border);
  padding:7px 10px;
  font-weight:800;
  text-align:center;
}
.xq-panel-body{padding:10px;background:var(--xq-panel2)}

.xq-menu{list-style:none;margin:0;padding:0}
.xq-menu li{border-bottom:1px dotted #bdb28c}
.xq-menu li:last-child{border-bottom:none}
.xq-menu a{display:block;padding:7px 6px;text-decoration:none;color:var(--xq-link)}
.xq-menu a:hover{background:#fff}

.xq-loginbox input{width:100%;margin-bottom:8px;padding:6px 8px;border:1px solid var(--xq-border2)}
.xq-btn{width:100%;padding:8px 10px;border:1px solid #847a33;background:#d7d7b3;color:#847a33;cursor:pointer;font-weight:700}
.xq-useractions{font-size:12px;color:#555;margin:6px 0}
.xq-useractions a{color:var(--xq-link);text-decoration:none}
.xq-inline{margin-top:8px}
.xq-loginlinks{margin-top:8px;font-size:12px}
.xq-loginlinks a{color:var(--xq-link);text-decoration:none}

.xq-tags{display:flex;flex-wrap:wrap;gap:6px}
.xq-tags a{font-size:12px;padding:4px 6px;border:1px solid var(--xq-border2);background:#fff;text-decoration:none;color:#444}

/* Sidebar: VIỀN ĐÔI (double border) cho box */
.xq-sidebar .xq-panel{
  border:3px double var(--xq-border);
  background:#fff;
}

/* =====================================================
   7) HOME BOX (Tài liệu/Ván đấu/Bài tập)
   - Title thụt vào + thụt xuống
   - Không đóng khung riêng cho title
   - Body giữ nguyên (không padding-top) để slideshow không bị tụt
   ===================================================== */
.xq-box{
  border:1px solid var(--xq-border);
  background:#fff;
}
.xq-box-head{
  display:flex;
  align-items:center;
  gap:8px;

  margin:6px 8px 0 8px;     /* thụt vào + thụt xuống */
  padding:6px 10px;

  background:var(--xq-panel);
  border:0;
  box-shadow:none;
}
.xq-box-badge{
  width:28px;height:28px;flex:0 0 28px;
  background:url("../images/box-title.png") center/contain no-repeat;
  border:0;border-radius:0;
}
.xq-box-title{font-weight:800;letter-spacing:.3px}
.xq-box-body{
  padding:12px;
  padding-top:0;            /* để slideshow full */
  background:#fff;
}

/* =====================================================
   8) ARTICLE (About / FAQ / Privacy Policy)
   - Tách màu chữ phần "nội dung bài viết" khỏi màu tiêu đề panel sidebar
   - Yêu cầu: nội dung bài viết màu #666
   ===================================================== */
.xq-article{
  color:#666;
}


/* =====================================================
   9) FEN SEARCH (picker)
   ===================================================== */
.xq-fen-search{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.xq-fenpicker{display:flex;flex-direction:column;gap:4px}
.xq-fenpicker-row{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.xq-fenpicker-label{font-size:11px;color:#666;min-width:34px;text-align:right}
.xq-piece{
  padding:5px 8px;
  border:1px solid var(--xq-border2);
  background:#fff;
  cursor:pointer;
  font-size:12px;
  line-height:1;
  border-radius:4px;
}
.xq-piece.is-on{background:var(--xq-panel);border-color:var(--xq-border)}
.xq-fen-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.xq-fen-btn{
  padding:6px 10px;border:1px solid #88b6ff;background:#eaf3ff;cursor:pointer;font-weight:700
}
.xq-fen-reset{
  padding:6px 10px;border:1px solid #cfcfcf;background:#fff;text-decoration:none;color:#444;
}

/* =====================================================
   10) FOOTER – BẢN CUỐI (ẢNH MỜ SẴN, KHÔNG OPACITY)
   - HTML đã tách links ra ngoài inner
   ===================================================== */
.xq-footer{
  position:relative;
  margin-top:20px;
  border-top:0px solid var(--xq-border);
  overflow:hidden;
  min-height:360px;
  background:#fff;

  /* TẠO VÙNG TRẮNG PHÍA TRÊN (GIỮ KHUNG LINK KHÔNG BỊ ĐẨY) */
  padding-bottom:40px;
}

/* ẢNH MỜ CHỈ PHỦ PHẦN DƯỚI */
.xq-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:260px;              /* CHỈ PHỦ PHẦN DƯỚI */
  background:url("../images/footer.png") no-repeat center bottom;
  background-size:80% 100%;
  opacity:1;
  pointer-events:none;
  z-index:0;
}

/* KHUNG TEXT */
.xq-footer-inner{
  position:relative;
  z-index:1;
  max-width:1040px;
  margin:0 auto 20px;        /* KHOẢNG HỞ GIỮA TEXT & LINK */
  padding:16px 12px;
  background:#fff;
  border:1px solid var(--xq-border2);
  text-align:center;
}

.xq-footer-title{
  font-weight:800;
  font-size:18px;
  margin:0 0 6px;
}

.xq-footer-text{
  font-size:13px;
  color:#555;
  line-height:1.6;
  margin:4px 0;
}

/* KHUNG LINK – DÍNH MÉP ẢNH */
.xq-footer-links{
  position:relative;
  z-index:1;
  max-width:1040px;
  margin:0 auto;
  padding:10px 12px;
  background:var(--xq-panel);
  border:0px solid var(--xq-border2);
  border-top:none;
  text-align:center;
}

.xq-footer-links a{
  display:inline-block;
  padding:0 10px;
  color:var(--xq-menu-link);
  text-decoration:none;
  font-size:14px;
}

.xq-footer-links a + a{
  border-left:1px solid rgba(0,0,0,.25);
}

/* =====================================================
   11) RESPONSIVE
   ===================================================== */
@media (max-width: 1100px){
  .xq-wrap{ max-width:100%; padding:0 12px; }
  .xq-layout{ width:100%; }
  .xq-sidebar, .xq-content{ width:auto; flex:unset; }
}

@media (max-width: 860px){
  .xq-header{flex-direction:column;align-items:stretch;gap:10px}
  .xq-header-right{display:flex;justify-content:flex-end}
  .xq-fen-search{align-items:stretch}
  .xq-fenpicker-row{justify-content:flex-start}

  .xq-layout{flex-direction:column}
  .xq-sidebar{width:auto;flex:unset}
  .xq-search input{max-width:45vw}
}

/* ================================
   FIX SIDEBAR: TITLE & BODY TÁCH KHUNG
   Áp dụng cho TẤT CẢ .xq-panel
   ================================ */

/* Khung ngoài bỏ viền */
.xq-sidebar .xq-panel{
  border: none !important;
  background: transparent;
  margin-bottom: 14px;
}

/* ===== KHUNG TIÊU ĐỀ ===== */
.xq-sidebar .xq-panel-title{
  border: 3px double #847a33;
  background: #d7d7b3;
  margin-bottom: 6px;
  padding: 10px;
  font-weight: 800;
  text-align: center;
}

/* ===== KHUNG NỘI DUNG ===== */
.xq-sidebar .xq-panel-body{
  border: 3px double #847a33;
  background: #fff;
  padding: 12px;
}

/* =====================================================
   BUTTON STYLE (theo demo Joomla)
   - Dùng cho: "ĐĂNG NHẬP ĐỂ DOWNLOAD", "ĐĂNG NHẬP ĐỂ LÀM BÀI TẬP",
              "DOWNLOAD TÀI LIỆU - X ĐIỂM", "MỞ LỜI GIẢI - X ĐIỂM"
   ===================================================== */
.DangNhap{
  display:inline-block;
  background:rgb(107,30,12);
  color:white!important;
  padding:5px 20px;
  text-transform: uppercase;
  font-size:150%;
  border: 2px dashed white;
  border-radius:5px;
  cursor:pointer;
  text-decoration:none;
  line-height:1.2;
}

.DangNhap:hover{ opacity:.95; }
.DangNhap:active{ transform: translateY(1px); }
.DangNhap strong{ font-weight:800; }

/* =====================================================
   ACCOUNT / PROFILE (match demo screenshot)
   ===================================================== */

/* --- SIDEBAR MEMBER BOX (THÀNH VIÊN) --- */
.xq-userbox{font-size:14px;line-height:1.55;color:#555}
.xq-userline{padding:4px 0 6px;border-bottom:1px dotted #bdb28c}
.xq-usermeta{margin:0;padding:6px 0;font-size:14px;color:#555}
.xq-usermeta div{padding:4px 0;border-bottom:1px dotted #bdb28c}

.xq-user-menu{list-style:none;margin:8px 0 0;padding:0}
.xq-user-menu li{margin:0;padding:3px 0}
.xq-user-menu li::before{content:"•";display:inline-block;width:14px;color:#555}
.xq-user-menu a{color:var(--xq-link);text-decoration:none}
.xq-user-menu a:hover{text-decoration:underline}
.xq-user-menu .xq-user-menu-sep{padding:0;margin:6px 0;border-top:1px dotted #bdb28c}
.xq-user-menu .xq-user-menu-sep::before{content:""}

/* Button nhỏ (Thoát ra) trong sidebar */
.xq-btn-inline{width:auto;display:inline-block;padding:6px 16px}

/* --- ACCOUNT WRAPPER (Tài Khoản) --- */
.xq-account{border:1px solid #847a33;background:#fff}
.xq-account-head{background:#d7d7b3;padding:10px;border-bottom:1px solid #847a33}
.xq-account-title{font-weight:800;display:flex;align-items:center;gap:8px}
.xq-account-badge{width:28px;height:28px;flex:0 0 28px}
.xq-account-body{padding:12px}

.xq-account-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px 0}
.xq-account-tab{display:inline-block;background:#d7d7b3;color:#fff;text-decoration:none;padding:8px 12px;font-weight:100;border:0}
.xq-account-tab.is-active{background:#d7d7b3}

.xq-account-meta{margin:6px 0 14px}
.xq-account-welcome{color:#333;line-height:1.55}
.xq-account-points{display:block;margin-top:2px;color:#333}
.xq-account-logout{margin-top:10px}

/* Buttons trong khung tài khoản */
.xq-account .xq-btn{
  display:inline-block;
  width:auto;
  padding:8px 16px;
  border-radius:0;

  /* Đồng bộ font giữa <button> và <a> (Chrome/Edge thường không inherit font-size cho button) */
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
}
.xq-account .xq-btn.primary{background:#d7d7b3;border-color:#847a33}

/* Form sửa thông tin */
.xq-account-section{margin:18px 0 10px;font-size:16px;font-weight:800}
.xq-account-form{max-width:760px}
.xq-form-row{display:flex;align-items:center;gap:12px;margin:10px 0}
.xq-form-row label{width:200px;font-weight:100}
.xq-input{flex:1;padding:8px 10px;border:1px solid #ddd;background:#fff}
.xq-input:disabled{background:#f1f1f1;color:#666}
.xq-input:focus{outline:none;background:#eaf3ff}
.xq-form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

/* Nút Hủy (link) trong form tài khoản: giữ màu chữ #847a33 + không underline */
.xq-account .xq-form-actions a.xq-btn{
  color:#847a33;
  text-decoration:none;
}
.xq-account .xq-form-actions a.xq-btn:hover{
  color:#847a33;
  text-decoration:none;
}
.xq-req{color:#a00}

/* Flash messages */
.xq-alert{padding:10px 12px;border:1px solid #ddd;margin:10px 0}
.xq-alert-error{background:#fff2f2;border-color:#e6b3b3;color:#8a1f1f}
.xq-alert-success{background:#f0fff0;border-color:#b9e6b9;color:#1f7a1f}

/* Tables trong tài khoản (Tài liệu/Giao dịch/Bài đã làm) */
.xq-table-wrap{overflow:auto}
.xq-table{width:100%;border-collapse:collapse}
.xq-table th,.xq-table td{border:1px solid #ddd;padding:8px;font-size:14px}
.xq-account .xq-table thead th{background:#fff;color:#6d1e1e;font-weight:800;text-align:left}

.xq-doc-link{color:var(--xq-link);text-decoration:none}
.xq-doc-link:hover{text-decoration:underline}

.xq-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:transparent;cursor:pointer}
.xq-icon-btn svg{fill:var(--xq-link)}
.xq-icon-btn:hover{opacity:.85}

/* Pagination */
.xq-pagination{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:10px}
.xq-page{display:inline-block;padding:6px 10px;border:1px solid #ddd;background:#fff;text-decoration:none;color:#222}
.xq-page:hover{background:#fafafa}
.xq-page-info{color:#666}

/* ===== Exercise list title style (font 14, no underline) ===== */
.ex-title{font-size:16px !important;line-height:1.25;margin:0 0 6px;font-weight:700}
.ex-title a{color:var(--xq-link);text-decoration:none}
.ex-title a:hover{text-decoration:none;opacity:.9}

/* Icon "vinh danh" */
.ex-medal{width:16px;height:16px;vertical-align:-3px;margin-right:4px}

/* BÀI TẬP sidebar: dùng nút tròn thay vì ký tự ▶ */
.xq-menu.xq-excat a::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--xq-link);margin-right:8px;transform:translateY(-1px)}

/* Eye icon: dùng ::before (Font Awesome, không dùng <img> / eye.png) */
.xq-eye-link{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:0;border-radius:0;background:transparent;text-decoration:none;color:#111;cursor:pointer}
.xq-eye-link::before{content:"\f06e";display:block;font-family:"Font Awesome 5 Free";font-weight:900;font-style:normal;font-variant:normal;text-transform:none;line-height:1;font-size:16px}
.xq-eye-link:hover{opacity:.85}
.xq-eye-link.is-disabled{color:#b6b6b6;cursor:not-allowed;pointer-events:none;opacity:1}

/* Button icon trên toolbar bài tập: giữ size 30x30 theo .xq-icon-btn */
.xq-eye-btn{position:relative;color:var(--xq-link)}
.xq-eye-btn::before{content:"\f06e";display:block;font-family:"Font Awesome 5 Free";font-weight:900;font-style:normal;font-variant:normal;text-transform:none;line-height:1;font-size:18px}

/* Ẩn các checkbox dưới bàn cờ (đã có icon ở trên) */
.ex-options{display:none !important}

/* Ẩn khối nộp kết quả (form vẫn tồn tại để auto-submit) */
.ex-submit-section{display:none !important}

/* =====================================================
   RESPONSIVE (MOBILE)
   ===================================================== */
/* Ngăn tràn ngang trên mobile */
@media (max-width: 1100px){
  .xq-wrap{ max-width:100%; padding:0 10px; }
  .xq-layout{ width:100%; padding:0; }
  .xq-sidebar{ width:100%; }
  .xq-content{ width:100%; }
  .xq-content{ overflow-x:auto; }
}

@media (max-width: 900px){
  /* Header */
  .xq-header{ flex-direction:column; align-items:center; gap:10px; }
  .site-logo{ height:140px; width:auto; }
  .xq-header-right{ width:100%; }
  .fen-wrap{ width:100%; }
  .fen-row{ flex-wrap:wrap; }
  .fen-row input[type=text]{ flex:1 1 auto; min-width:180px; }

  /* Layout: content lên trước, menu xuống sau */
  .xq-layout{ flex-direction:column; }
  .xq-content{ order:1; }
  .xq-sidebar{ order:2; }

  /* Top nav */
  .xq-topnav{ flex-wrap:wrap; }
  .xq-topnav-item{ flex:1 1 50%; font-size:13px; padding:8px 6px; }

  /* Các bảng/list dài: cuộn ngang */
  table{ max-width:100%; }
}

@media (max-width: 480px){
  .xq-wrap{ padding:0 6px; }
  .site-logo{ height:110px; }
  .xq-topnav-item{ flex:1 1 50%; font-size:12px; padding:7px 4px; }
  .xq-panel-title{ font-size:14px; }
}

/* Bàn cờ dhtmlxq/engine: cho phép cuộn ngang trên màn hình nhỏ */
@media (max-width: 600px){
  #xq_wrap{ max-width:100%; overflow-x:auto; display:block; }
}


/* =====================================================
   12) MAINTENANCE PAGE (Site lock)
   ===================================================== */
.xq-maint-wrap{
  max-width:920px;
  padding:0 18px;
}

.xq-maint-logo{
  display:block;
  margin:0 auto 8px;
  max-width:420px;
  width:100%;
  height:auto;
}

.xq-maint{
  max-width:760px;
  margin:18px auto 60px;
}

.xq-maint-card{
  border:3px double var(--xq-border);
  background:#fff;
}

.xq-maint-head{
  background:var(--xq-panel);
  border-bottom:1px solid var(--xq-border);
  padding:16px 18px;
  text-align:center;
}

.xq-maint-icon{
  font-size:34px;
  line-height:1;
  margin-bottom:8px;
  color:var(--xq-menu-link);
}

.xq-maint-title{
  margin:0;
  font-size:22px;
  font-weight:900;
  color:var(--xq-menu-link);
  letter-spacing:.2px;
}

.xq-maint-sub{
  margin:8px 0 0;
  color:#555;
  font-size:13px;
  line-height:1.5;
}

.xq-maint-body{
  padding:18px;
}

.xq-maint-msg{
  margin:0 0 14px 0;
  padding:12px 14px;
  border:1px solid #f1d39b;
  background:#fff8e6;
  border-radius:8px;
  color:#6b4b12;
  line-height:1.55;
}

.xq-maint-login{
  max-width:440px;
  margin:0 auto;
  display:grid;
  gap:10px;
}

.xq-maint-login input{
  width:100%;
  padding:10px 12px;
  border:1px solid #ddd;
  background:#fff;
  font-size:14px;
}

.xq-maint-login input:focus{
  outline:none;
  background:#fff;
  border-color:#c5b678;
  box-shadow:0 0 0 3px rgba(132,122,51,.12);
}

.xq-maint-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.xq-maint .xq-btn{ width:auto; min-width:210px; }
.xq-maint .xq-btn-ghost{ width:auto; }

.xq-maint-note{
  margin-top:10px;
  text-align:center;
  font-size:12px;
  color:#666;
}