/* Ann Academy — họa tiết nền và chữ tiêu đề. Nạp sau chuyen-dong.css. */

/* ---------- Chữ ---------- */
:root{--font-tieu-de:"Lora",Georgia,"Times New Roman",serif}
h1,h2,h3,.muc-tieu-de,.the-khoa h3,.co-trang h3,.su-menh .chu p:first-child{font-family:var(--font-tieu-de);font-weight:600;letter-spacing:-.005em}
.muc-tieu-de{font-weight:500}
.su-menh .chu p:first-child{font-weight:500;font-style:italic}
.dan-lon{font-family:var(--font-tieu-de);font-weight:500;font-size:19px;line-height:30px;color:var(--xanh-dam)}
@media (min-width:720px){.dan-lon{font-size:22px;line-height:34px}.muc-tieu-de{font-size:34px}}

/* ---------- Vân giấy mỏng trên toàn trang ---------- */
body{position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}

/* ---------- Họa tiết lá ở màn mở đầu ---------- */
.mo-dau{position:relative;isolation:isolate}
.mo-dau .ht-nen{position:absolute;inset:0;width:100%;height:100%;color:var(--xanh);opacity:.07;z-index:-2;
  mask-image:radial-gradient(ellipse at 70% 60%, transparent 30%, #000 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 60%, transparent 30%, #000 75%)}

/* ---------- Vệt màu nước ---------- */
.vet-mau{position:absolute;border-radius:48% 52% 55% 45%/55% 45% 55% 45%;filter:blur(2px);pointer-events:none;z-index:-1;mix-blend-mode:multiply}
.vet-1{width:46vw;max-width:620px;aspect-ratio:1.25;right:-10vw;top:-12%;background:radial-gradient(closest-side, rgba(249,236,220,.95), rgba(249,236,220,.5) 60%, transparent)}
.vet-2{width:28vw;max-width:360px;aspect-ratio:1;left:-8vw;bottom:-18%;background:radial-gradient(closest-side, rgba(201,219,229,.9), rgba(201,219,229,.4) 60%, transparent)}
.su-menh-muc{position:relative;isolation:isolate}
.vet-3{width:420px;height:420px;left:-120px;top:-40px;background:radial-gradient(closest-side, rgba(249,236,220,.9), rgba(249,236,220,.35) 55%, transparent)}
@media (max-width:719px){.vet-1{width:80vw;right:-25vw;top:30%}.vet-2{display:none}.vet-3{width:280px;height:280px;left:-120px}}

/* ---------- Nét vẽ tay dưới tiêu đề thay gạch thẳng ---------- */
.muc-tieu-de::after{height:6px;width:64px;border-radius:0;background:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 6'%3E%3Cpath d='M1 4c12-3 24-3 31-2s21 1 31-1' fill='none' stroke='%23d2822c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat}

/* ---------- Thẻ khóa: góc có lá mờ ---------- */
.the-khoa .than{position:relative;overflow:hidden}
.the-khoa .than::after{content:"";position:absolute;right:-30px;bottom:-30px;width:160px;height:160px;opacity:.06;color:var(--xanh);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23093f5c' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M50 50c0-18-16-26-26-18 2 16 14 24 26 18zm0 0c0-18 16-26 26-18-2 16-14 24-26 18zm0 0c-18 0-26 16-18 26 16-2 24-14 18-26zm0 0c18 0 26 16 18 26-16-2-24-14-18-26zM50 50v34'/%3E%3C/g%3E%3C/svg%3E") no-repeat;background-size:contain}


/* ---------- Bóng đổ nét chì dưới tranh gia đình (15/10/2026) ----------
   Đã thử vòm hoa lá rồi nhành lá ở góc; góp ý thấy rối và không đẹp nên bỏ, chỉ giữ bóng.
   bong-ca-nha.webp 800x600 (agent minh họa vẽ): mảng gạch chì tượng trưng dưới chân, lệch về sau lưng chếch phải.
   Tranh ghep-ca-nha (2:3) nằm giữa khung, x=200..600, nên khung bóng cao bằng tranh, rộng 4/3 chiều cao, căn giữa. */
.vang-sang{inset:0;width:auto;height:auto;margin:0;border-radius:0;background:none}
.vang-sang::after{content:"";position:absolute;bottom:0;left:50%;width:400px;height:300px;transform:translateX(-50%);
  background:url(/hinh/bong-ca-nha.webp?v=2) no-repeat 50% 100%/contain}
@media (min-width:720px){.vang-sang::after{width:560px;height:420px}}

/* Bìa khóa học tạm (tranh gia đình): cùng bóng nét chì. Lớp bóng tính theo hộp nội dung (trừ padding-top) để cao bằng tranh. */
.the-khoa .bia.bia-tam,.khoa .bia-lon{background:url(/hinh/bong-ca-nha.webp?v=2) no-repeat 50% 100%/auto 100%,var(--vang-nhat);background-origin:content-box}

/* Cùng bóng chì cho hai tranh phía dưới. Tranh nằm sát mép trái khung bóng, bóng tràn sang phải,
   nên nới padding-right đúng phần tràn rồi kéo margin âm để bố cục không đổi.
   Sứ mệnh: bong-me-om-bt.webp 600x600, tranh 400x600 ở x=0 → tranh cao 320 rộng 213, phần tràn 107. */
@media (min-width:720px){
  .su-menh-hinh{box-sizing:content-box;width:213px;height:320px;padding-right:107px;margin-right:-107px;
    background:url(/hinh/bong-me-om-bt.webp) no-repeat 0 100%/auto 100%}
}
/* Người phụ trách: bong-co-trang.webp 640x440, tranh 440x440 ở x=0 → phần tràn = 200/440 bề rộng tranh. */
.co-trang .anh-co.anh-that{box-sizing:content-box;width:180px;height:180px;max-width:none;padding-right:82px;margin-right:-82px;
  background:url(/hinh/bong-co-trang.webp) no-repeat 0 100%/auto 100%}
@media (min-width:720px){.co-trang .anh-co.anh-that{width:220px;height:220px;padding-right:100px;margin-right:-100px}}