.elementor-2769 .elementor-element.elementor-element-fe46398{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2769 .elementor-element.elementor-element-d146be9{--display:flex;--min-height:537px;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;}.elementor-2769 .elementor-element.elementor-element-d146be9:not(.elementor-motion-effects-element-type-background), .elementor-2769 .elementor-element.elementor-element-d146be9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://tracnghiemcanhan.com/wp-content/uploads/2025/09/Tai-mau-56.png");background-position:center center;background-size:cover;}.elementor-2769 .elementor-element.elementor-element-4ba674c{--display:flex;--margin-top:99px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2769 .elementor-element.elementor-element-7a34bdc img{width:100%;max-width:100%;height:404px;}.elementor-2769 .elementor-element.elementor-element-ae47af3{--display:flex;--min-height:0px;}.elementor-2769 .elementor-element.elementor-element-ae47af3.e-con{--align-self:center;}.elementor-2769 .elementor-element.elementor-element-0b376cf{--display:flex;}.elementor-2769 .elementor-element.elementor-element-5edb792{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2769 .elementor-element.elementor-element-4ba674c{--width:65%;}.elementor-2769 .elementor-element.elementor-element-ae47af3{--width:55%;}}/* Start custom CSS for html, class: .elementor-element-dfc8721 */:root{
  --indigo-900:#0f2167;
  --indigo-700:#1e40af;
  --indigo-600:#2563eb;
  --amber-500:#f59e0b;
  --amber-600:#d97706;
}

/* Hero */
.hero-b{
  width:100%;
}

/* Content */
.hero-b__content{
  max-width:900px;
}

/* Pill highlight */
.pill{
  display:inline-block;
  background:#fff7e6;
  color:var(--amber-600);
  padding:8px 14px;
  border-radius:999px;
  font:600 13px/1.1 system-ui, sans-serif;
  box-shadow:0 2px 6px rgba(245,158,11,.25);
}

/* Heading */
.hero-b h1{
  margin:18px 0 12px;
  font:800 42px/1.2 "Inter", system-ui, sans-serif;
  color:var(--indigo-900);
  letter-spacing:-.01em;
}
.hero-b h1 span{ color:var(--indigo-600); }

.lead{
  margin:0 0 20px;
  color:black;
  font:500 19px/1.6 "Inter", system-ui, sans-serif;
}

/* Meta badges */
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:28px;
}
.badge{
  background:#fff;
  color:var(--indigo-700);
  border:1px solid #c6d7ff;
  padding:8px 12px;
  border-radius:10px;
  font:700 13px/1 "Inter", sans-serif;
}
.badge.outline{
  background:transparent;
  border:1px dashed #9db8ff;
}
.dot{ color:#94a3b8; }

/* CTA buttons */
.cta{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 20px;
  border-radius:12px;
  text-decoration:none;
  font:700 15px/1 "Inter", sans-serif;
  transition:.15s ease;
}

.btn-primary{
  background:linear-gradient(135deg, var(--amber-500), #ffb547);
  color:#1f2937;
  box-shadow:0 6px 16px rgba(245,158,11,.35);
}
.btn-primary:hover{ transform:translateY(-2px); }

.btn-ghost{
  background:#fff;
  border:1px solid #c6d7ff;
  color:var(--indigo-700);
}
.btn-ghost:hover{ box-shadow:0 6px 16px rgba(30,64,175,.15); }

/* Responsive */
@media(max-width:768px){
  .hero-b h1{ font-size:32px; }
  .btn{ height:44px; padding:0 16px; }
}
/* Hàng hành động: meta + CTA cùng 1 hàng */
.actions{
  display:flex;
  align-items:center;
  gap:16px;             /* khoảng cách giữa meta và nút */
  margin-top:16px;
}

/* Meta giữ dạng hàng, không xuống dòng trên desktop */
.meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  margin:0;             /* bỏ margin-bottom cũ nếu có */
}

/* Nút giữ kích thước gọn để đứng cùng hàng */
.btn{
  height:46px;
  padding:0 18px;
  white-space:nowrap;   /* không cho xuống dòng chữ trong nút */
}

@media (max-width: 640px){
  .actions{ flex-wrap:wrap; gap:12px; }
  .btn{ width:100%; order:2; }
  .meta{ order:1; flex-wrap:wrap; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c99890d *//* ===== Theme tokens (dễ đổi màu) ===== */
:root{
  --c-bg1: #eaf2ff;   /* xanh nhạt dịu */
  --c-bg2: #d6e4ff;   /* xanh lam rất nhạt */
  --c-text: #163463;  /* xanh đậm, dễ đọc */
  --c-accent: #2563eb;/* xanh lam cho tag đề # */
  --c-pill-bg: #fff3bf; /* vàng nhạt cho highlight */
  --c-pill-text: #b35c00;/* nâu cam dịu */
  --c-badge-text: #1e3a8a;
  --c-badge-border: #9db8ff;
  --radius: 14px;
  --shadow: 0 6px 14px rgba(22, 52, 99, .12);
  --shadow-hover: 0 10px 24px rgba(22, 52, 99, .18);
}

/* ===== Lưới 4 cột, có responsive ===== */
.exam-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  padding:20px 10px;
}

/* ===== Card (nút) ===== */
.exam-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  text-decoration:none;
  color:var(--c-text);
  background: linear-gradient(135deg, var(--c-bg1), var(--c-bg2));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.exam-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}
/* Focus rõ ràng cho keyboard */
.exam-card:focus-visible{
  outline:3px solid var(--c-accent);
  outline-offset:2px;
}

/* ===== Highlight nhỏ ===== */
.exam-card .pill{
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  background:var(--c-pill-bg);
  color:var(--c-pill-text);
  font:600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.2px;
}

/* ===== Tiêu đề ===== */
.exam-card .title{
  margin:0;
  font:700 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* ===== Meta hàng dưới ===== */
.exam-card .meta{
  margin-top:auto;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.exam-card .badge{
  padding:6px 10px;
  border-radius:10px;
  background:#fff;
  color:var(--c-badge-text);
  border:1px solid var(--c-badge-border);
  font:600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
.exam-card .tag{
  margin-left:auto;
  padding:6px 10px;
  border-radius:10px;
  background:var(--c-accent);
  color:#fff;
  font:700 13px/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .exam-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 768px){
  .exam-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 460px){
  .exam-grid{ grid-template-columns:1fr; }
}

/* ===== Trợ năng: tắt chuyển động nếu người dùng không muốn ===== */
@media (prefers-reduced-motion: reduce){
  .exam-card{ transition:none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d89a890 */:root{
  --indigo-900:#0f2167;
  --indigo-800:#163463;
  --indigo-700:#1e40af;
  --indigo-600:#2563eb;
  --indigo-050:#f5f8ff;
  --blue-soft:#e8f1ff;

  --amber-500:#f59e0b;
  --amber-600:#d97706;

  --border:#e5e7eb;
  --text:#1f2937;
  --muted:#64748b;

  --radius:14px;
  --shadow:0 10px 30px rgba(22,52,99,.10);
}

/* Section shell */
.b-exam-info{
  padding:32px 6%;
  background:linear-gradient(180deg, var(--indigo-050) 0%, var(--blue-soft) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* Header */
.b-exam-info__head h2{
  margin:12px 0 8px;
  font:800 28px/1.25 "Inter",system-ui,sans-serif;
  color:var(--indigo-900);
}
.b-exam-info__head h2 span{ color:var(--indigo-600); }
.pill{
  display:inline-block; background:#fff7e6; color:var(--amber-600);
  padding:7px 12px; border-radius:999px; font:600 12px/1.1 system-ui,sans-serif;
  border:1px solid #fcd34d; box-shadow:0 2px 6px rgba(245,158,11,.18);
}
.stats{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.badge{
  background:#fff; color:var(--indigo-700);
  border:1px solid #c6d7ff; padding:6px 10px; border-radius:10px;
  font:700 12px/1 "Inter",system-ui,sans-serif;
}
.badge.outline{ background:transparent; border-style:dashed; }
.dot{ color:#94a3b8; }

/* Card */
.b-card{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; margin-top:16px;
}
.b-card h3{
  margin:0 0 12px; color:var(--indigo-800);
  font:800 18px/1.2 "Inter",system-ui,sans-serif;
}
.note{ margin-top:10px; color:var(--muted); font:500 13px/1.6 "Inter",system-ui; }

/* Table */
.tbl-wrap{ overflow:auto; }
.b-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font:600 14px/1.5 "Inter",system-ui,sans-serif; color:var(--text);
}
.b-table thead th{
  position:sticky; top:0; z-index:1; background:#f8fbff;
  color:var(--indigo-700);
  text-align:left; padding:10px 12px; border-bottom:1px solid #dbe5ff;
}
.b-table tbody td{
  padding:10px 12px; border-bottom:1px dashed #e6eefc; vertical-align:top;
}
.b-table tbody tr:hover td{ background:#f9fbff; }
.b-table tfoot th{
  padding:12px; background:#f1f6ff; color:#0f2167;
  border-top:1px solid #dbe5ff; font-weight:800;
}
.b-table td strong{ color:#0f2167; }

/* Grid under cards */
.b-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;
}
@media (max-width:900px){ .b-grid{ grid-template-columns:1fr; } }

/* Checklist */
.checklist{ margin:0; padding:0; list-style:none; color:#334155; }
.checklist li{ display:flex; gap:8px; margin:8px 0; }
.checklist li::before{
  content:"✓"; color:var(--indigo-700); font-weight:800;
}

/* Score block */
.score{ display:flex; gap:16px; flex-wrap:wrap; }
.score-item{
  background:#f8fbff; border:1px solid #dbe5ff; border-radius:12px;
  padding:10px 14px; min-width:160px;
}
.score-item .label{ display:block; color:#334155; font:600 12px/1.2 "Inter",system-ui; }
.score-item .value{ display:block; font:800 22px/1.2 "Inter",system-ui; color:#0f2167; }
.score-item .value.good{ color:#0ea5e9; }
.score-item .sub{ display:block; color:#64748b; font:600 12px/1.2 "Inter",system-ui; }
.tip{ margin-top:10px; color:#0f2167; font:700 13px/1.4 "Inter",system-ui; }/* End custom CSS */