/* GIAO DIỆN GIẤY CỔ – phần nội dung dưới ảnh Đức Phật: nền nâu sẫm, thẻ giấy da, khung tranh mạ vàng, mảnh giấy xé, mảnh báo cũ in câu Pāli.
   Nạp SAU css/chung.css: đặt lại các biến màu theo hai vùng –
     • trên nền trang (body): chữ màu kem, đường kẻ sáng mờ, màu nhấn vàng;
     • trên giấy (.o, .dCard, .canh, hộp Giới thiệu, bảng chữ…): chữ nâu mực, màu nhấn theo thứ tiếng (Thái xanh, Myanmar nâu đỏ).
   Mặc định là nền nâu sẫm (giống mẫu); nút ◐ đổi sang nền giấy kraft sáng (data-theme="light"). */

:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#2a1d14; --card:#3a2a1c; --ink:#f1e3c4; --nen-chu:#f1e3c4; --muted:#c9b28a; --line:rgba(241,227,196,.22); --navy:#f0d58a; --gold:#d6a84a;
  --c-nen:#f0cf7a; --tren-c:#2a1d14; --vien:#8a6420;
  --nen-anh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .06 0 0 0 0 .02 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 15% 8%,rgba(150,100,50,.28),transparent 55%), radial-gradient(ellipse at 90% 55%,rgba(120,80,40,.3),transparent 55%), radial-gradient(ellipse at 30% 95%,rgba(110,70,35,.3),transparent 50%);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#cfb88c; --card:#f3e6c6; --ink:#33210f; --nen-chu:#33210f; --muted:#5b4529; --line:rgba(51,33,15,.25); --navy:#6b3d12; --gold:#a8761f;
  --c-nen:#7a4b10; --tren-c:#fbf1d8; --vien:#7a5418;
  --nen-anh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 15% 8%,rgba(255,240,200,.45),transparent 55%), radial-gradient(ellipse at 90% 60%,rgba(120,80,30,.18),transparent 55%);
}
:root{
  --giay-chu:#3a2616; --giay-mo:#6d5537; --giay-ke:#c3a36a; --giay-navy:#5b3518;
  --giay:#ecd9b0;
  --giay-nen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(160deg,#f3e5c3,#e6cd98 58%,#dbbd83);
  --f-tieu:"Playfair Display","Noto Serif",Georgia,serif;
  /* khung tranh mạ vàng: cắt 9 mảnh (border-image), góc có hoa thị, cạnh có hạt cườm */
  --khung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f8e3a3'/%3E%3Cstop offset='.28' stop-color='%23b98a33'/%3E%3Cstop offset='.5' stop-color='%23f2d27c'/%3E%3Cstop offset='.75' stop-color='%23926620'/%3E%3Cstop offset='1' stop-color='%23e6c56f'/%3E%3C/linearGradient%3E%3CradialGradient id='r' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fff3c8'/%3E%3Cstop offset='.45' stop-color='%23dcab47'/%3E%3Cstop offset='1' stop-color='%23704812'/%3E%3C/radialGradient%3E%3Cg id='c'%3E%3Ccircle cx='20' cy='20' r='14' fill='url(%23r)' stroke='%234d310a' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='20' r='7.5' fill='none' stroke='%23fff0b8' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%234d310a'/%3E%3Cpath d='M20 6v-4M6 20h-4M10 10l-3-3' stroke='%234d310a' stroke-width='1.4'/%3E%3Cpath d='M33 6c4 0 7 3 6 7-1 3-5 3-6 0' fill='%23f6dc8c' stroke='%234d310a' stroke-width='1.1'/%3E%3Cpath d='M6 33c0 4 3 7 7 6 3-1 3-5 0-6' fill='%23f6dc8c' stroke='%234d310a' stroke-width='1.1'/%3E%3C/g%3E%3C/defs%3E%3Crect x='1' y='1' width='118' height='118' fill='url(%23g)' stroke='%233d2607' stroke-width='2'/%3E%3Crect x='7' y='7' width='106' height='106' fill='none' stroke='%23fff0b8' stroke-width='1.5'/%3E%3Crect x='12' y='12' width='96' height='96' fill='none' stroke='%235e3d0d' stroke-width='3'/%3E%3Crect x='18' y='18' width='84' height='84' fill='none' stroke='%23fbe6a2' stroke-width='1.4'/%3E%3Crect x='26' y='26' width='68' height='68' fill='none' stroke='%237a5214' stroke-width='1.2' stroke-dasharray='1.6 3.4'/%3E%3Crect x='36' y='36' width='48' height='48' fill='none' stroke='%233d2607' stroke-width='5'/%3E%3Cuse xlink:href='%23c'/%3E%3Cuse xlink:href='%23c' transform='translate(120 0) scale(-1 1)'/%3E%3Cuse xlink:href='%23c' transform='translate(0 120) scale(1 -1)'/%3E%3Cuse xlink:href='%23c' transform='translate(120 120) scale(-1 -1)'/%3E%3C/svg%3E");
  --vo-so:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cdefs%3E%3CradialGradient id='r' cx='.5' cy='.9' r='.9'%3E%3Cstop offset='0' stop-color='%23fff3c8'/%3E%3Cstop offset='.5' stop-color='%23deae4c'/%3E%3Cstop offset='1' stop-color='%23744b12'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M32 3C21 3 13 12 11 26h42C51 12 43 3 32 3z' fill='url(%23r)' stroke='%234d310a' stroke-width='1.4'/%3E%3Cpath d='M32 26V6M32 26L22 9M32 26L42 9M32 26L15 16M32 26L49 16' stroke='%235e3d10' stroke-width='1.1' fill='none'/%3E%3Cpath d='M11 26c-6 0-9 3-9 5 3 0 6-1 9-3M53 26c6 0 9 3 9 5-3 0-6-1-9-3' fill='%23f2d27c' stroke='%234d310a' stroke-width='1.1'/%3E%3Crect x='9' y='25' width='46' height='5' rx='2' fill='%23c9973f' stroke='%234d310a' stroke-width='1.1'/%3E%3C/svg%3E");
  /* tờ giấy cuộn: thân giấy mép rách, ố vàng (kéo giãn theo thẻ); đầu cuộn tròn có vòng xoắn (cắt 9 mảnh theo chiều dọc) */
  --giay-cuon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E %3Cdefs%3E %3CradialGradient id='g' cx='.45' cy='.45' r='.75'%3E%3Cstop offset='0' stop-color='%23f4e4bd'/%3E%3Cstop offset='.55' stop-color='%23e7cf9a'/%3E%3Cstop offset='.85' stop-color='%23cfae6c'/%3E%3Cstop offset='1' stop-color='%23a77f42'/%3E%3C/radialGradient%3E %3CradialGradient id='o1' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23a5793a' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23a5793a' stop-opacity='0'/%3E%3C/radialGradient%3E %3Cfilter id='r' x='-5%25' y='-10%25' width='110%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .02' numOctaves='3' seed='4' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E %3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .26 0 0 0 0 .1 0 0 0 .22 0'/%3E%3CfeComposite in2='SourceGraphic' operator='in'/%3E%3C/filter%3E %3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E %3CclipPath id='c'%3E%3Cpath d='M0.0 7.2 L6.4 10.5 L12.2 7.6 L18.7 5.3 L24.7 8.4 L32.5 4.7 L37.3 4.6 L45.2 8.9 L48.4 10.9 L57.2 8.6 L63.9 5.1 L67.0 7.7 L70.4 5.3 L74.8 4.2 L80.6 7.1 L88.7 7.6 L95.5 7.5 L102.5 7.2 L107.1 11.0 L116.1 9.9 L123.4 6.2 L127.7 6.0 L131.2 9.4 L136.6 9.9 L141.9 10.7 L150.0 4.0 L154.2 10.4 L160.0 10.9 L165.4 4.5 L172.2 9.4 L176.8 4.6 L181.8 10.7 L189.4 4.8 L193.8 4.7 L197.2 9.6 L201.3 7.9 L207.0 5.3 L214.3 4.9 L221.2 4.8 L226.7 5.5 L231.4 10.8 L239.2 6.1 L247.5 5.5 L252.8 10.0 L259.7 4.7 L268.6 5.5 L273.2 9.4 L278.2 6.1 L281.6 4.6 L288.1 5.7 L294.7 6.6 L300.4 10.7 L306.3 8.0 L314.5 5.3 L318.4 10.4 L326.4 5.7 L330.5 9.2 L339.1 5.4 L347.8 10.2 L354.5 7.0 L358.1 4.3 L366.9 5.7 L374.1 5.8 L382.0 8.2 L386.8 5.2 L394.1 4.5 L398.5 7.9 L400.0 8.3 L400.0 194.7 L398.5 192.7 L395.4 194.7 L389.5 194.6 L382.4 189.3 L374.6 191.4 L367.8 192.9 L361.0 195.7 L357.2 194.3 L349.2 195.8 L343.5 195.0 L340.4 190.5 L335.5 192.0 L328.3 195.7 L320.0 195.8 L316.6 192.8 L307.7 190.1 L302.8 192.5 L296.0 193.1 L291.8 194.1 L286.0 194.8 L281.4 189.3 L274.1 190.1 L266.1 192.5 L262.3 193.8 L255.8 193.3 L247.5 189.6 L239.7 193.0 L235.5 191.3 L230.5 189.8 L224.9 191.4 L216.4 194.8 L212.2 191.3 L207.4 195.9 L202.9 189.6 L196.2 192.5 L189.0 194.4 L183.1 191.8 L179.9 190.7 L176.4 190.1 L170.8 191.9 L163.4 193.3 L156.0 189.8 L147.0 191.5 L143.6 191.7 L137.1 193.3 L130.3 192.0 L122.1 190.5 L116.6 189.9 L108.2 191.2 L103.1 189.6 L95.4 191.1 L87.9 189.7 L80.5 192.2 L77.1 189.0 L72.1 190.9 L66.3 191.5 L63.1 189.3 L55.9 189.6 L52.8 195.8 L49.0 191.9 L41.8 191.4 L32.9 189.8 L27.8 195.1 L21.3 193.4 L17.3 195.6 L11.6 194.1 L8.5 194.6 L0.0 194.0 Z'/%3E%3C/clipPath%3E %3C/defs%3E %3Cg filter='url(%23r)'%3E %3Cpath d='M0.0 7.2 L6.4 10.5 L12.2 7.6 L18.7 5.3 L24.7 8.4 L32.5 4.7 L37.3 4.6 L45.2 8.9 L48.4 10.9 L57.2 8.6 L63.9 5.1 L67.0 7.7 L70.4 5.3 L74.8 4.2 L80.6 7.1 L88.7 7.6 L95.5 7.5 L102.5 7.2 L107.1 11.0 L116.1 9.9 L123.4 6.2 L127.7 6.0 L131.2 9.4 L136.6 9.9 L141.9 10.7 L150.0 4.0 L154.2 10.4 L160.0 10.9 L165.4 4.5 L172.2 9.4 L176.8 4.6 L181.8 10.7 L189.4 4.8 L193.8 4.7 L197.2 9.6 L201.3 7.9 L207.0 5.3 L214.3 4.9 L221.2 4.8 L226.7 5.5 L231.4 10.8 L239.2 6.1 L247.5 5.5 L252.8 10.0 L259.7 4.7 L268.6 5.5 L273.2 9.4 L278.2 6.1 L281.6 4.6 L288.1 5.7 L294.7 6.6 L300.4 10.7 L306.3 8.0 L314.5 5.3 L318.4 10.4 L326.4 5.7 L330.5 9.2 L339.1 5.4 L347.8 10.2 L354.5 7.0 L358.1 4.3 L366.9 5.7 L374.1 5.8 L382.0 8.2 L386.8 5.2 L394.1 4.5 L398.5 7.9 L400.0 8.3 L400.0 194.7 L398.5 192.7 L395.4 194.7 L389.5 194.6 L382.4 189.3 L374.6 191.4 L367.8 192.9 L361.0 195.7 L357.2 194.3 L349.2 195.8 L343.5 195.0 L340.4 190.5 L335.5 192.0 L328.3 195.7 L320.0 195.8 L316.6 192.8 L307.7 190.1 L302.8 192.5 L296.0 193.1 L291.8 194.1 L286.0 194.8 L281.4 189.3 L274.1 190.1 L266.1 192.5 L262.3 193.8 L255.8 193.3 L247.5 189.6 L239.7 193.0 L235.5 191.3 L230.5 189.8 L224.9 191.4 L216.4 194.8 L212.2 191.3 L207.4 195.9 L202.9 189.6 L196.2 192.5 L189.0 194.4 L183.1 191.8 L179.9 190.7 L176.4 190.1 L170.8 191.9 L163.4 193.3 L156.0 189.8 L147.0 191.5 L143.6 191.7 L137.1 193.3 L130.3 192.0 L122.1 190.5 L116.6 189.9 L108.2 191.2 L103.1 189.6 L95.4 191.1 L87.9 189.7 L80.5 192.2 L77.1 189.0 L72.1 190.9 L66.3 191.5 L63.1 189.3 L55.9 189.6 L52.8 195.8 L49.0 191.9 L41.8 191.4 L32.9 189.8 L27.8 195.1 L21.3 193.4 L17.3 195.6 L11.6 194.1 L8.5 194.6 L0.0 194.0 Z' fill='url(%23g)'/%3E %3Cg clip-path='url(%23c)'%3E %3Cellipse cx='300' cy='60' rx='70' ry='40' fill='url(%23o1)'/%3E%3Cellipse cx='90' cy='150' rx='60' ry='35' fill='url(%23o1)'/%3E%3Cellipse cx='200' cy='100' rx='40' ry='22' fill='url(%23o1)'/%3E %3Cpath d='M0.0 7.2 L6.4 10.5 L12.2 7.6 L18.7 5.3 L24.7 8.4 L32.5 4.7 L37.3 4.6 L45.2 8.9 L48.4 10.9 L57.2 8.6 L63.9 5.1 L67.0 7.7 L70.4 5.3 L74.8 4.2 L80.6 7.1 L88.7 7.6 L95.5 7.5 L102.5 7.2 L107.1 11.0 L116.1 9.9 L123.4 6.2 L127.7 6.0 L131.2 9.4 L136.6 9.9 L141.9 10.7 L150.0 4.0 L154.2 10.4 L160.0 10.9 L165.4 4.5 L172.2 9.4 L176.8 4.6 L181.8 10.7 L189.4 4.8 L193.8 4.7 L197.2 9.6 L201.3 7.9 L207.0 5.3 L214.3 4.9 L221.2 4.8 L226.7 5.5 L231.4 10.8 L239.2 6.1 L247.5 5.5 L252.8 10.0 L259.7 4.7 L268.6 5.5 L273.2 9.4 L278.2 6.1 L281.6 4.6 L288.1 5.7 L294.7 6.6 L300.4 10.7 L306.3 8.0 L314.5 5.3 L318.4 10.4 L326.4 5.7 L330.5 9.2 L339.1 5.4 L347.8 10.2 L354.5 7.0 L358.1 4.3 L366.9 5.7 L374.1 5.8 L382.0 8.2 L386.8 5.2 L394.1 4.5 L398.5 7.9 L400.0 8.3 L400.0 194.7 L398.5 192.7 L395.4 194.7 L389.5 194.6 L382.4 189.3 L374.6 191.4 L367.8 192.9 L361.0 195.7 L357.2 194.3 L349.2 195.8 L343.5 195.0 L340.4 190.5 L335.5 192.0 L328.3 195.7 L320.0 195.8 L316.6 192.8 L307.7 190.1 L302.8 192.5 L296.0 193.1 L291.8 194.1 L286.0 194.8 L281.4 189.3 L274.1 190.1 L266.1 192.5 L262.3 193.8 L255.8 193.3 L247.5 189.6 L239.7 193.0 L235.5 191.3 L230.5 189.8 L224.9 191.4 L216.4 194.8 L212.2 191.3 L207.4 195.9 L202.9 189.6 L196.2 192.5 L189.0 194.4 L183.1 191.8 L179.9 190.7 L176.4 190.1 L170.8 191.9 L163.4 193.3 L156.0 189.8 L147.0 191.5 L143.6 191.7 L137.1 193.3 L130.3 192.0 L122.1 190.5 L116.6 189.9 L108.2 191.2 L103.1 189.6 L95.4 191.1 L87.9 189.7 L80.5 192.2 L77.1 189.0 L72.1 190.9 L66.3 191.5 L63.1 189.3 L55.9 189.6 L52.8 195.8 L49.0 191.9 L41.8 191.4 L32.9 189.8 L27.8 195.1 L21.3 193.4 L17.3 195.6 L11.6 194.1 L8.5 194.6 L0.0 194.0 Z' fill='none' stroke='%237a5222' stroke-width='9' stroke-opacity='.55' filter='url(%23b)'/%3E %3Crect width='400' height='200' fill='%23fff' filter='url(%23h)'/%3E %3C/g%3E %3Cpath d='M0.0 7.2 L6.4 10.5 L12.2 7.6 L18.7 5.3 L24.7 8.4 L32.5 4.7 L37.3 4.6 L45.2 8.9 L48.4 10.9 L57.2 8.6 L63.9 5.1 L67.0 7.7 L70.4 5.3 L74.8 4.2 L80.6 7.1 L88.7 7.6 L95.5 7.5 L102.5 7.2 L107.1 11.0 L116.1 9.9 L123.4 6.2 L127.7 6.0 L131.2 9.4 L136.6 9.9 L141.9 10.7 L150.0 4.0 L154.2 10.4 L160.0 10.9 L165.4 4.5 L172.2 9.4 L176.8 4.6 L181.8 10.7 L189.4 4.8 L193.8 4.7 L197.2 9.6 L201.3 7.9 L207.0 5.3 L214.3 4.9 L221.2 4.8 L226.7 5.5 L231.4 10.8 L239.2 6.1 L247.5 5.5 L252.8 10.0 L259.7 4.7 L268.6 5.5 L273.2 9.4 L278.2 6.1 L281.6 4.6 L288.1 5.7 L294.7 6.6 L300.4 10.7 L306.3 8.0 L314.5 5.3 L318.4 10.4 L326.4 5.7 L330.5 9.2 L339.1 5.4 L347.8 10.2 L354.5 7.0 L358.1 4.3 L366.9 5.7 L374.1 5.8 L382.0 8.2 L386.8 5.2 L394.1 4.5 L398.5 7.9 L400.0 8.3 L400.0 194.7 L398.5 192.7 L395.4 194.7 L389.5 194.6 L382.4 189.3 L374.6 191.4 L367.8 192.9 L361.0 195.7 L357.2 194.3 L349.2 195.8 L343.5 195.0 L340.4 190.5 L335.5 192.0 L328.3 195.7 L320.0 195.8 L316.6 192.8 L307.7 190.1 L302.8 192.5 L296.0 193.1 L291.8 194.1 L286.0 194.8 L281.4 189.3 L274.1 190.1 L266.1 192.5 L262.3 193.8 L255.8 193.3 L247.5 189.6 L239.7 193.0 L235.5 191.3 L230.5 189.8 L224.9 191.4 L216.4 194.8 L212.2 191.3 L207.4 195.9 L202.9 189.6 L196.2 192.5 L189.0 194.4 L183.1 191.8 L179.9 190.7 L176.4 190.1 L170.8 191.9 L163.4 193.3 L156.0 189.8 L147.0 191.5 L143.6 191.7 L137.1 193.3 L130.3 192.0 L122.1 190.5 L116.6 189.9 L108.2 191.2 L103.1 189.6 L95.4 191.1 L87.9 189.7 L80.5 192.2 L77.1 189.0 L72.1 190.9 L66.3 191.5 L63.1 189.3 L55.9 189.6 L52.8 195.8 L49.0 191.9 L41.8 191.4 L32.9 189.8 L27.8 195.1 L21.3 193.4 L17.3 195.6 L11.6 194.1 L8.5 194.6 L0.0 194.0 Z' fill='none' stroke='%238a6430' stroke-width='.8' stroke-opacity='.7'/%3E %3C/g%3E%3C/svg%3E");
  --dau-cuon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='160' viewBox='0 0 40 160'%3E %3Cdefs%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236e4b20'/%3E%3Cstop offset='.22' stop-color='%23b8914f'/%3E%3Cstop offset='.45' stop-color='%23f1dcaa'/%3E%3Cstop offset='.6' stop-color='%23e2c486'/%3E%3Cstop offset='.85' stop-color='%23a57a3c'/%3E%3Cstop offset='1' stop-color='%235e3f18'/%3E%3C/linearGradient%3E %3CradialGradient id='e' cx='.5' cy='.5' r='.6'%3E%3Cstop offset='0' stop-color='%235a3c18'/%3E%3Cstop offset='.55' stop-color='%23a07434'/%3E%3Cstop offset='1' stop-color='%23e9d19c'/%3E%3C/radialGradient%3E%3C/defs%3E %3Crect x='5' y='16' width='30' height='128' fill='url(%23l)'/%3E %3Cpath d='M5 144a15 8 0 0 0 30 0z' fill='url(%23l)'/%3E %3Cellipse cx='20' cy='16' rx='15' ry='8' fill='url(%23e)' stroke='%235e3f18' stroke-width='1'/%3E %3Cpath d='M20 16m-11 0a11 5.6 0 1 1 22 0a8.5 4.3 0 1 1-17 0a6 3 0 1 1 12 0a3.6 1.8 0 1 1-7.2 0' fill='none' stroke='%23f3dfb0' stroke-width='1.1'/%3E %3Cpath d='M9 40v80M31 40v80' stroke='%235e3f18' stroke-opacity='.25' stroke-width='1'/%3E %3C/svg%3E");
  /* hoa văn dưới tiêu đề mục */
  --hoa-van:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 20'%3E%3Cg fill='none' stroke='%23d6a84a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M8 10H128M192 10H312M128 10c6-7 14-7 18-1M128 10c6 7 14 7 18 1M192 10c-6-7-14-7-18-1M192 10c-6 7-14 7-18 1'/%3E%3C/g%3E%3Cg fill='%23d6a84a'%3E%3Cpath d='M160 2l7 8-7 8-7-8z'/%3E%3Ccircle cx='147' cy='10' r='1.8'/%3E%3Ccircle cx='173' cy='10' r='1.8'/%3E%3Ccircle cx='8' cy='10' r='1.6'/%3E%3Ccircle cx='312' cy='10' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --xe-dai:polygon(0.0% 2.9%,1.6% 5.9%,3.0% 4.8%,5.0% 0.5%,7.2% 0.3%,9.3% 0.6%,10.8% 3.8%,13.5% 1.1%,15.3% 5.6%,18.2% 5.2%,20.3% 8.8%,21.7% 7.7%,23.5% 1.3%,25.0% 2.8%,27.8% 1.6%,30.1% 5.8%,32.1% 4.9%,33.5% 0.5%,35.2% 6.1%,37.3% 2.8%,39.6% 4.1%,41.5% 7.1%,44.0% 2.2%,46.4% 4.7%,49.2% 6.6%,51.1% 8.8%,52.6% 3.8%,55.2% 1.4%,57.4% 0.4%,59.9% 6.9%,62.2% 7.9%,64.1% 6.3%,66.5% 5.2%,68.6% 7.6%,71.6% 4.3%,74.1% 0.5%,76.6% 5.8%,79.7% 7.4%,81.5% 3.5%,84.0% 0.2%,86.1% 1.5%,87.7% 0.5%,90.3% 1.2%,92.1% 3.5%,95.0% 0.7%,97.1% 4.9%,99.9% 7.4%,100% 2.5%,100.0% 96.3%,98.0% 92.0%,95.0% 98.6%,93.4% 97.9%,91.7% 95.6%,89.3% 97.6%,88.0% 96.2%,86.0% 94.9%,83.0% 93.8%,80.8% 94.4%,78.3% 99.5%,75.4% 93.0%,72.5% 92.8%,70.5% 96.4%,69.0% 94.3%,67.6% 99.4%,65.9% 98.5%,64.0% 99.5%,62.7% 98.6%,61.2% 96.7%,59.8% 92.1%,57.4% 98.7%,55.6% 96.9%,53.7% 98.9%,50.9% 91.1%,48.7% 95.6%,47.2% 99.1%,45.3% 97.6%,42.5% 98.5%,41.2% 91.4%,38.9% 98.7%,36.7% 99.8%,34.4% 91.2%,31.6% 93.7%,29.8% 96.7%,28.2% 93.1%,25.9% 93.0%,24.0% 98.0%,21.3% 91.1%,18.5% 92.7%,15.7% 93.3%,14.0% 95.3%,12.0% 99.7%,10.7% 97.5%,8.9% 93.8%,5.9% 96.0%,2.9% 91.1%,0% 96.7%);
  --xe-manh:polygon(0.0% 1.3%,3.1% 1.2%,6.2% 3.7%,11.5% 5.0%,15.4% 3.9%,20.4% 0.5%,24.9% 5.5%,29.8% 4.5%,33.7% 1.1%,38.6% 2.0%,43.6% 5.8%,47.3% 2.4%,52.7% 4.3%,55.6% 0.8%,58.5% 5.4%,63.5% 0.9%,68.5% 5.9%,73.0% 2.1%,77.2% 0.8%,79.6% 5.8%,84.1% 3.2%,89.5% 2.6%,94.7% 5.0%,97.8% 1.5%,100% 1.4%,100.0% 96.5%,96.8% 97.5%,94.0% 94.5%,90.4% 97.3%,86.2% 94.6%,82.4% 94.5%,78.4% 96.8%,74.3% 99.9%,70.5% 98.9%,68.1% 95.2%,65.2% 97.2%,60.4% 96.7%,57.0% 96.9%,52.8% 95.3%,50.1% 96.6%,46.9% 98.3%,42.0% 97.0%,37.8% 95.4%,32.5% 97.3%,28.1% 97.0%,24.1% 95.8%,20.2% 96.8%,16.3% 94.4%,11.7% 94.7%,6.3% 98.4%,2.1% 94.3%,0% 99.2%);
}

/* ---------- nền trang ---------- */
body{background-color:var(--bg);background-image:var(--nen-anh);color:var(--nen-chu)}
body.l-th,body.l-my{--c:var(--c-nen)}
body.l-th{--lang:#23477a} body.l-my{--lang:#8c3f0c}
#nav{background:var(--bg);box-shadow:0 4px 14px rgba(0,0,0,.3)}
#nav a.navlink{font-family:var(--f-tieu);font-weight:700;letter-spacing:.02em}
#nav a.navlink.on{color:var(--tren-c)}
#themeBtn{background:var(--bg);color:var(--navy);border-color:var(--gold)}
.logoCap{color:#e9a48f}
:root[data-theme="light"] .logoCap{color:#8b2b22}
h1.tieu{font-family:var(--f-tieu);font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:800;letter-spacing:.01em;color:var(--c-nen)}
h2{font-family:var(--f-tieu)}
/* tiêu đề mục: chữ hoa lớn, giữa trang, hoa văn vàng bên dưới (như “ART AND HISTORY” của mẫu) */
h2.sec{display:block;text-align:center;font-family:var(--f-tieu);font-weight:700;font-size:clamp(1.35rem,3.4vw,2.15rem);letter-spacing:.07em;line-height:1.25;color:var(--nen-chu);margin:38px 0 18px;padding-bottom:24px;background:var(--hoa-van) center bottom/min(320px,78%) 18px no-repeat;text-shadow:0 2px 0 rgba(0,0,0,.25)}
h2.sec::before,h2.sec::after{content:none}
.lead{color:var(--muted)}
footer.chan .siteCredit b{color:var(--nen-chu)}
footer.chan select{background:var(--bg);color:var(--nen-chu);border:1px solid var(--line);border-radius:6px}
#bao{background:#1d140e;color:#f1e3c4;border:1px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.4)}
#bao a{color:#f0cf7a}
.tabs button{font-family:var(--f-tieu);font-size:1.02rem}

/* ---------- vùng giấy: thẻ, ghi chú, hộp thoại, bảng chữ ---------- */
.o,.dCard,.canh,.aboutDlg,section.panel,.cuon-giay{
  --ink:var(--giay-chu); --muted:var(--giay-mo); --line:var(--giay-ke); --navy:var(--giay-navy);
  --card:#f3e6c6; --bg:#f7ecd2; --c:var(--lang,#5b3518); --tren-c:#fff6e0; --gold:#8a5a12;
  --ok:#2f7a3e; --sai:#a3311f; --g1:#2e7d4a; --g2:#b03424; --g3:#2f5d85; --g4:#6f4f9a; --g5:#b8661a; --g6:#4a5b6c;
  color:var(--ink)
}
.o,section.panel{background:var(--giay);background-image:var(--giay-nen);border:1px solid #a8844a;border-radius:3px;box-shadow:inset 0 0 26px rgba(122,82,30,.38),inset 0 0 2px rgba(80,50,15,.6),0 10px 22px rgba(0,0,0,.38)}
section.panel{padding:14px 16px;margin-top:4px}
.o h2,.o h3,section.panel h2,section.panel h3{color:var(--giay-navy)}
.o h2{font-size:1.3rem}
.btn{border-radius:4px}
.btn.pri{color:var(--tren-c)}
.canh{background:#eedfb9;border-left-color:var(--c);border-radius:2px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.page > .canh,.page > p.canh{background-image:var(--giay-nen)}
.aboutDlg{background:var(--giay);background-image:var(--giay-nen);border:3px solid #b98a33;border-radius:6px}
.aboutVerse{background:color-mix(in srgb,#b98a33 14%,transparent)}
.o.chang-ph,.truc-ph{border:2px solid #b98a33;box-shadow:inset 0 0 26px rgba(122,82,30,.38),0 0 0 4px rgba(214,168,74,.25),0 10px 22px rgba(0,0,0,.38)}
.tl a.xong,.loc button.on,.chang-dau .so{color:var(--tren-c)}
.q-op button,.chon-op button,.the-tranh,.cay .nguoi,.xep button.m{background:#f7ecd4}

/* thẻ “Thuật ngữ hôm nay”: giấy da trong khung đôi vàng – nâu */
.dCard{border:0;border-radius:3px;background:var(--giay);background-image:var(--giay-nen);box-shadow:0 0 0 3px #c99a3c,0 0 0 7px #2a1d14,0 0 0 9px #8a6420,0 14px 30px rgba(0,0,0,.45);margin:10px 8px 6px}
.dTop{background:linear-gradient(180deg,#45301c,#2c1d10);color:#f0d58a;font-family:var(--f-tieu)}
.dTop button{background:transparent;color:#f0d58a;border-color:#c99a3c}
.dTop button:hover{background:#f0d58a;color:#2c1d10;border-color:#f0d58a}
.dTitle{font-family:var(--f-tieu);color:var(--giay-navy)}

/* ---------- trang chủ: các bước như dãy tranh trong khung vàng, xếp so le ---------- */
.buoc-co{position:relative;padding:14px 0 26px;margin:0 -8px;overflow:hidden}
.buoc-co > .dai{position:absolute;left:-2%;right:-2%;height:260px;background:#3b291b;background-image:var(--giay-nen);opacity:.55;clip-path:var(--xe-dai);transform:rotate(-2.5deg);pointer-events:none}
.buoc-co > .dai.d1{top:6%}
.buoc-co > .dai.d2{bottom:4%;background:#6a4a2c;transform:rotate(1.8deg);opacity:.45}
:root[data-theme="light"] .buoc-co > .dai{background:#a98a5a;opacity:.45}
.hang-tranh{position:relative;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;margin:0 auto 34px;max-width:940px;padding:0 18px}
.hang-tranh.phai{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.hang-tranh.phai .khung{order:2}
.khung{position:relative;z-index:2;aspect-ratio:4/3;border:24px solid transparent;border-image:var(--khung) 40 round;box-shadow:0 14px 28px rgba(0,0,0,.55);background:#2a170a}
.khung::before,.khung::after{content:"";position:absolute;left:50%;z-index:3;width:60px;height:30px;background:var(--vo-so) center/contain no-repeat;pointer-events:none}
.khung::before{top:-40px;transform:translateX(-50%)}
.khung::after{bottom:-40px;transform:translateX(-50%) scaleY(-1)}
.khung .anh{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#6e4c2c,#3a2412 62%,#22140a);box-shadow:inset 0 0 22px rgba(0,0,0,.85)}
.khung .anh img{width:100%;height:100%;object-fit:cover;display:block}
.khung .anh::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 18px rgba(0,0,0,.7);pointer-events:none}
.khung .so-buoc{position:absolute;z-index:3;left:-14px;top:-14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff1c2,#d6a84a 55%,#7a5214);color:#2a1d14;font:800 1.25rem/1 var(--f-tieu);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.hang-tranh.phai .khung .so-buoc{left:auto;right:-14px}
/* cuộn giấy: thân giấy mép rách, đầu cuộn tròn ở phía xa khung tranh */
.cuon-giay{position:relative;z-index:1;margin-left:-46px;padding:30px 50px 30px 70px;background:var(--giay-cuon) center/100% 100% no-repeat;filter:drop-shadow(0 10px 12px rgba(0,0,0,.45))}
.hang-tranh.phai .cuon-giay{margin-left:0;margin-right:-46px;padding:30px 70px 30px 50px}
.cuon-giay::after{content:"";position:absolute;top:-16px;bottom:-16px;right:-16px;width:34px;border-style:solid;border-width:30px 0;border-image:var(--dau-cuon) 30 0 fill / 30px 0 stretch}
.hang-tranh.phai .cuon-giay::after{right:auto;left:-16px;transform:scaleX(-1)}
.cuon-giay h3{margin:0 0 6px;font-family:var(--f-tieu);font-size:1.45rem;font-weight:700;color:var(--giay-navy);line-height:1.2}
.cuon-giay p{margin:0;font-size:.95rem;color:var(--giay-chu)}
.cuon-giay .bl{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.cuon-giay .bl a{font-size:.8rem;font-weight:700;text-decoration:none;border:1.5px solid var(--c);color:var(--c);border-radius:3px;padding:2px 9px;background:rgba(255,248,228,.55)}
.cuon-giay .bl a.xong{background:var(--c);color:var(--tren-c)}
/* đồ trang trí: mảnh báo cũ in câu Pāli, lá bồ-đề, hoa sen (chỉ để trang trí) */
.trang-tri{position:absolute;pointer-events:none;z-index:0}
.manh-bao{width:190px;height:150px;padding:10px 12px;background:#e6d8b8;clip-path:var(--xe-manh);font:italic 8.5px/1.45 Georgia,"Noto Serif",serif;color:#5a4a36;text-align:justify;overflow:hidden;opacity:.85;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.manh-bao b{display:block;font:700 13px/1.1 var(--f-tieu);font-style:normal;color:#3a2a1a;border-bottom:1px solid #8a7556;margin-bottom:4px;padding-bottom:2px}
.manh-bao.m1{top:-6px;right:-30px;transform:rotate(8deg)}
.manh-bao.m2{top:46%;left:-58px;transform:rotate(-7deg)}
.trang-tri img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.la-bo{width:96px}
.la-bo.l1{top:30%;right:-14px;transform:rotate(-24deg)}
.la-bo.l2{bottom:-6px;left:-6px;transform:rotate(150deg);width:86px}
.sen{width:150px}
.sen.s1{top:-18px;left:-34px;transform:rotate(-14deg)}
.sen.s2{top:60%;right:-40px;transform:rotate(12deg);width:132px}
@media (max-width:860px){
  .manh-bao,.la-bo.l1,.sen.s2{display:none}
  .sen.s1{width:96px;left:-26px;top:-10px}
}
@media (max-width:640px){
  .hang-tranh,.hang-tranh.phai{grid-template-columns:1fr;padding:0 14px;margin-bottom:28px}
  .hang-tranh.phai .khung{order:0}
  .khung{width:min(300px,82%);justify-self:center;border-width:18px}
  .cuon-giay,.hang-tranh.phai .cuon-giay{margin:-22px 0 0;padding:50px 22px 18px}
  .buoc-co > .dai{display:none}
  .cuon-giay::after{display:none}
  .cuon-giay h3{font-size:1.25rem}
  .la-bo.l2{width:80px}
}
.page > h2.sec + .lead{text-align:center;max-width:72ch;margin:-4px auto 16px}
/* lộ trình: nhãn “Vào học” như một nút nhỏ */
.chip.vao{background:var(--c);border-color:var(--c);color:var(--tren-c);padding:2px 11px}
.ds-bai a:hover .chip.vao{filter:brightness(1.12)}
/* lộ trình: chặng thu gọn, bấm tên chặng để mở */
details.mo-chang > summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}
details.mo-chang > summary::-webkit-details-marker{display:none}
details.mo-chang > summary .chang-dau{flex:1;min-width:0}
details.mo-chang > summary .mui::after{content:"▸";display:inline-block;font-size:1.3rem;color:var(--giay-navy);transition:transform .2s}
details.mo-chang[open] > summary .mui::after{transform:rotate(90deg)}
details.mo-chang > summary:hover h2{text-decoration:underline;text-decoration-color:var(--gold)}
.chip.dang{background:#8a5a12;border-color:#8a5a12;color:#fff8e6}

/* ---------- thẻ ghi nhớ kiểu Anki: bộ đếm, thẻ lật 3D (lật qua lật lại), nút chấm ---------- */
:root{
  /* viền thẻ bài cổ: hai đường chỉ, góc khuyết tròn, hạt thoi ở góc (cắt 9 mảnh) */
  --vien-the:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke-linejoin='round'%3E%3Cpath d='M4 20A16 16 0 0 0 20 4H76A16 16 0 0 0 92 20V76A16 16 0 0 0 76 92H20A16 16 0 0 0 4 76Z' stroke='%238f6a33' stroke-width='1.6'/%3E%3Cpath d='M9 21A12 12 0 0 0 21 9H75A12 12 0 0 0 87 21V75A12 12 0 0 0 75 87H21A12 12 0 0 0 9 75Z' stroke='%23b48a45' stroke-width='.9'/%3E%3C/g%3E%3Cg fill='%23b9893a' stroke='%236d4a1c' stroke-width='.6'%3E%3Cpath d='M8 2.5L13.5 8 8 13.5 2.5 8Z'/%3E%3Cpath d='M88 2.5L93.5 8 88 13.5 82.5 8Z'/%3E%3Cpath d='M88 82.5L93.5 88 88 93.5 82.5 88Z'/%3E%3Cpath d='M8 82.5L13.5 88 8 93.5 2.5 88Z'/%3E%3C/g%3E%3Cg fill='%23f6e3b0'%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3Ccircle cx='88' cy='8' r='1.5'/%3E%3Ccircle cx='88' cy='88' r='1.5'/%3E%3Ccircle cx='8' cy='88' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  /* bánh xe Pháp mờ in chìm ở mặt trước */
  --banh-xe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%237a5222' stroke-width='2.2' opacity='.1'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3Cpath d='M50 17V42M50 58V83M17 50H42M58 50H83M26.7 26.7L44.3 44.3M55.7 55.7L73.3 73.3M73.3 26.7L55.7 44.3M44.3 55.7L26.7 73.3'/%3E%3C/g%3E%3Cg fill='%237a5222' opacity='.1'%3E%3Ccircle cx='50' cy='5' r='4'/%3E%3Ccircle cx='50' cy='95' r='4'/%3E%3Ccircle cx='5' cy='50' r='4'/%3E%3Ccircle cx='95' cy='50' r='4'/%3E%3Ccircle cx='18.2' cy='18.2' r='4'/%3E%3Ccircle cx='81.8' cy='81.8' r='4'/%3E%3Ccircle cx='81.8' cy='18.2' r='4'/%3E%3Ccircle cx='18.2' cy='81.8' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.the-dem{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center;margin:8px 0 14px;font-weight:800}
.the-dem > span:not(.ghi){min-width:34px;text-align:center;border-radius:999px;padding:1px 10px;color:#1d140e}
.the-dem .moi{background:#8fb6ec} .the-dem .hoc{background:#ec9a82} .the-dem .on{background:#9fd39a}

/* xấp thẻ: hai thẻ lót phía sau, lệch nhẹ */
.khu-the{overflow-x:clip;overflow-clip-margin:14px}
.the-3d{position:relative;max-width:540px;margin:4px auto 0;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.the-3d::before,.the-3d::after{content:"";position:absolute;inset:6px 10px;border-radius:12px;background:#d4b679;background-image:var(--giay-nen);border:1px solid #9c7a40;box-shadow:0 8px 16px rgba(0,0,0,.35)}
.the-3d::before{transform:rotate(-2.4deg) translate(-3px,7px);filter:brightness(.86)}
.the-3d::after{transform:rotate(1.8deg) translate(4px,4px);filter:brightness(.93)}
.the-bay{position:relative;z-index:1;perspective:1400px}
.the-trong{position:relative;min-height:290px;transform-style:preserve-3d}
.the-3d.lat .the-trong{transform:rotateY(180deg)}
.the-3d:focus-visible .mat-truoc,.the-3d:focus-visible .mat-sau{outline:3px solid var(--gold);outline-offset:4px}

/* hai mặt thẻ */
.mat-truoc,.mat-sau{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:52px 34px 46px;text-align:center;border-radius:12px;border:1px solid #9c7a40;color:var(--giay-chu);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,250,232,.6),inset 0 0 34px rgba(122,82,30,.34),0 16px 30px rgba(0,0,0,.45)}
.mat-truoc{background-color:var(--giay);background-image:var(--banh-xe),var(--giay-nen);background-size:170px 170px,auto,auto;background-position:center;background-repeat:no-repeat,repeat,no-repeat}
.mat-sau{transform:rotateY(180deg);background-color:#e2c58c;background-image:radial-gradient(ellipse at 50% 42%,rgba(255,248,226,.7),rgba(255,248,226,0) 68%),var(--giay-nen)}
.mat-truoc::before,.mat-sau::before{content:"";position:absolute;inset:8px;border:24px solid transparent;border-image:var(--vien-the) 24 stretch;pointer-events:none}
/* nhãn trên đầu thẻ như dải ruy băng */
.the-3d .kieu{position:absolute;top:20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-tieu);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--giay-navy);padding:3px 14px;border-top:1px solid #a8844a;border-bottom:1px solid #a8844a;background:rgba(255,246,220,.55)}
.the-3d .kieu::before,.the-3d .kieu::after{content:"◆";font-size:.55rem;color:#b9893a;margin:0 8px;vertical-align:2px}
.the-3d .mat{font-size:3.1rem;line-height:1.45;color:#2b1a0c;text-shadow:0 1px 0 rgba(255,250,232,.7)}
.the-3d .mat.my{line-height:1.85}
.the-3d .hoi{font-family:var(--f-tieu);font-style:italic;font-size:1rem;color:var(--giay-mo)}
.mat-nghia{font-family:var(--f-tieu);font-size:1.65rem;font-weight:700;color:var(--giay-navy);line-height:1.3}
.mat-nghia.nho{font-size:1.25rem}
.the-3d .gach{width:min(220px,62%);height:14px;margin:4px 0 2px;background:var(--hoa-van) center/contain no-repeat;filter:brightness(.75)}
.the-3d .goi-y{position:absolute;bottom:20px;left:0;right:0;font-size:.76rem;font-style:italic;color:var(--giay-mo);letter-spacing:.03em}
.the-3d .pa{color:var(--giay-mo);font-size:1.15rem}
.the-3d .loa{border-color:#c3a36a;color:var(--giay-chu);vertical-align:middle}
.the-3d:hover .mat-truoc,.the-3d:hover .mat-sau{box-shadow:inset 0 1px 0 rgba(255,250,232,.6),inset 0 0 34px rgba(122,82,30,.34),0 20px 36px rgba(0,0,0,.5)}

/* hiệu ứng: lật sang / lật về (nhấc thẻ lên giữa chừng), chia thẻ vào, thẻ bay ra khi chấm */
.the-trong.anim-sang{animation:the-lat-sang .62s cubic-bezier(.4,.1,.25,1) both}
.the-trong.anim-ve{animation:the-lat-ve .62s cubic-bezier(.4,.1,.25,1) both}
@keyframes the-lat-sang{0%{transform:translateY(0) rotateY(0deg) scale(1)}50%{transform:translateY(-12px) rotateY(90deg) scale(1.05)}100%{transform:translateY(0) rotateY(180deg) scale(1)}}
@keyframes the-lat-ve{0%{transform:translateY(0) rotateY(180deg) scale(1)}50%{transform:translateY(-12px) rotateY(90deg) scale(1.05)}100%{transform:translateY(0) rotateY(0deg) scale(1)}}
.the-bay.vao{animation:the-vao .42s cubic-bezier(.2,.8,.25,1) both}
@keyframes the-vao{from{opacity:0;transform:translate(18px,14px) rotate(4deg) scale(.95)}to{opacity:1;transform:none}}
.the-bay.ra-tot{animation:the-ra-tot .26s ease-in both}
.the-bay.ra-lai{animation:the-ra-lai .26s ease-in both}
@keyframes the-ra-tot{to{opacity:0;transform:translate(60px,-8px) rotate(7deg)}}
@keyframes the-ra-lai{to{opacity:0;transform:translate(-60px,10px) rotate(-7deg)}}
@media (prefers-reduced-motion:reduce){.the-trong.anim-sang,.the-trong.anim-ve,.the-bay.vao,.the-bay.ra-tot,.the-bay.ra-lai{animation-duration:.01s}}

/* nút chấm */
.the-cham{justify-content:center;align-items:stretch;margin-top:18px}
.the-cham .btn{min-width:140px;justify-content:center;flex-direction:column;gap:0;padding:8px 16px}
.the-cham .btn small{font-weight:600;opacity:.85;font-size:.75rem}
.the-cham .btn.lai{border-color:#e08a6d;color:#f0a58c}
.the-cham .btn.lat-nho{min-width:0;width:52px;font-size:1.35rem;padding:4px 0}
:root[data-theme="light"] .the-cham .btn.lai{border-color:#a3311f;color:#a3311f}
.the-xong{max-width:540px;margin:0 auto;text-align:center;padding:22px 18px;background:var(--giay);background-image:var(--giay-nen);border:1px solid #a8844a;border-radius:12px;color:var(--giay-chu);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.the-xong h3{margin:0 0 6px;font-family:var(--f-tieu);color:var(--giay-navy)}
@media (max-width:640px){
  .the-trong{min-height:260px}
  .the-3d .mat{font-size:2.5rem}
  .mat-truoc,.mat-sau{padding:50px 26px 42px}
  .the-cham .btn{min-width:0;flex:1}
  .the-cham .btn.lat-nho{flex:0 0 48px}
}

/* ---------- bài tập: bảng tùy chọn ---------- */
.tuy-chon summary{cursor:pointer;font-weight:700}
.tuy-chon .tc-dong{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:10px}
.tuy-chon .tc-dong .btn{padding:3px 12px}
.tuy-chon .tc-dang{display:flex;flex-wrap:wrap;gap:6px}
.tuy-chon .tc-dang label{border:1.5px solid var(--line);border-radius:4px;padding:3px 9px;font-size:.88rem;cursor:pointer;background:#f7ecd4;display:inline-flex;align-items:center;gap:5px}
.tuy-chon .tc-dang label.tat{opacity:.5;cursor:default}
.tuy-chon + .ghi{margin-top:10px}
.pa-to{font-size:1.12rem}

/* ---------- video bài giảng (đầu thẻ Bài học) – ảnh bìa + nút phát, bấm mới tải khung YouTube ---------- */
.video-bai h2{margin:0 0 6px}
.video-bai > .ghi{margin:0 0 12px}
.vd-ds{display:grid;gap:18px}
.vd-bai{margin:0;display:grid;gap:8px;min-width:0}
.vd-khung{position:relative;display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;padding:0;border:1px solid #a8844a;border-radius:6px;background:#1b130b center/cover no-repeat;box-shadow:0 8px 18px rgba(0,0,0,.35);cursor:pointer;overflow:hidden}
iframe.vd-khung{cursor:auto;background:#000}
.vd-nut{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:rgba(150,30,20,.9);box-shadow:0 0 0 2px rgba(240,210,150,.75),0 4px 14px rgba(0,0,0,.5);transition:background .15s}
.vd-nut::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff6e0}
.vd-khung:hover .vd-nut,.vd-khung:focus-visible .vd-nut{background:#c0281b}
.vd-khung:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.vd-dai{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);color:#fff;font:700 .78rem/1 system-ui,sans-serif;padding:4px 6px;border-radius:4px}
.vd-bai figcaption{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.vd-kenh{font-size:.9rem;opacity:.85}
.vd-ghi{font-size:.88rem;font-style:italic;opacity:.9}
.vd-bai figcaption a{font-weight:700;font-size:.9rem;align-self:flex-start}
@media (min-width:760px){.vd-ds:has(.vd-bai + .vd-bai){grid-template-columns:1fr 1fr}}
a.vd-khung{text-decoration:none;color:#fff}
.vd-mo{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.8);color:#fff;font:700 .8rem/1 system-ui,sans-serif;padding:5px 8px;border-radius:4px}
.vd-loi::before{content:"";position:absolute;inset:0;background:rgba(15,10,5,.72)}
.vd-loi .vd-bao{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;color:#fff6e0;font-family:system-ui,sans-serif}
.vd-loi .vd-bao small{opacity:.8}
.vd-loi .vd-mo{position:static;background:#c0281b;padding:8px 14px;font-size:.9rem;border-radius:6px;margin-top:4px}
.vd-loi:hover .vd-mo,.vd-loi:focus-visible .vd-mo{background:#d8331f}

/* ---------- bài tập “che một phần âm tiết” ---------- */
.che-tu .che-o{background:rgba(214,168,74,.32);border-bottom:2px dashed var(--c);border-radius:4px;padding:0 1px}
.che-tu .che-trong{display:inline-block;min-width:1.1em;text-align:center;font-family:var(--f-tieu);font-weight:800;color:var(--c)}
.che-tu .che-hoi{font-family:var(--f-tieu);font-weight:800;font-size:.5em;color:var(--c);margin-left:1px}
.che-de{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px;margin:12px 0 4px;text-align:center}
.che-de .che-tu{font-size:2.4rem;line-height:1.6}
.che-de .che-tu.my{line-height:1.9}
.che-de .che-nghia{font-style:italic;color:var(--muted)}