/* ==========================================================
   Cẩm nang Apollo English – style dùng chung (desktop 1336px)
   Header + mục lục bên trái: CHƯA tạo (theo yêu cầu),
   layout chừa sẵn cột trái để bổ sung sau.
   ========================================================== */

@font-face {
  font-family: 'Brauer';
  src: url('/landings/cam-nang-huong-dan/fonts/BrauerNeueVN-Bold.woff2') format('woff2'),
       url('/landings/cam-nang-huong-dan/fonts/BrauerNeueVN-Bold.woff') format('woff'),
       url('/landings/cam-nang-huong-dan/fonts/BrauerNeueVN-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito';
  src: url('/landings/cam-nang-huong-dan/fonts/Nunito-Regular.woff2') format('woff2'),
       url('/landings/cam-nang-huong-dan/fonts/Nunito-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito';
  src: url('/landings/cam-nang-huong-dan/fonts/Nunito-SemiBold.woff2') format('woff2'),
       url('/landings/cam-nang-huong-dan/fonts/Nunito-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito';
  src: url('/landings/cam-nang-huong-dan/fonts/Nunito-Bold.woff2') format('woff2'),
       url('/landings/cam-nang-huong-dan/fonts/Nunito-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Baskerville VN';
  src: url('/landings/cam-nang-huong-dan/fonts/Baskerville.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Baskerville VN';
  src: url('/landings/cam-nang-huong-dan/fonts/Baskerville-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

:root {
  --yellow:   #ffd85c;
  --green:    #a2cc42;
  --red:      #ea4754;
  --blue:     #0c8ccd;
  --cream:    #fff9e3;
  --lightblue:#e1f3f9;
  --heading:  #2aa4db;   /* xanh tiêu đề outline */
  --deepblue: #1e88c9;   /* xanh chữ Brauer trên nền vàng   */
  --navy:     #1d71b8;
  --body:     #4D4D4D;
  --pink:     #ef6d9b;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #fff;
  /* format chuẩn nội dung mô tả (theo yêu cầu): Montserrat 16px / 400 */
  font-family: 'Montserrat', 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0px;
  color: var(--body);
}

/* ---- khung trang ---- */
.viewport { max-width: 1336px; margin: 0 auto; width: 100%; }

.layout {
  width: 1200px;
  margin: 0 auto;
  padding: 84px 0 60px;     /* chừa chỗ header (55px) phía trên */
  display: flex;
  align-items: flex-start;
}

/* ---- cột trái: MỤC LỤC ---- */
.toc-space { width: 320px; flex: none; }

.toc { padding-right: 48px; }
.toc h2 {
  font-family: 'Brauer', sans-serif;
  color: var(--navy);
  font-size: 28px;
  letter-spacing: .5px;
  margin: 6px 0 8px;
}
.toc-sec { border-bottom: 1px solid #d9d9d9; }
.toc-sec:last-child { border-bottom: none; }
.toc-item {
  display: block;
  position: relative;
  font-family: 'Brauer', sans-serif;
  font-size: 17px;
  line-height: 150%;
  letter-spacing: 0px;
  color: #8a8a8c;
  text-decoration: none;
  padding: 13px 0;
}
.toc-item.active, .toc-item:hover { color: var(--navy); }

/* submenu: title các trang bên trong mục */
.toc-sub { margin: -8px 0 0; padding: 0 0 12px 16px; }
.toc-sub a {
  display: block;
  font-family: 'Montserrat', 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0px;
  color: #4D4D4D;
  text-decoration: none;
  padding: 5px 0;
}
.toc-sub a.cur, .toc-sub a:hover { color: var(--blue); }
.toc-sub { display: none; }
.toc-sec.open .toc-sub { display: block; }
.toc-item { padding-right: 24px; cursor: pointer; }
.toc-item::after {
  content: '';
  position: absolute;
  right: 6px; top: 24px;
  width: 8px; height: 8px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s;
}
.toc-sec.open > .toc-item::after { transform: rotate(45deg); }

.content { width: 880px; flex: none; position: relative; }

img { display: block; max-width: 100%; }

/* ---- tiêu đề lớn: Brauer xanh, viền trắng, bóng mềm ---- */
.h-outline {
  font-family: 'Brauer', sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.25;
  color: var(--heading);
  margin: 0 0 14px;
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff,
    0 5px 8px rgba(30, 80, 120, .28);
}
.h-outline .accent-pink   { color: #f4679d; }
.h-outline .accent-orange { color: #f7a823; }
.h-outline .accent-red    { color: #ee4b5e; }

/* ---- panel bo góc: gradient trên xanh, dưới trắng (theo yêu cầu) ---- */
.panel {
  background: linear-gradient(180deg, #cfe9fa 0%, #eaf6fd 55%, #ffffff 100%);
  border-radius: 28px;
  padding: 38px 44px;
}

/* ---- nhãn chổi vàng (TUẦN 0, tiêu đề mục...) ---- */
.brush {
  display: inline-block;
  background: url('/landings/cam-nang-huong-dan/element/p08-nen-tuan-vang.png') no-repeat center / 100% 100%;
  font-family: 'Brauer', sans-serif;
  color: var(--deepblue);
  padding: 13px 44px 16px 34px;
}
.brush-long {
  background-image: url('/landings/cam-nang-huong-dan/element/p17-nen-tieu-de-vang.png');
}

/* ---- pill màu ---- */
.pill {
  display: inline-block;
  font-family: 'Brauer', sans-serif;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 7px 18px 8px;
  font-size: 20px;
  line-height: 1.2;
}
.pill.green  { background: var(--green); }
.pill.blue   { background: var(--blue); }
.pill.red    { background: var(--red); }
.pill.yellow { background: var(--yellow); }
.pill.pink   { background: var(--pink); }

/* ---- list mũi tên vàng ---- */
ul.arrow-list { list-style: none; margin: 8px 0 0; padding: 0; }
ul.arrow-list li { position: relative; padding-left: 23px; margin-bottom: 9px; }
ul.arrow-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 0; height: 0;
  border-left: 10px solid var(--yellow);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ---- tiêu đề phụ vàng nổi bật (p04) ---- */
.hl-yellow {
  display: inline-block;
  background: var(--yellow);
  border-radius: 10px;
  font-family: 'Brauer', sans-serif;
  color: var(--navy);
  font-size: 24px;
  padding: 8px 21px 9px;
  margin: 23px 0 8px;
}

/* ---- bong bóng thoại ---- */
.bubble {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 21px 29px;
  box-shadow: 0 4px 14px rgba(90, 130, 160, .18);
  /* font bình thường theo yêu cầu: không bold, không in nghiêng */
  font-style: normal;
  font-weight: 400;
  color: #3d3d3f;
}
.bubble.tail-right::after {
  content: '';
  position: absolute;
  right: -18px; top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #fff;
}
.bubble.tail-left::before {
  content: '';
  position: absolute;
  left: -18px; top: 30px;
  border-style: solid;
  border-width: 15px 20px 15px 0;
  border-color: transparent #fff transparent transparent;
}

/* ---- khối TUẦN (p08–p09) ---- */
.week { margin-bottom: 44px; }
.week-head { display: flex; align-items: center; gap: 29px; margin-bottom: 16px; }
.week-head .brush { font-size: 45px; line-height: 1; padding: 15px 44px 20px 29px; }
.week-head h3 {
  font-family: 'Brauer', sans-serif;
  color: var(--deepblue);
  font-size: 29px;
  margin: 0;
  text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff,
               0 3px 5px rgba(30,80,120,.22);
}
.week-body {
  border-left: 5px solid var(--yellow);
  padding-left: 26px;
}
.week-flex { display: flex; gap: 16px; align-items: flex-start; }
.week-flex .txt { flex: 1; }
.week-flex .art { width: 300px; flex: none; }
.name { font-family: 'Brauer', sans-serif; color: var(--blue); font-size: 19px; }
.hl-blue { color: var(--blue); font-weight: 700; }
.hl-blue-brauer { font-family: 'Brauer', sans-serif; color: var(--blue); }

/* ---- thẻ 3 bạn nhỏ (p07 / p10) ---- */
.kids { display: flex; gap: 29px; margin-top: 23px; }
.kid { flex: 1; text-align: center; }
.kid img { width: 100%; }
.kid .pill.pink { font-size: 19px; padding: 8px 23px 9px; margin: 8px 0 10px; }
.kid p { margin: 0; }

/* ---- bảng độ tuổi (p12–p14) ---- */
.age-table { display: flex; gap: 18px; align-items: flex-start; }
.age-col { flex: 1; }
/* 2 cột đầu ghép cặp theo hàng: mỗi hàng cao bằng ô cao nhất → luôn thẳng nhau */
.age-pair {
  flex: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  align-content: start;
}
.age-pair .c1 { grid-column: 1; }
.age-pair .c2 { grid-column: 2; }
.age-pair .age-item { display: flex; flex-direction: column; }
.age-pair .age-item .desc { flex: 1; }
.age-col-head {
  background: var(--yellow);
  border-radius: 13px;
  font-family: 'Brauer', sans-serif;
  color: var(--navy);
  text-align: center;
  font-size: 19px;
  line-height: 1.3;
  padding: 10px 13px;
  margin-bottom: 10px;
}
.age-item { margin-bottom: 12px; }
.age-item .pill {
  display: block;
  border-radius: 10px 10px 0 0;
  font-size: 19px;
  padding: 5px 13px 6px;
}
/* mô tả cao đồng nhất, chữ căn giữa → các dòng trong bảng đều nhau */
.age-item .desc {
  background: var(--cream);
  border-radius: 0 0 10px 10px;
  text-align: center;
  padding: 8px 14px;
  font-size: 16.5px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.age-item.alt .desc { background: var(--lightblue); }
.age-item.no-pill .desc { border-radius: 10px; }
.age-tips {
  background: var(--cream);
  border-radius: 13px;
  padding: 18px 21px;
}
.age-tips ul.arrow-list li { font-size: 16.5px; margin-bottom: 12px; }

/* ---- FAQ (p20–p21) ---- */
.faq-row { display: flex; align-items: flex-start; gap: 23px; margin-bottom: 29px; }
.faq-row .who { width: 125px; flex: none; }
.faq-row .who img { width: 125px; }
.faq-row .avatar { width: 110px; flex: none; }
.faq-q { flex: 1; }
.faq-a { flex: 1; text-align: right; }
.faq-a .bubble { text-align: right; }

/* ---- lưới hiểu lầm (p22) ---- */
.myth-grid { display: flex; flex-wrap: wrap; gap: 0 44px; }
.myth { width: calc(50% - 22px); margin-bottom: 23px; }
.myth .pill { display: block; font-size: 21px; padding: 9px 13px 10px; }
.myth p { margin: 8px 3px 0; color: #6d6d70; }

/* ---- sketch trang trí ---- */
.sketch { position: absolute; pointer-events: none; }

/* ---- chú thích chung ---- */
.center { text-align: center; }
.italic { font-style: italic; }

/* ---- điều hướng xem thử giữa các trang (không thuộc thiết kế) ---- */
.preview-nav {
  position: fixed;
  bottom: 14px;
  right: 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid #d5e6f2;
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: 0 3px 10px rgba(60,100,140,.15);
  z-index: 99;
}
.preview-nav a { color: var(--blue); text-decoration: none; font-weight: 700; margin: 0 6px; }
.preview-nav span { color: #9aa5ad; }