:root{
  --paper:        #C8D0CA;
  --paper-card:   #F2F5F1;
  --ink:          #2A2017;
  --ink-soft:     #4D4337;
  --ink-faint:    #6B6052;
  --accent:       #9C5B3C;
  --accent-deep:  #7E4730;
  --badge-free-bg:   #DCEAD9;
  --badge-free-text: #3F6B3C;
  --badge-paid-bg:   #F1E0D8;
  --badge-paid-text: #7A3A2B;
  --line:         rgba(42,32,23,0.16);
  --shadow:       0 2px 0 rgba(42,32,23,0.08);

  --font-display: 'Be Vietnam Pro', Arial, sans-serif;
  --font-body:    'Be Vietnam Pro', Arial, sans-serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}
@media (max-width:680px){
  .wrap{ padding:0 18px; }
}

.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
}

.section{ padding:56px 0; position:relative; z-index:1; }
@media (max-width:680px){ .section{ padding:40px 0; } }

.section__head{ max-width:640px; margin-bottom:28px; }
.section__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem, 2.4vw, 2.2rem);
  line-height:1.25;
  margin:10px 0 12px;
}
.section__sub{
  color:var(--ink-soft);
  font-size:1.02rem;
  margin:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:8px;
  font-weight:600;
  font-size:0.98rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{
  background:var(--accent);
  color:#F8F3E9;
  box-shadow:var(--shadow);
}
.btn--primary:hover{ background:var(--accent-deep); }
.btn--ghost{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn--ghost:hover{ background:rgba(42,32,23,0.06); }
.btn--sm{ padding:8px 14px; font-size:0.85rem; border-radius:6px; }

.link-arrow{
  font-weight:600;
  color:var(--accent);
  border-bottom:1.5px solid currentColor;
  padding-bottom:1px;
}
.link-arrow:hover{ color:var(--accent-deep); }

/* ===================== HEADER ===================== */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(200,208,202,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:20px;
}
.logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.logo__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
  display:inline-block;
  transform:translateY(-1px);
}
.nav__links{
  display:flex;
  gap:28px;
  font-weight:500;
  font-size:0.95rem;
}
.nav__links a{ position:relative; padding:4px 0; }
.nav__links a:hover{ color:var(--accent); }
.nav__right{ display:flex; align-items:center; gap:14px; }
.nav__search{
  border:1.5px solid var(--line);
  background:var(--paper-card);
  border-radius:8px;
  padding:8px 12px;
  font-size:0.88rem;
  font-family:inherit;
  width:160px;
}
.nav__toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  font-size:1.5rem; color:var(--ink); line-height:1;
  padding:4px;
}
@media (max-width:880px){
  .nav__links{ display:none; }
  .nav__search{ display:none; }
  .nav__toggle{ display:inline-flex; }
}
.nav__mobile{
  display:none;
  flex-direction:column;
  gap:14px;
  padding:0 0 18px;
  font-weight:500;
}
.nav__mobile.is-open{ display:flex; }

/* ===================== HERO ===================== */
.hero{
  padding:48px 0 56px;
  position:relative;
  z-index:1;
}
.hero__inner{ max-width:640px; }
.hero__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.2rem, 5vw, 3.5rem);
  line-height:1.14;
  margin:12px 0 16px;
}
.hero__sub{
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:520px;
  margin:0 0 22px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:24px; }

.stat-strip{
  display:flex;
  gap:0;
  flex-wrap:wrap;
}
.stat-strip__item{
  padding:0 22px;
  border-right:1px solid var(--line);
}
.stat-strip__item:first-child{ padding-left:0; }
.stat-strip__item:last-child{ border-right:none; }
.stat-strip__value{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.4rem;
  color:var(--accent);
  display:block;
}
.stat-strip__label{
  font-size:0.82rem;
  color:var(--ink-faint);
}

/* ===================== LỘ TRÌNH (cards) ===================== */
.chapters{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width:880px){
  .chapters{ grid-template-columns:1fr; }
}
.chapters--specialty{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:1100px){
  .chapters--specialty{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .chapters--specialty{ grid-template-columns:1fr; }
}
.chapter-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px 24px 22px;
  position:relative;
  box-shadow:var(--shadow);
}
.chapter-card__tag{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  font-size:0.78rem;
  margin-bottom:8px;
}
.chapter-card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  margin:0 0 10px;
}
.chapter-card__desc{
  color:var(--ink-soft);
  font-size:0.95rem;
  margin:0 0 14px;
}
.chapter-card__list{ margin-bottom:16px; }
.chapter-card__list li{
  font-size:0.92rem;
  padding:5px 0 5px 22px;
  position:relative;
}
.chapter-card__list li::before{
  content:"✓";
  position:absolute; left:0; top:5px;
  color:var(--accent);
  font-size:0.85rem;
}
.chapter-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.85rem;
  color:var(--ink-faint);
  border-top:1px solid var(--line);
  padding-top:12px;
}

/* ===================== GRID CARDS chung (prompt / tools) ===================== */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
@media (max-width:880px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-3{ grid-template-columns:1fr; } }

.tag-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px 16px;
  transition:transform .15s ease, border-color .15s ease;
}
.tag-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.tag-card__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-bottom:8px;
}
.tag-card__label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.08rem;
}
.tag-card__count{
  font-size:0.78rem;
  color:var(--ink-faint);
  white-space:nowrap;
}
.tag-card__desc{
  font-size:0.9rem;
  color:var(--ink-soft);
  margin:0 0 12px;
}

.tool-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px 16px;
}
.tool-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.tool-card__name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.badge{
  font-size:0.72rem;
  font-weight:600;
  padding:3px 9px;
  border-radius:20px;
  white-space:nowrap;
}
.badge--free{ background:var(--badge-free-bg); color:var(--badge-free-text); }
.badge--paid{ background:var(--badge-paid-bg); color:var(--badge-paid-text); }
.tool-card__desc{ font-size:0.9rem; color:var(--ink-soft); margin:0 0 12px; }

.section-cta{ margin-top:28px; text-align:center; }

/* ===================== BÀI VIẾT (giữ lại phòng tham khảo) ===================== */
.post-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px 20px 18px;
}
.post-card__date{
  font-size:0.78rem;
  color:var(--ink-faint);
  margin-bottom:8px;
  display:block;
}
.post-card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.12rem;
  margin:0 0 10px;
  line-height:1.35;
}
.post-card__excerpt{ font-size:0.92rem; color:var(--ink-soft); margin:0 0 12px; }

/* ===================== PROMPT TREND — CARD ===================== */
.trend-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media (max-width:880px){ .trend-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .trend-grid{ grid-template-columns:1fr; } }

.trend-card{
  display:flex;
  flex-direction:column;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  transition:box-shadow 0.18s, transform 0.18s;
}
.trend-card:hover{
  box-shadow:0 6px 20px rgba(0,0,0,0.09);
  transform:translateY(-2px);
}
.trend-card__thumb{
  aspect-ratio:16/9;
  background:var(--line);
  overflow:hidden;
  flex-shrink:0;
}
.trend-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.3s;
}
.trend-card:hover .trend-card__thumb img{ transform:scale(1.04); }
.trend-card__body{
  padding:14px 16px 14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.trend-card__meta{
  font-size:0.76rem;
  color:var(--ink-faint);
  margin-bottom:7px;
}
.trend-card__cat{
  font-weight:700;
  color:var(--accent);
}
.trend-card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.0rem;
  margin:0 0 10px;
  line-height:1.38;
  color:var(--ink);
  flex:1;
}
.trend-card__excerpt{
  font-size:0.88rem;
  color:var(--ink-soft);
  margin:0 0 10px;
  line-height:1.5;
}

/* ===================== PROMPT TREND — TABS DANH MỤC ===================== */
.trend-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.trend-tab{
  display:inline-block;
  padding:7px 16px;
  border-radius:20px;
  border:1.5px solid var(--line);
  background:var(--paper-card);
  font-size:0.88rem;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  transition:all 0.15s;
}
.trend-tab:hover{ border-color:var(--accent); color:var(--accent); }
.trend-tab.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#F8F3E9;
}

/* ===================== PROMPT TREND — TRANG ĐƠN BÀI ===================== */
.trend-post{ padding:32px 0 60px; }

.trend-post__meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.82rem;
  color:var(--ink-faint);
  margin-bottom:12px;
  flex-wrap:wrap;
}
.trend-post__sep{ color:var(--line); }
.trend-post__tool{ font-weight:600; }

.trend-post__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  line-height:1.25;
  margin:0 0 24px;
  color:var(--ink);
}

.trend-post__hero{
  width:100%;
  margin-bottom:24px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--line);
}
.trend-post__hero-img{
  width:100%;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}
@media (max-width:680px){ .trend-post__hero{ border-radius:8px; } }

.trend-post__desc{
  font-size:1.02rem;
  color:var(--ink-soft);
  line-height:1.7;
  margin:0 0 28px;
}

.trend-post__prompt-box{
  background:var(--paper-card);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:20px 22px 18px;
  margin-bottom:32px;
}
.trend-post__prompt-label{
  font-size:0.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  margin-bottom:10px;
}
.trend-post__prompt-text{
  font-size:0.97rem;
  line-height:1.7;
  color:var(--ink);
  margin:0 0 16px;
  white-space:pre-wrap;
}
.trend-post__copy-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#F8F3E9;
  border:none;
  border-radius:8px;
  padding:9px 20px;
  font-size:0.9rem;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:background 0.15s;
}
.trend-post__copy-btn:hover{ background:var(--accent-deep); }
.trend-post__copy-btn.is-copied{ background:var(--accent-deep); }

.trend-post__cta{
  border-top:1px solid var(--line);
  padding-top:28px;
  margin-top:4px;
}
.trend-post__cta-text{
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  margin:0 0 14px;
}
.trend-post__cta-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.trend-btn--facebook{
  background:#1877F2;
  color:#fff;
  border:none;
}
.trend-btn--facebook:hover{ background:#1565d8; color:#fff; }
.trend-btn--zalo{
  background:#0068FF;
  color:#fff;
  border:none;
}
.trend-btn--zalo:hover{ background:#0052cc; color:#fff; }

/* ===================== LƯU BÚT ===================== */
.quotes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:880px){ .quotes{ grid-template-columns:1fr; } }
.quote-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 20px;
  position:relative;
}
.quote-card__text{
  font-size:0.97rem;
  color:var(--ink);
  margin:0 0 14px;
}
.quote-card__who{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--accent);
  font-size:1.0rem;
}
.quote-card__role{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.8rem;
  color:var(--ink-faint);
}

/* ===================== CTA CUỐI ===================== */
.final-cta{
  text-align:center;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:44px 24px;
}
.final-cta__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem);
  margin:0 0 10px;
}
.final-cta__sub{ color:var(--ink-soft); margin:0 0 22px; }

/* ===================== FOOTER ===================== */
footer{
  border-top:1px solid var(--line);
  padding:40px 0 28px;
  position:relative; z-index:1;
}
.footer__grid{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:28px;
  margin-bottom:28px;
}
.footer__col h4{
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-faint);
  margin:0 0 12px;
}
.footer__col ul li{ margin-bottom:8px; font-size:0.92rem; }
.footer__col ul li a:hover{ color:var(--accent); }
.footer__contact{ display:flex; flex-direction:column; gap:10px; }
.btn-contact{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.85rem;
  font-weight:600;
  padding:8px 14px;
  border:1.5px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  width:fit-content;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.btn-contact:hover{ border-color:var(--accent); color:var(--accent); }
.btn-contact--follow{
  background:var(--accent);
  color:#F8F3E9;
  border-color:var(--accent);
}
.btn-contact--follow:hover{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  color:#F8F3E9;
}
.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:0.85rem;
  color:var(--ink-faint);
  border-top:1px solid var(--line);
  padding-top:18px;
}

/* ===================== TRANG BÀI HỌC ===================== */
.breadcrumb{
  font-size:0.85rem;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb__sep{ opacity:0.5; }
.breadcrumb__current{ color:var(--ink-soft); }

.lesson-head{ max-width:680px; margin-bottom:28px; }
.lesson-head__chapter{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  font-size:0.78rem;
  display:inline-block;
}
.lesson-head__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  line-height:1.25;
  margin:10px 0 12px;
}
.lesson-head__meta{
  font-size:0.88rem;
  color:var(--ink-faint);
}

.lesson-prose{
  max-width:680px;
  font-size:1.02rem;
  color:var(--ink);
}
.lesson-prose h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.35rem;
  margin:30px 0 12px;
}
.lesson-prose p{ margin:0 0 16px; color:var(--ink); }
.lesson-prose ul{ margin:0 0 16px; padding-left:0; }
.lesson-prose ul li{
  position:relative;
  padding:0 0 10px 22px;
  color:var(--ink);
}
.lesson-prose ul li::before{
  content:"—";
  position:absolute; left:0; top:0;
  color:var(--accent);
}

.callout{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:6px;
  padding:18px 20px;
  margin:24px 0 28px;
}
.callout__label{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  font-size:0.82rem;
  display:block;
  margin-bottom:10px;
}
.callout ul li::before{ color:var(--accent); }
.callout p:last-child, .callout ul:last-child{ margin-bottom:0; }

.example-box{
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  margin:0 0 16px;
  font-size:0.95rem;
  color:var(--ink-soft);
}
.example-box__label{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-faint);
  display:block;
  margin-bottom:6px;
}

.lesson-footer{
  max-width:680px;
  border-top:1px solid var(--line);
  margin-top:36px;
  padding-top:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.lesson-complete-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  border-radius:8px;
  font-weight:600;
  font-size:0.95rem;
  border:1.5px solid var(--accent);
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lesson-complete-btn:hover{ background:rgba(156,91,60,0.1); }
.lesson-complete-btn.is-done{
  background:var(--accent);
  border-color:var(--accent);
  color:#F8F3E9;
}
.lesson-complete-btn__icon{ font-size:1rem; }

.lesson-nav{
  max-width:680px;
  margin-top:16px;
}

/* ===================== TRANG LỘ TRÌNH HỌC (danh sách) ===================== */
.chapter-block{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px 26px 8px;
  margin-bottom:20px;
}
.chapter-block__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.chapter-block__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
}
.chapter-block__progress{
  font-size:0.85rem;
  color:var(--ink-faint);
  white-space:nowrap;
}
.chapter-block__desc{
  color:var(--ink-soft);
  font-size:0.92rem;
  margin:4px 0 14px;
}
.progress-bar{
  height:6px;
  background:var(--line);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:18px;
}
.progress-bar__fill{
  height:100%;
  background:var(--accent);
  border-radius:4px;
}

.lesson-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 0;
  border-top:1px solid var(--line);
}
.lesson-row:first-of-type{ border-top:none; }
.lesson-row__left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.lesson-row__check{
  width:20px; height:20px;
  border-radius:50%;
  border:1.5px solid var(--line);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.7rem;
  color:#F8F3E9;
}
.lesson-row__check.is-done{
  background:var(--accent);
  border-color:var(--accent);
}
.lesson-row__title{
  font-weight:600;
  font-size:0.96rem;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lesson-row__title:hover{ color:var(--accent); }
.lesson-row__title--locked{
  color:var(--ink-faint);
  font-weight:500;
  cursor:default;
}
.lesson-row__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.lesson-row__time{
  font-size:0.82rem;
  color:var(--ink-faint);
  white-space:nowrap;
}
.badge--soon{
  background:rgba(42,32,23,0.08);
  color:var(--ink-faint);
}

/* ===================== MENU SỔ XUỐNG (Lộ trình học) ===================== */
.nav__dropdown{ position:relative; }
.nav__dropdown-trigger{
  background:none;
  border:none;
  font:inherit;
  font-weight:500;
  font-size:0.95rem;
  color:var(--ink);
  cursor:pointer;
  padding:4px 0;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.nav__dropdown-trigger:hover{ color:var(--accent); }
.nav__dropdown-trigger::after{
  content:"▾";
  font-size:0.65rem;
  transition:transform .15s ease;
}
.nav__dropdown.is-open .nav__dropdown-trigger::after{ transform:rotate(180deg); }

.nav__dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
  min-width:230px;
  box-shadow:0 10px 24px rgba(42,32,23,0.14);
  z-index:50;
}
.nav__dropdown.is-open .nav__dropdown-menu{ display:block; }
.nav__dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:6px;
  font-size:0.9rem;
  font-weight:500;
  color:var(--ink);
}
.nav__dropdown-menu a:hover{ background:rgba(156,91,60,0.08); color:var(--accent); }

/* Trên mobile: sổ ra ngay trong dòng, không phải lớp phủ nổi */
.nav__dropdown--mobile .nav__dropdown-menu{
  position:static;
  box-shadow:none;
  border:none;
  background:none;
  margin-top:6px;
  padding:0 0 0 14px;
  min-width:0;
}
.nav__dropdown--mobile .nav__dropdown-menu a{ padding:8px 0; }

/* ===================== SIDEBAR BÀI HỌC (trước/sau) ===================== */
.lesson-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:40px;
  align-items:start;
}
@media (max-width:960px){
  .lesson-layout{ grid-template-columns:1fr; }
}
.lesson-sidebar{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:88px;
}
@media (max-width:960px){
  .lesson-sidebar{ position:static; }
}
.sidebar-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 18px 16px;
}
.sidebar-card__label{
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:8px;
}
.sidebar-card__title{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.98rem;
  margin:0 0 6px;
  color:var(--ink);
}
.sidebar-card__title:hover{ color:var(--accent); }
.sidebar-card__desc{
  font-size:0.85rem;
  color:var(--ink-soft);
  margin:0;
}
.sidebar-card--locked .sidebar-card__title{
  color:var(--ink-faint);
  cursor:default;
}
.sidebar-card--locked .sidebar-card__title:hover{ color:var(--ink-faint); }
.sidebar-card--locked .badge--soon{ margin-top:6px; display:inline-block; }

/* ===================== CÔNG CỤ LIÊN QUAN (link truy cập trong bài) ===================== */
.related-tools{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px 14px;
  margin:0 0 16px;
}
.related-tools__label{
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:8px;
}
.related-tools__list{ margin:0; }
.related-tools__list li{
  font-size:0.92rem;
  color:var(--ink-soft);
  padding:8px 0;
  border-top:1px solid var(--line);
}
.related-tools__list li:first-child{ border-top:none; }
.related-tools__list a{
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.related-tools__list a:hover{ color:var(--accent); border-color:var(--accent); }

/* ===================== PROMPT MẪU + NÚT COPY ===================== */
.prompt-examples{ margin:28px 0 8px; }
.prompt-examples__label{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:14px;
}
.prompt-card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:8px;
  padding:16px 18px;
  margin-bottom:12px;
}
.prompt-card__usecase{
  display:block;
  font-size:0.8rem;
  font-weight:600;
  color:var(--ink-faint);
  margin-bottom:8px;
}
.prompt-card__text{
  font-size:0.92rem;
  color:var(--ink);
  margin:0 0 12px;
  white-space:pre-wrap;
  line-height:1.55;
}
.prompt-card__copy{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.82rem;
  font-weight:600;
  font-family:inherit;
  padding:7px 14px;
  border-radius:6px;
  border:1.5px solid var(--accent);
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.prompt-card__copy:hover{ background:rgba(156,91,60,0.1); }
.prompt-card__copy.is-copied{
  background:var(--accent);
  color:#F8F3E9;
}

/* ===================== THƯ VIỆN PROMPT — landing 7 khối ngành nghề ===================== */
.tag-card--featured{
  grid-column:1 / -1;
  border:1.5px solid var(--accent);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.tag-card--featured .tag-card__top{ margin-bottom:4px; }
.tag-card--featured .tag-card__desc{ margin-bottom:0; }
.tag-card--featured .link-arrow{ white-space:nowrap; }

/* ===================== THƯ VIỆN PROMPT — thanh lọc ===================== */
.specialty-back{ display:inline-block; margin-bottom:18px; }

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:24px 0 20px;
  padding:18px 20px;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:10px;
}
.filter-bar__group{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:160px;
}
.filter-bar__label{
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.filter-bar select{
  border:1.5px solid var(--line);
  background:var(--paper);
  border-radius:8px;
  padding:8px 10px;
  font-size:0.86rem;
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
}
.filter-bar select:focus{ outline:none; border-color:var(--accent); }
@media (max-width:680px){
  .filter-bar{ flex-direction:column; }
  .filter-bar__group{ width:100%; }
}

.prompt-results-meta{
  font-size:0.85rem;
  color:var(--ink-faint);
  margin-bottom:16px;
}

.prompt-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}
.tag-chip{
  font-size:0.74rem;
  font-weight:600;
  padding:3px 10px;
  border-radius:20px;
  background:rgba(156,91,60,0.1);
  color:var(--accent-deep);
  white-space:nowrap;
}

.prompt-empty{
  text-align:center;
  padding:48px 20px;
  color:var(--ink-faint);
  font-size:0.95rem;
  border:1px dashed var(--line);
  border-radius:10px;
}

/* ===================== SO SÁNH LỆNH CHƯA TỐT / ĐÃ SỬA ===================== */
.compare-prompt{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:20px 0 28px;
}
@media (max-width:680px){
  .compare-prompt{ grid-template-columns:1fr; }
}
.compare-prompt__col{
  border-radius:10px;
  padding:16px 18px;
  border:1px solid var(--line);
}
.compare-prompt__col--bad{ background:var(--badge-paid-bg); }
.compare-prompt__col--good{ background:var(--badge-free-bg); }
.compare-prompt__label{
  display:block;
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.compare-prompt__col--bad .compare-prompt__label{ color:var(--badge-paid-text); }
.compare-prompt__col--good .compare-prompt__label{ color:var(--badge-free-text); }
.compare-prompt__text{
  font-size:0.9rem;
  color:var(--ink);
  margin:0 0 10px;
  font-style:italic;
  line-height:1.55;
}
.compare-prompt__why{
  font-size:0.84rem;
  margin:0;
  line-height:1.5;
}
.compare-prompt__col--bad .compare-prompt__why{ color:var(--badge-paid-text); }
.compare-prompt__col--good .compare-prompt__why{ color:var(--badge-free-text); }


/* ===================== LƯU ĐỒ QUY TRÌNH (dích dắc, dùng Grid) ===================== */
.flow-grid{
  display:grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  margin:24px 0 32px;
  row-gap:8px;
}
.flow-grid__step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 6px 10px;
}
.flow-grid__node{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--accent);
  color:#F8F3E9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
  flex-shrink:0;
  margin-bottom:10px;
}
.flow-grid__title{
  font-weight:700;
  font-size:0.85rem;
  color:var(--ink);
  margin-bottom:4px;
}
.flow-grid__desc{
  font-size:0.78rem;
  color:var(--ink-soft);
  line-height:1.5;
}
.flow-grid__arrow-h{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:1.2rem;
  padding-top:22px;
}
.flow-grid__arrow-v{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:1.2rem;
}
/* Vị trí cột/dòng dùng chung cho mọi lưu đồ */
.gc1{ grid-column:1; } .gc2{ grid-column:2; } .gc3{ grid-column:3; } .gc4{ grid-column:4; } .gc5{ grid-column:5; }
.gr1{ grid-row:1; } .gr2{ grid-row:2; } .gr3{ grid-row:3; } .gr4{ grid-row:4; } .gr5{ grid-row:5; } .gr6{ grid-row:6; } .gr7{ grid-row:7; }
@media (max-width:680px){
  .flow-grid{ grid-template-columns:1fr; row-gap:0; }
  .flow-grid [class*="gc"]{ grid-column:1; }
  .flow-grid [class*="gr"]{ grid-row:auto; }
  .flow-grid__arrow-h{ transform:rotate(90deg); padding:2px 0; }
  .flow-grid__arrow-h.is-rev{ transform:rotate(-90deg); }
}

/* ===================== THẺ NGÀNH NGHỀ NỔI BẬT (thẻ cuối, kéo full hàng) ===================== */
#promptGrid .tag-card:last-child{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding:22px 26px;
  border-width:1.5px;
  border-color:var(--accent);
}
#promptGrid .tag-card:last-child .tag-card__top{
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin-bottom:0;
  min-width:140px;
}
#promptGrid .tag-card:last-child .tag-card__desc{
  margin:0;
  flex:1;
  min-width:200px;
}
#promptGrid .tag-card:last-child .link-arrow{
  white-space:nowrap;
}
@media (max-width:560px){
  #promptGrid .tag-card:last-child{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  #promptGrid .tag-card:last-child .tag-card__top{
    flex-direction:row;
    justify-content:space-between;
    width:100%;
  }
}

/* ===================== THƯ VIỆN PROMPT — GIÁO VIÊN (layout nâng cấp) =====================
   Dùng riêng cho ngành Giáo viên (10 Nhóm x 12 prompt/nhóm) — không ảnh hưởng
   6 ngành còn lại vẫn dùng .filter-bar/.prompt-card cũ. Xem prompt-library.html
   và prompt-giao-vien-data.js.

   Lưới điều hướng Nhóm — CSS Grid với SỐ CỘT TÍNH ĐỘNG theo tổng số bước,
   luôn full-bleed 2 bên bất kể 8, 9, 10 hay 12 nhóm:
     - Số nhóm CHẴN: cột = n/2 → đúng 2 hàng đầy, không dư.
     - Số nhóm LẺ: cột = (n-1)/2 + 1 → nhóm cuối rơi vào cột ngoài cùng,
       chiếm chiều cao gấp đôi (2 hàng) thay vì để trống 1 ô.
   Vị trí từng ô (grid-column/grid-row) được JS tính và gán inline
   (xem hàm computeGridLayout trong prompt-library.html). */
.step-grid{
  display:grid;
  gap:10px;
  margin-bottom:28px;
  grid-auto-rows:minmax(64px, auto);
}
.step-cell{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 14px;
  border-radius:10px;
  border:1.5px solid var(--line);
  background:var(--paper-card);
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  min-height:64px;
  transition:all .15s;
}
.step-cell:hover{ border-color:var(--accent); }
.step-cell.is-span2{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.step-cell__num{
  flex-shrink:0;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(156,91,60,0.12);
  color:var(--accent-deep);
  font-weight:700;
  font-size:0.76rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  transition:all .15s;
}
.step-cell__label{
  font-size:0.82rem;
  font-weight:600;
  color:var(--ink-soft);
  line-height:1.35;
}
.step-cell.is-active{
  background:var(--accent);
  border-color:var(--accent);
}
.step-cell.is-active .step-cell__num{ background:rgba(255,255,255,0.25); color:#fff; }
.step-cell.is-active .step-cell__label{ color:#F8F3E9; }
.step-cell.is-disabled{
  opacity:0.45;
  cursor:not-allowed;
  pointer-events:none;
}
/* Mobile: bỏ layout full-bleed động, quay về lưới 2 cột đơn giản, auto-flow —
   5-6 cột trên điện thoại sẽ quá chật để đọc tên nhóm. */
@media (max-width:680px){
  .step-grid{ grid-template-columns:repeat(2, 1fr) !important; }
  .step-cell{ grid-column:auto !important; grid-row:auto !important; }
  .step-cell.is-span2{ flex-direction:row; align-items:flex-start; text-align:left; }
}

/* Khối giới thiệu Nhóm (Mục tiêu / Cách dùng / Nguyên tắc sư phạm) */
.group-intro{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:28px;
}
.group-intro h2{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--ink);
  margin:0 0 12px;
}
.group-intro p{
  font-size:0.9rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0 0 8px;
}
.group-intro p:last-child{ margin-bottom:0; }
.group-intro strong{ color:var(--ink); }

/* Thẻ prompt chuyên sâu — thu gọn/mở rộng bằng <details> gốc (name= để chỉ
   1 prompt mở tại 1 thời điểm trong cùng 1 nhóm — trình duyệt tự đóng thẻ
   đang mở khi bấm mở thẻ khác, không cần JS riêng). */
.expert-prompt{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
}
.expert-prompt__summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-family:inherit;
}
.expert-prompt__summary::-webkit-details-marker{ display:none; }
.expert-prompt__num{
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(156,91,60,0.12);
  color:var(--accent-deep);
  font-weight:700;
  font-size:0.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
}
.expert-prompt__summary-body{ flex:1; min-width:0; }
.expert-prompt__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.98rem;
  color:var(--ink);
  margin:0 0 4px;
  line-height:1.4;
}
.expert-prompt__preview{
  font-size:0.84rem;
  color:var(--ink-faint);
  margin:0;
  line-height:1.5;
}
.expert-prompt__chevron{
  flex-shrink:0;
  color:var(--accent);
  font-size:1rem;
  transition:transform .2s;
  margin-top:4px;
}
.expert-prompt[open] .expert-prompt__chevron{ transform:rotate(180deg); }

.expert-prompt__body{
  padding:0 18px 20px 18px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.expert-prompt__field{ margin-bottom:14px; }
.expert-prompt__field:last-of-type{ margin-bottom:16px; }
.expert-prompt__field-label{
  display:block;
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:6px;
}
.expert-prompt__field ul{
  margin:0;
  padding-left:18px;
}
.expert-prompt__field ul li{
  font-size:0.88rem;
  color:var(--ink);
  line-height:1.6;
  margin-bottom:4px;
}
.expert-prompt__role{
  display:inline-block;
  font-size:0.78rem;
  font-weight:600;
  background:rgba(156,91,60,0.1);
  color:var(--accent-deep);
  padding:3px 10px;
  border-radius:20px;
  margin-bottom:14px;
}
.expert-prompt__copy{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.82rem;
  font-weight:600;
  font-family:inherit;
  padding:8px 16px;
  border-radius:6px;
  border:1.5px solid var(--accent);
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.expert-prompt__copy:hover{ background:rgba(156,91,60,0.1); }
.expert-prompt__copy.is-copied{
  background:var(--accent);
  color:#F8F3E9;
}