/* ==========================================================================
   AWE 2026 — tokens và layout trang chủ.
   Màu và thang chữ lấy từ bản thiết kế 3a, không làm tròn.
   ========================================================================== */

:root {
    --awe-primary: #008080;
    --awe-primary-dark: #006b6b;
    /* Hai bậc dưới của thang teal trong bộ nhận diện (#f2f9f9 → #002d2d).
       Nền lớn không dùng #008080 nguyên chất được: chữ phụ trên đó chỉ đạt
       tương phản ~3,6:1, dưới ngưỡng AA cho cỡ chữ 13px. */
    --awe-primary-deep: #00595a;
    --awe-deep: #002d2d;
    --awe-ink: #14201f;
    --awe-bg: #faf9f6;
    --awe-surface: #fff;
    --awe-gold: #f0b020;
    /* Bậc vàng sáng của bộ nhận diện (custom_yellow). Dành riêng cho CHỮ trên
       nền teal đậm: #f0b020 ở đó chỉ đạt 4,2:1, dưới ngưỡng AA cho chữ nhỏ. */
    --awe-gold-lit: #ffc501;
    --awe-tint: #eaf2f1;
    --awe-red: #e02b20;
    --awe-zalo: #0068ff;

    --awe-line: rgba(20, 32, 31, .14);
    --awe-line-soft: rgba(20, 32, 31, .08);
    --awe-muted: rgba(20, 32, 31, .66);
    --awe-muted-2: rgba(20, 32, 31, .45);

    --awe-wrap: 1280px;
    --awe-gap: 20px;
    --awe-radius: 4px;
}

/* --- reset vừa đủ, không đụng tới trang khác --- */
.awe-topbar *,
.awe-header *,
#awe-main *,
.awe-footer *,
.awe-float * { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--awe-bg);
    color: var(--awe-ink);
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Không đặt màu link theo selector có #id: nó thắng mọi class .awe-btn--*
   và làm chữ nút teal trùng màu nền. Mỗi link ở đây đều đã có class riêng. */
.awe-prose a { color: var(--awe-primary); }
.awe-prose a:hover { color: var(--awe-primary-dark); }

/* Khối chữ do biên tập viên nhập (post_content, mô tả đồ án, will_learn…). */
.awe-prose { font-size: 16px; line-height: 1.7; }
.awe-prose > :first-child { margin-top: 0; }
.awe-prose > :last-child { margin-bottom: 0; }
.awe-prose h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 30px 0 10px; }
.awe-prose h3 { font-size: 18.5px; font-weight: 700; margin: 26px 0 8px; }
.awe-prose h4 { font-size: 16.5px; font-weight: 700; margin: 22px 0 8px; }
.awe-prose p { margin: 0 0 14px; }
.awe-prose ul,
.awe-prose ol { margin: 0 0 16px; padding-left: 22px; }
.awe-prose li { margin-bottom: 7px; }
.awe-prose img { max-width: 100%; height: auto; border-radius: var(--awe-radius); }
.awe-prose iframe { max-width: 100%; }
.awe-prose table { width: 100%; border-collapse: collapse; }
.awe-prose td,
.awe-prose th { border: 1px solid var(--awe-line); padding: 8px 10px; }

/* Đường dẫn trên đầu trang trong. */
.awe-crumb {
    font-size: 12.5px;
    color: rgba(20, 32, 31, .55);
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.awe-crumb a { color: inherit; text-decoration: none; }
.awe-crumb a:hover { color: var(--awe-primary); }

/* Đầu trang của các trang trong (đồ án, liên hệ…): dải nền --awe-tint, đường
   dẫn, tiêu đề teal, một câu dẫn. Ở awe.css vì nhiều họ trang dùng chung. */
.awe-phero {
    background: var(--awe-tint);
    padding: 24px 0 34px;
}
.awe-phero__title {
    font-weight: 800;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--awe-primary);
    margin: 0;
    max-width: 20ch;
    text-wrap: balance;
}
.awe-phero__lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--awe-muted);
    margin: 16px 0 0;
    max-width: 62ch;
}

@media (max-width: 900px) {
    .awe-phero { padding: 18px 0 24px; }
    .awe-phero__title { font-size: 29px; max-width: none; }
    .awe-phero__lead { font-size: 14px; }
}

/* Dải nền tint để tách hai khối liền nhau. Ở awe.css vì trang "Về trường AWE"
   và trang danh sách khoá học đều dùng. */
.awe-band {
    background: var(--awe-tint);
    padding: 44px 0 50px;
    margin: 26px 0;
}
.awe-band--white { background: var(--awe-surface); border-top: 1px solid var(--awe-line-soft); }
.awe-band .awe-secsub--wide { margin-bottom: 32px; }

@media (max-width: 900px) {
    .awe-band { padding: 30px 0 34px; margin: 16px 0; }
}


.awe-wrap {
    max-width: var(--awe-wrap);
    margin: 0 auto;
    padding: 0 24px;
}

.awe-skip {
    position: absolute;
    left: -9999px;
}
.awe-skip:focus {
    left: 12px;
    top: 12px;
    z-index: 99;
    background: var(--awe-ink);
    color: #fff;
    padding: 10px 16px;
}

:focus-visible {
    outline: 2px solid var(--awe-primary);
    outline-offset: 2px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- ảnh chưa có: khối sọc, nhãn rõ là placeholder --- */
.awe-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #efece5;
    background-image: repeating-linear-gradient(135deg, rgba(20, 32, 31, .10) 0 6px, transparent 6px 12px);
    color: rgba(20, 32, 31, .55);
    font-size: 12px;
    padding: 8px;
    min-height: 100%;
}

/* ========================= topbar + header ========================= */
.awe-topbar {
    /* Cùng mực teal với chân trang: hai thanh này là khung trên–dưới của trang,
       để lệch màu thì chúng trông như của hai bản thiết kế khác nhau. */
    background: var(--awe-deep);
    color: rgba(255, 255, 255, .8);
    font-size: 12.5px;
}
.awe-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.awe-topbar__contact { display: flex; gap: 24px; }
.awe-topbar a { color: inherit; text-decoration: none; }
.awe-topbar a:hover { color: #fff; }

.awe-header {
    background: var(--awe-surface);
    border-bottom: 1px solid rgba(20, 32, 31, .1);
}
.awe-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-top: 18px;
    padding-bottom: 18px;
}
.awe-header__logo { display: block; flex: none; }
.awe-header__logo img { height: 48px; width: auto; display: block; }

.awe-nav { position: relative; }
.awe-nav__list,
.awe-nav__list ul {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}
.awe-nav__list li { position: relative; }
.awe-nav__list a {
    color: rgba(20, 32, 31, .8);
    text-decoration: none;
    white-space: nowrap;
}
.awe-nav__list a:hover,
.awe-nav__list .current-menu-item > a {
    color: var(--awe-primary);
    font-weight: 600;
}

/* Menu "primary" của site là mega menu nhiều cấp. Không có CSS thả xuống thì
   toàn bộ cấp con đổ thẳng ra đầu trang và làm vỡ header. */
.awe-nav__list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    flex-direction: column;
    gap: 0;
    min-width: 240px;
    padding: 10px 0;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    box-shadow: 0 12px 28px rgba(20, 32, 31, .12);
    font-size: 14px;
}
.awe-nav__list .sub-menu .sub-menu { top: 0; left: 100%; }
.awe-nav__list li:hover > .sub-menu,
.awe-nav__list li:focus-within > .sub-menu { display: flex; }
.awe-nav__list .sub-menu a {
    display: block;
    padding: 8px 18px;
    white-space: normal;
    line-height: 1.4;
}
.awe-nav__list .sub-menu a:hover { background: var(--awe-tint); }
.awe-nav__list .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

/* ========================= mega menu "Khoá học" =========================
   Panel trải hết chiều ngang trang chứ không neo vào mục menu: bốn cột x 27
   khoá không vừa một hộp thả xuống 240px. .awe-nav là position:relative, nên
   panel neo vào đó rồi kéo rộng bằng left/right âm cũng được — nhưng như vậy
   nó lệch khỏi lưới .awe-wrap của phần còn lại. Ở đây neo vào .awe-header
   (position:relative) và để .awe-mega__inner dùng chung .awe-wrap. */
.awe-header { position: relative; }

/* .awe-nav khai báo position:relative ở trên để giữ dropdown cũ trong khung nó.
   Panel này thì phải trải hết chiều ngang trang, nên cả .awe-nav lẫn <li> phải
   trở lại static — nếu không panel neo vào mục menu rộng đúng 90px và bốn cột
   chồng lên nhau. Dropdown .sub-menu không hề gì: nó neo vào <li>, mà <li>
   thường vẫn giữ position:relative. */
.awe-nav { position: static; }
/* Phải kèm .awe-nav__list: `.awe-nav__list li` ở trên là 0,1,1 nên một class
   trần (0,1,0) không lấy lại được position, dù đứng sau. */
.awe-nav__list .awe-nav__item--mega {
    position: static;
    /* Panel bắt đầu ở đáy header, còn <li> chỉ cao bằng dòng chữ: giữa hai thứ
       là 18px padding của header cộng 1px viền. Chuột đi qua dải đó là mất
       hover và panel đóng ngay trước khi tới nơi. Kéo vùng hover xuống chạm
       panel, rồi bù bằng margin âm để header không cao thêm. */
    padding-bottom: 34px;
    margin-bottom: -34px;
}

.awe-nav__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    padding: 0;
    background: none;
    border: 0;
    color: rgba(20, 32, 31, .55);
    cursor: pointer;
    vertical-align: middle;
}
.awe-nav__more:hover { color: var(--awe-primary); }
.awe-nav__chev {
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}

.awe-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 45;
    background: var(--awe-surface);
    border-top: 1px solid var(--awe-line-soft);
    border-bottom: 1px solid var(--awe-line);
    box-shadow: 0 18px 34px rgba(20, 32, 31, .13);
}
/* Ba đường mở: rê chuột, tab tới bằng bàn phím, và JS bật class. Hai đường
   đầu là CSS thuần nên tắt JavaScript panel vẫn xem được trên desktop. */
.awe-nav__item--mega:hover > .awe-mega,
.awe-nav__item--mega:focus-within > .awe-mega,
.awe-nav__item--mega.is-open > .awe-mega { display: block; }

.awe-nav__item--mega:hover > .awe-nav__more .awe-nav__chev,
.awe-nav__item--mega.is-open > .awe-nav__more .awe-nav__chev {
    transform: translateY(1px) rotate(-135deg);
}

.awe-mega__inner { padding-top: 26px; padding-bottom: 20px; }

.awe-mega__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}
/* Số cột do template đếm ra. Panel trải hết chiều ngang header, nên panel ít
   cột phải thu bề ngang lại — kéo hai cột ra hết 1200px thì mỗi dòng khoá
   thành tên dính mép trái, giá dính mép phải, ở giữa là một khoảng trống dài. */
.awe-mega__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
.awe-mega__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; }
.awe-mega__col { min-width: 0; }

.awe-mega__head {
    display: flex;
    white-space: normal;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    text-decoration: none;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--awe-line-soft);
}
.awe-mega__title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--awe-ink);
    letter-spacing: -.01em;
}
.awe-mega__head:hover .awe-mega__title { color: var(--awe-primary); }
.awe-mega__count { font-size: 12px; color: var(--awe-muted-2); flex: none; }
.awe-mega__note {
    margin: 7px 0 9px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--awe-muted-2);
}

/* `.awe-nav__list ul` ở trên đặt display:flex cho mọi ul lồng trong menu (đó là
   dropdown cũ của Eduma). Kèm tên thẻ để hơn nó: 0,2,1 > 0,1,1. */
.awe-mega ul.awe-mega__list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: inherit;
}
.awe-mega__list li { position: static; }
.awe-mega__list a {
    white-space: normal;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px 6px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(20, 32, 31, .82);
    text-decoration: none;
    border-radius: 3px;
}
.awe-mega__list a:hover {
    background: var(--awe-tint);
    color: var(--awe-primary);
    padding-left: 8px;
    font-weight: 400;
}
.awe-mega__name { min-width: 0; }
.awe-mega__meta {
    flex: none;
    font-size: 12px;
    color: var(--awe-muted-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.awe-mega__meta--free { color: var(--awe-primary); font-weight: 600; }

.awe-mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--awe-line-soft);
    font-size: 13px;
}
.awe-mega__all {
    font-weight: 600;
    color: var(--awe-primary);
    text-decoration: none;
}
.awe-mega__all:hover { color: var(--awe-primary-dark); }
.awe-mega__help { color: var(--awe-muted-2); }
.awe-mega__help a { color: var(--awe-ink); font-weight: 600; text-decoration: none; }
.awe-mega__help a:hover { color: var(--awe-primary); }

/* Chân panel chỉ dùng ở mobile — trên desktop hai nút đó đã nằm ở header. */
.awe-nav__foot { display: none; }

.awe-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

.awe-burger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}
.awe-burger span {
    width: 20px;
    height: 1.5px;
    background: var(--awe-ink);
}

/* ========================= nút và link ========================= */
.awe-btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease;
}
.awe-btn--lg { font-size: 16px; padding: 16px 30px; }
.awe-btn--block { display: block; width: 100%; }

.awe-btn--primary { background: var(--awe-primary); color: #fff; }
.awe-btn--primary:hover { background: var(--awe-primary-dark); color: #fff; }

.awe-btn--ghost {
    border-color: var(--awe-ink);
    color: var(--awe-ink);
    font-weight: 500;
}
.awe-btn--ghost:hover { background: var(--awe-ink); color: #fff; }

.awe-btn--onteal { background: #fff; color: var(--awe-primary); }
.awe-btn--onteal:hover { background: rgba(255, 255, 255, .88); color: var(--awe-primary); }

/* Link phụ trong header ("Thoát"): vẫn bấm được nhưng không tranh chỗ với
   "Khoá học của tôi" — thứ người ta vào site để bấm. */
.awe-link--quiet { color: var(--awe-muted-2); font-weight: 500; }
.awe-link--quiet:hover { color: var(--awe-ink); }

.awe-link { font-size: 14px; color: rgba(20, 32, 31, .7); text-decoration: none; }
.awe-link:hover { color: var(--awe-primary); }
.awe-link--strong { font-size: 13.5px; font-weight: 600; color: var(--awe-primary); white-space: nowrap; }
.awe-link--onteal {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .9);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding-bottom: 3px;
}
.awe-link--onteal:hover { color: #fff; }

/* ========================= hero ========================= */
.awe-hero { padding: 34px 0 44px; }
.awe-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
    align-items: center;
}
.awe-hero__title {
    font-weight: 800;
    font-size: 64px;
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 0;
    color: var(--awe-primary);
    text-wrap: balance;
}
.awe-hero__title em { font-style: normal; }
.awe-hero__lead {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(20, 32, 31, .7);
    margin: 20px 0 0;
    max-width: 48ch;
}
.awe-hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.awe-hero__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(20, 32, 31, .5);
}
.awe-hero__media { height: 320px; border-radius: var(--awe-radius); overflow: hidden; }
.awe-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ========================= khung section ========================= */
.awe-section { padding: 26px 0 34px; }

.awe-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.awe-sectitle {
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -.025em;
    margin: 0;
    color: var(--awe-primary);
    text-wrap: balance;
}
.awe-secsub { font-size: 15px; color: var(--awe-muted); margin: 8px 0 0; }
.awe-secsub--wide { max-width: 68ch; margin-bottom: 24px; }

.awe-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--awe-primary);
}

.awe-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.awe-chip {
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
    color: rgba(20, 32, 31, .72);
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 999px;
}
.awe-chip b { font-weight: 400; color: var(--awe-muted-2); margin-left: 5px; }

/* Chip chọn ngành là <a> để tắt JS vẫn lọc được — nên phải gỡ dáng link đi. */
a.awe-chip { text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s; }
a.awe-chip:hover { border-color: var(--awe-primary); color: var(--awe-primary); }
a.awe-chip:focus-visible { outline: 2px solid var(--awe-primary); outline-offset: 2px; }
a.awe-chip--on:hover { color: #fff; }

/* "Đồ hoạ" chưa có khoá nào — giữ nguyên thông tin nhưng không giả làm nút bấm. */
.awe-chip--soon { border-style: dashed; color: var(--awe-muted-2); }

.awe-chip--on {
    background: var(--awe-primary);
    border-color: var(--awe-primary);
    color: #fff;
    font-weight: 600;
}
.awe-chip--on b { color: rgba(255, 255, 255, .75); }

.awe-grid { display: grid; gap: var(--awe-gap); }
/* `display: grid` ở trên thắng `display: none` mà trình duyệt gán cho [hidden]
   (cùng trọng số 0,1,0, CSS này đứng sau) — phải nói lại cho rõ. */
.awe-grid[hidden] { display: none; }
.awe-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.awe-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ========================= card khoá học ========================= */
.awe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.awe-card:hover {
    border-color: var(--awe-primary);
    transform: translateY(-2px);
    color: inherit;
}
.awe-card--featured { border-color: var(--awe-primary); }

.awe-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background: var(--awe-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 9px;
}

.awe-card__media { height: 150px; }
.awe-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.awe-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 17px 18px;
    flex: 1;
}
.awe-card__eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--awe-primary);
}
.awe-card__title {
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.3;
    margin: 0;
}
.awe-card__price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(20, 32, 31, .1);
}

.awe-price {
    font-weight: 700;
    font-size: 19px;
    color: var(--awe-primary);
    font-variant-numeric: tabular-nums;
}
.awe-price--lg { display: block; font-size: 18px; }
.awe-price--old {
    font-weight: 400;
    font-size: 13px;
    color: rgba(20, 32, 31, .42);
    text-decoration: line-through;
}

/* Khoá không bán lẻ: nhãn đứng đúng chỗ của giá. Không dùng màu teal của
   .awe-price — teal ở đây là màu của lời mời mua, mà dòng này nói ngược lại. */
.awe-card__only {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--awe-primary-deep);
    background: var(--awe-tint);
    padding: 4px 9px;
}

/* ========================= dải học thử ========================= */
.awe-trial { background: var(--awe-gold); color: var(--awe-ink); }
.awe-trial__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 34px;
    padding-bottom: 34px;
}
.awe-trial__left { display: flex; align-items: center; gap: 26px; }
.awe-ph--trial { width: 150px; height: 88px; flex: none; }
.awe-trial__img { width: 150px; height: 88px; flex: none; object-fit: cover; border-radius: var(--awe-radius); display: block; }
.awe-trial .awe-eyebrow { color: rgba(20, 32, 31, .65); letter-spacing: .14em; }
.awe-trial__title {
    font-weight: 800;
    font-size: 27px;
    letter-spacing: -.02em;
    margin: 8px 0 0;
}
.awe-trial__sub { font-size: 14.5px; color: rgba(20, 32, 31, .72); margin: 7px 0 0; }

/* ========================= bài viết / đồ án ========================= */
.awe-post {
    display: block;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.awe-post:hover { border-color: var(--awe-primary); transform: translateY(-2px); color: inherit; }
.awe-post__media { height: 170px; }
.awe-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.awe-post__body { display: flex; flex-direction: column; gap: 11px; padding: 16px 18px 18px; }
.awe-post__title { font-weight: 600; font-size: 17px; line-height: 1.3; margin: 0; }
.awe-post__excerpt { font-size: 13px; line-height: 1.55; color: rgba(20, 32, 31, .68); margin: 0; }

/* ========================= bảng so sánh ========================= */
.awe-compare { background: var(--awe-tint); padding: 44px 0 50px; margin-top: 44px; }

.awe-tablewrap { overflow-x: auto; }
.awe-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
}
.awe-table th,
.awe-table td {
    padding: 14px 20px;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.5;
    border-bottom: 1px solid var(--awe-line-soft);
}
.awe-table thead th {
    border-bottom: 1px solid rgba(20, 32, 31, .12);
    padding: 18px 20px;
}
.awe-table thead th,
.awe-table tbody td { border-left: 1px solid rgba(20, 32, 31, .12); }

.awe-table tbody th {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(20, 32, 31, .55);
    width: 150px;
}
.awe-table__best { box-shadow: inset 0 3px 0 var(--awe-primary); }
.awe-table__dur { display: block; font-weight: 800; font-size: 19px; }
.awe-table__kind { display: block; font-size: 13.5px; font-weight: 400; color: var(--awe-muted); margin-top: 5px; }
.awe-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: var(--awe-primary);
    color: #fff;
    padding: 3px 7px;
    margin-left: 8px;
    vertical-align: middle;
}
.awe-table__cta td { border-bottom: 0; padding: 16px 20px; }

/* ========================= FAQ ========================= */
.awe-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 44px;
    margin-top: 38px;
}
.awe-faq__q { font-weight: 600; font-size: 18px; margin: 0 0 7px; }
.awe-faq__a { font-size: 14.5px; line-height: 1.65; color: rgba(20, 32, 31, .7); margin: 0; }

/* ========================= lý do chọn AWE ========================= */
.awe-why__key { display: block; font-weight: 800; font-size: 30px; line-height: 1; color: var(--awe-primary); }
.awe-why__title { font-weight: 600; font-size: 17px; margin: 10px 0 6px; }
.awe-why__text { font-size: 14px; line-height: 1.6; color: rgba(20, 32, 31, .68); margin: 0; }

/* ========================= cảm nhận =========================
   Năm lời tâm sự thật, lấy từ bản Elementor cũ. Lưới có nhịp: lời kể dài nhất
   (đổi nghề — đúng người đang cân nhắc lộ trình) chiếm ô lớn nền teal, bốn lời
   còn lại là thẻ trắng. Ba thẻ đều nhau trước đây đọc như chú thích ảnh.
   ========================================================================== */
.awe-quotes {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: var(--awe-gap);
}
.awe-quote {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    padding: 20px;
    margin: 0;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.awe-quote:hover {
    border-color: var(--awe-primary);
    box-shadow: 0 10px 24px rgba(20, 32, 31, .08);
    transform: translateY(-2px);
}
.awe-quote p { font-size: 14.5px; line-height: 1.6; margin: 0; }
/* Đẩy cụm tên xuống đáy để các thẻ thẳng hàng dù lời tâm sự dài ngắn khác nhau. */
.awe-quote__who { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 16px; }
.awe-ph--avatar { width: 38px; height: 38px; min-height: 38px; border-radius: 50%; flex: none; font-size: 7px; }
.awe-quote__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 2px var(--awe-surface), 0 0 0 3px rgba(0, 128, 128, .35);
}
.awe-quote__who b { display: block; font-weight: 600; font-size: 14px; color: var(--awe-primary-deep); }
.awe-quote__who small { font-size: 12px; color: rgba(20, 32, 31, .55); }

.awe-quote--lead {
    grid-row: span 2;
    background: var(--awe-primary-deep);
    border-color: var(--awe-primary-deep);
    color: #fff;
    padding: 30px;
    overflow: hidden;
}
/* Dấu ngoặc kép trang trí: một ký tự, không ảnh, không request thêm. */
.awe-quote--lead::before {
    content: "“";
    position: absolute;
    top: 12px;
    right: 22px;
    font-size: 92px;
    line-height: .74;
    color: var(--awe-gold);
    opacity: .3;
    pointer-events: none;
}
.awe-quote__eyebrow {
    position: relative;
    color: var(--awe-gold-lit);
    margin-bottom: 14px;
}
.awe-quote--lead:hover {
    border-color: var(--awe-primary-deep);
    box-shadow: 0 14px 30px rgba(0, 45, 45, .22);
}
.awe-quote--lead p {
    position: relative;
    font-size: 18.5px;
    line-height: 1.62;
    text-wrap: pretty;
}
.awe-quote--lead .awe-quote__who { padding-top: 24px; }
.awe-quote--lead .awe-quote__avatar {
    width: 60px;
    height: 60px;
    box-shadow: 0 0 0 2px var(--awe-primary-deep), 0 0 0 3px rgba(255, 255, 255, .45);
}
.awe-quote--lead .awe-quote__who b { font-size: 16px; color: #fff; }
.awe-quote--lead .awe-quote__who small { font-size: 13px; color: rgba(255, 255, 255, .7); }

/* ========================= CTA cuối ========================= */
.awe-cta { background: var(--awe-primary); color: #fff; }
.awe-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 38px;
    padding-bottom: 38px;
}
.awe-cta__title { font-weight: 800; font-size: 29px; letter-spacing: -.02em; margin: 0; color: #fff; }
.awe-cta__sub { font-size: 15px; color: rgba(255, 255, 255, .86); margin: 8px 0 0; }
.awe-cta__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ========================= footer ========================= */
/* Chân trang mang màu thương hiệu chứ không phải đen: bậc cuối thang teal, nối
   liền dải CTA #008080 ngay phía trên mà vẫn tách bạch nhờ chênh độ sáng. */
.awe-footer { background: var(--awe-deep); color: rgba(255, 255, 255, .72); padding: 40px 0 56px; }
.awe-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.awe-footer__logo { display: inline-block; background: #fff; padding: 10px 14px; border-radius: 3px; }
.awe-footer__logo img { height: 44px; width: auto; display: block; }
.awe-footer__about { font-size: 13.5px; line-height: 1.6; margin: 14px 0 0; max-width: 36ch; }
.awe-footer__col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.awe-footer__head {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin: 0;
}
.awe-footer a { color: inherit; text-decoration: none; }
.awe-footer a:hover { color: #fff; }

/* ========================= nút nổi ========================= */
.awe-float {
    position: fixed;
    left: 24px;
    bottom: 28px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
.awe-float__call,
.awe-float__zalo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 20px 8px 8px;
    border-radius: 999px;
    text-decoration: none;
}
.awe-float__call {
    background: var(--awe-red);
    color: #fff;
    box-shadow: 0 8px 22px rgba(224, 43, 32, .35);
}
.awe-float__zalo {
    background: #fff;
    color: var(--awe-ink);
    border: 1px solid rgba(20, 32, 31, .12);
    box-shadow: 0 8px 22px rgba(20, 32, 31, .14);
}
.awe-float__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: #fff;
    color: var(--awe-red);
}
.awe-float__icon--zalo {
    background: var(--awe-zalo);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.awe-float__label {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}
.awe-float__value { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.awe-float__zalo .awe-float__value { font-size: 14.5px; font-weight: 600; }

/* ========================= responsive ========================= */
@media (max-width: 1100px) {
    .awe-hero__title { font-size: 48px; }
    .awe-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .awe-quotes { grid-template-columns: 1fr 1fr; }
    .awe-quote--lead { grid-column: span 2; grid-row: auto; }
    .awe-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    /* Menu mobile: một panel dọc gấp xuống dưới logo, không phải lớp phủ toàn
       màn hình — header chỉ cao 80px nên panel nằm ngay dưới nó là đủ gần.
       Trước bản này nút burger không có JavaScript nào đứng sau: bấm vào không
       ra gì, tức là mobile hoàn toàn không có menu. */
    .awe-header__inner { flex-wrap: wrap; gap: 12px; }
    .awe-header__actions { display: none; }
    .awe-burger { display: flex; }

    .awe-nav {
        display: none;
        order: 3;
        width: 100%;
        padding-bottom: 6px;
    }
    /* Hai đường mở: `:target` khi không có JavaScript (burger là link thật tới
       #awe-menu), và class do awe-nav.js gắn khi có. */
    .awe-nav:target,
    .awe-header.is-open .awe-nav { display: block; }

    .awe-nav__list {
        flex-direction: column;
        gap: 0;
        font-size: 16px;
        border-top: 1px solid var(--awe-line-soft);
    }
    .awe-nav__list > li { border-bottom: 1px solid var(--awe-line-soft); }
    .awe-nav__list > li > a { display: block; padding: 13px 2px; }
    .awe-nav__list .current-menu-item > a { font-weight: 700; }

    /* Panel dọc không có chỗ cho 27 dòng khoá: giữ bốn tiêu đề nhóm, mỗi cái
       dẫn thẳng vào đúng dải của trang /khoa-hoc/. Danh sách đầy đủ ở trang đó. */
    .awe-nav__more { display: none; }
    /* Vùng hover kéo dài chỉ có nghĩa khi panel treo dưới header. */
    .awe-nav__list .awe-nav__item--mega { padding-bottom: 0; margin-bottom: 0; }
    .awe-mega {
        display: block;
        position: static;
        border: 0;
        box-shadow: none;
        background: none;
    }
    .awe-mega__inner { padding: 0 0 10px; }
    .awe-mega__cols { display: block; max-width: none; }
    .awe-mega__col + .awe-mega__col { margin-top: 0; }
    .awe-mega__head {
        padding: 10px 2px 10px 14px;
        border-bottom: 0;
        border-left: 2px solid var(--awe-line-soft);
        margin-left: 2px;
    }
    .awe-mega__title { font-size: 14px; font-weight: 500; }
    .awe-mega__note,
    .awe-mega__help { display: none; }
    /* Kèm `ul` cho khớp trọng số với luật display:block ở trên (0,2,1) —
       media query không cộng thêm trọng số nào. */
    .awe-mega ul.awe-mega__list { display: none; }
    .awe-mega__foot {
        margin: 4px 0 0 16px;
        padding-top: 0;
        border-top: 0;
    }

    .awe-nav__foot {
        display: grid;
        gap: 10px;
        margin-top: 16px;
    }
    .awe-nav__foot .awe-btn { padding: 13px 18px; }
    .awe-nav__close {
        justify-self: center;
        margin-top: 2px;
        padding: 6px 10px;
        font-size: 13.5px;
        color: var(--awe-muted-2);
        text-decoration: none;
    }

    .awe-topbar__inner span { display: none; }
    .awe-topbar__contact { width: 100%; justify-content: space-between; }

    .awe-hero { padding: 24px 0 22px; }
    .awe-hero__grid { grid-template-columns: 1fr; gap: 24px; }
    .awe-hero__title { font-size: 36px; letter-spacing: -.032em; }
    .awe-hero__lead { font-size: 14px; }
    .awe-hero__actions { flex-direction: column; align-items: stretch; }
    .awe-hero__actions .awe-btn { display: block; font-size: 15px; padding: 15px 0; }
    .awe-hero__media { height: 200px; }

    .awe-sectitle { font-size: 22px; }
    .awe-sechead { flex-direction: column; align-items: flex-start; gap: 10px; }

    .awe-grid--3,
    .awe-grid--4 { grid-template-columns: 1fr; }

    .awe-quotes { grid-template-columns: 1fr; }
    .awe-quote--lead { grid-column: auto; padding: 22px; }
    .awe-quote--lead p { font-size: 16.5px; }
    .awe-quote--lead::before { font-size: 74px; }

    .awe-trial__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .awe-trial__left { flex-direction: column; align-items: flex-start; }
    .awe-ph--trial { width: 100%; }

    .awe-faq { grid-template-columns: 1fr; }
    .awe-cta__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .awe-footer__grid { grid-template-columns: 1fr; gap: 28px; }

    /* Trên mobile chỉ còn hai nút tròn, đúng bản 3b. */
    .awe-float { left: auto; right: 14px; bottom: 18px; }
    .awe-float__call,
    .awe-float__zalo { padding: 0; border-radius: 50%; }
    .awe-float__text { display: none; }
    .awe-float__icon { width: 50px; height: 50px; }
    .awe-float__call .awe-float__icon { background: var(--awe-red); color: #fff; }
}

/* --------------------------------------------------------------------------
   Trang 404 và vỏ page-plain.php.
   Ở awe.css chứ không tách file riêng: cộng lại chưa tới 1 KB, mà 404 có thể
   rơi vào bất cứ URL nào — thêm một request chặn render cho một trang lỗi thì
   không đáng.
   -------------------------------------------------------------------------- */
.awe-404__code {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--awe-muted-2);
    margin: 0 0 10px;
}
.awe-404__ways {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--awe-gap);
}
.awe-404__way {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.awe-404__way:hover {
    border-color: var(--awe-primary);
    transform: translateY(-2px);
}
.awe-404__way-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--awe-ink);
}
.awe-404__way-note {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--awe-muted);
}

/* Ô tìm kiếm ở đầu trang kết quả. Header không có ô tìm nào — người tới đây
   thường từ thanh địa chỉ hoặc từ Google — nên ô này phải đủ rõ để gõ lại. */
.awe-search {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    max-width: 520px;
}
.awe-search input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--awe-ink);
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
}
.awe-search input[type="search"]:focus {
    outline: 2px solid var(--awe-primary);
    outline-offset: 1px;
}

.awe-hits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.awe-hits a {
    display: block;
    padding: 13px 16px;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    font-weight: 600;
    color: var(--awe-ink);
    text-decoration: none;
}
.awe-hits a:hover { border-color: var(--awe-primary); color: var(--awe-primary); }

@media (max-width: 560px) {
    /* 16px để Safari iOS không tự phóng to trang khi bấm vào ô nhập. */
    .awe-search input[type="search"] { font-size: 16px; }
}

/* Nội dung do người biên tập gõ trong wp-admin: giới hạn độ dài dòng, nếu
   không chữ trải hết 1280px và không ai đọc nổi. */
.awe-plain .awe-prose { max-width: 68ch; }

@media (max-width: 900px) {
    .awe-404__ways { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .awe-404__ways { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}