/* ezOne - kiểu hiển thị phía người đọc cho nội dung soạn bằng trình soạn bài (bảng, khối nổi bật, các bước, video nhúng).
 * Sinh từ admin/editor-blocks.css, bọc trong .lesson để không ảnh hưởng phần còn lại của giao diện. */
.lesson .callout{background:var(--gold-pale,#FFF8E1);border-left:5px solid var(--gold,#FDCE4C);border-radius:0 16px 16px 0;padding:16px 22px;margin:22px 0;color:var(--ink-strong,#17233c);font-size:15.5px;line-height:1.75;text-align:left}
.lesson .callout p{margin:0 0 8px!important;font-size:inherit}
.lesson .callout>:last-child{margin-bottom:0!important}
.lesson .callout ul,.lesson .callout ol{margin:6px 0 0;padding-left:22px}
.lesson .callout.tip{background:color-mix(in srgb,#2FAE66 12%,var(--surface,#fff));border-left-color:#2FAE66}
.lesson .callout.warn{background:color-mix(in srgb,#E5484D 10%,var(--surface,#fff));border-left-color:#E5484D}
.lesson .blk{border-radius:16px;padding:16px 22px;margin:22px 0;background:var(--pale,#E8F1FE);color:var(--heading,#0B3C82);font-size:15.5px;line-height:1.75}
.lesson .blk p{margin:0 0 8px!important}.lesson .blk>:last-child{margin-bottom:0!important}
.lesson .blk.gold{background:var(--gold-pale,#FFF8E1);color:var(--ink-strong,#17233c)}
.lesson .blk.green{background:color-mix(in srgb,#2FAE66 12%,var(--surface,#fff));color:var(--ink-strong,#17233c)}
.lesson .blk.gray{background:var(--surface-2,#F3F6FB);color:var(--ink-strong,#17233c)}
.lesson .blk.line{background:transparent;border:2px solid var(--blue,#1B5CC8)}
.lesson .stepflow{display:flex;gap:34px;margin:22px 0;flex-wrap:wrap}
.lesson .stepflow .st{flex:1 1 170px;position:relative;background:var(--surface,#fff);border:1px solid var(--line,#E3E8F0);border-radius:14px;padding:16px;box-shadow:0 2px 8px rgba(11,60,130,.06);font-size:15px;line-height:1.6}
.lesson .stepflow .st+.st::before{content:"\2192";position:absolute;left:-28px;top:50%;transform:translateY(-50%);width:22px;text-align:center;color:var(--blue,#1B5CC8);font-weight:700;font-size:20px}
.lesson .stepflow .st .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue,#1B5CC8);color:#fff;font-weight:700;margin-bottom:8px}
.lesson .stepflow .st p{margin:0 0 4px!important}
.lesson .nstep{display:flex;gap:14px;align-items:flex-start;margin:14px 0;padding:14px 16px;border:1px solid var(--line,#E3E8F0);border-radius:14px;background:var(--surface,#fff);font-size:15.5px;line-height:1.7}
.lesson .nstep .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--grad,linear-gradient(135deg,#1B5CC8,#3B97F5));color:#fff;display:grid;place-items:center;font-weight:700}
.lesson .nstep .b{flex:1;min-width:0}.lesson .nstep .b p{margin:0 0 6px!important}
.lesson .cflow{display:block;margin:22px 0;overflow-x:auto}
.lesson .cflow p{margin:0!important;line-height:2.4;white-space:nowrap}
.lesson .cflow .bx{display:inline-block;background:var(--pale,#E8F1FE);border:1px solid #cfe0fb;border-radius:12px;padding:6px 14px;font-weight:600;font-style:normal;color:var(--heading,#0B3C82);line-height:1.5}
.lesson .cflow .ar{display:inline;margin:0 10px;color:var(--blue,#1B5CC8);font-weight:700;font-size:22px}
.lesson .cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.lesson .cols2>div{border:1px solid var(--line,#E3E8F0);border-radius:14px;padding:14px 18px;background:var(--surface-2,#F6F8FC);font-size:15.5px;line-height:1.7}
.lesson .cols2 p{margin:0 0 6px!important}
.lesson .ezc-n{display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:var(--blue,#1B5CC8);color:#fff;font-weight:700;font-size:.85em;line-height:1;vertical-align:middle}
.lesson .ezc-tag{display:inline-block;padding:1px 10px;border-radius:999px;background:var(--gold,#FDCE4C);color:#4a3600;font-weight:700;font-size:.85em}
.lesson .callout,.lesson .blk{box-sizing:border-box}
.lesson table{border-collapse:separate;border-spacing:0;width:100%;margin:12px 0;border:1px solid #E3EAF4;border-radius:14px;overflow:hidden;font-size:14.5px;line-height:1.55}
.lesson table td,.lesson table th{box-sizing:border-box;padding:10px 14px;border:0;border-bottom:1px solid #E3EAF4;border-right:1px solid #E3EAF4;text-align:left;vertical-align:top;color:#2D3E5C;min-width:40px}
.lesson table th{background:#F4F8FE;color:#1A2B4A;font-weight:700}
.lesson table tr:last-child td,.lesson table tr:last-child th{border-bottom:0}
.lesson table td:last-child,.lesson table th:last-child{border-right:0}
.lesson table{max-width:100%}
.lesson table td,.lesson table th{overflow-wrap:anywhere;white-space:normal!important}
.lesson table.ezt-fx{table-layout:fixed}
.lesson table.ezt-fx td,.lesson table.ezt-fx th{overflow-wrap:anywhere;min-width:0}
.lesson table.ezt-auto{width:auto}
.lesson table.ezt-zebra tr:nth-child(even) td{background:#F4F8FE}
.lesson table.ezt-b-h td,.lesson table.ezt-b-h th{border-right:0}
.lesson table.ezt-b-0{border:0;border-radius:0;outline:1px dashed #d3dcec;outline-offset:-1px}
.lesson table.ezt-b-0 td,.lesson table.ezt-b-0 th{border:0;box-shadow:inset 0 0 0 1px #E8EDF6}
.lesson table.ezt-pad-s td,.lesson table.ezt-pad-s th{padding:5px 9px}
.lesson table.ezt-pad-l td,.lesson table.ezt-pad-l th{padding:16px 20px}
.lesson .ezc-kbd{border:1px solid #b9c6dc;border-bottom-width:2px;border-radius:6px;padding:1px 7px;background:#F4F7FC;font-size:.92em;font-weight:600}
.lesson table[data-al="center"]{margin-left:auto;margin-right:auto}.lesson table[data-al="right"]{margin-left:auto}
.lesson .callout.tip,.lesson .callout.warn{max-width:none}
.lesson .video-embed{position:relative;aspect-ratio:16/9;width:100%;max-width:none;border-radius:16px;overflow:hidden;background:#000;margin:0 0 24px}
.lesson .video-embed iframe,.lesson .video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}
.lesson .stepflow .st .n{display:inline-grid}
.lesson .stepflow .st+.st::before{color:var(--blue,#1B5CC8)}
.lesson .tblw{overflow-x:auto}
@media (max-width:700px){.lesson .cols2{grid-template-columns:1fr}.lesson .stepflow{gap:22px}.lesson table{display:block;overflow-x:auto}}

/* Ảnh + lưu ý: thanh báo phía trên ảnh, nội dung đầy đủ ở hộp vàng dưới ảnh */
.lesson .fign{margin:22px 0}
.lesson .fign-flag{display:flex;align-items:center;gap:10px;background:#FFF3D6;border:1px solid #F0D27A;border-bottom:0;border-radius:14px 14px 0 0;padding:9px 16px;font-size:14.5px;line-height:1.5;color:var(--ink-strong,#17233c)}
.lesson .fign-flag::before{content:"";flex:none;width:18px;height:18px;background:#C2860A;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cpath d='M12 10v5M12 18v.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cpath d='M12 10v5M12 18v.01'/%3E%3C/svg%3E") center/contain no-repeat}
.lesson .fign-flag p{margin:0!important;flex:1;min-width:0;font-weight:600;font-size:inherit}
.lesson .fign-flag p::before{content:"Ảnh này có lưu ý: ";font-weight:700;color:#8A5A00}
.lesson .fign-img{margin:0!important;border:1px solid #F0D27A;border-top:0;border-radius:0 0 16px 16px;overflow:hidden;line-height:0;background:#fff}
.lesson .fign-img p{margin:0!important;line-height:1.6}
.lesson .fign-img img{display:block;width:100%;height:auto;border:0!important;border-radius:0!important;margin:0}
.lesson .fign-note{margin-top:12px;background:var(--gold-pale,#FFF8E1);border-left:5px solid var(--gold,#FDCE4C);border-radius:0 16px 16px 0;padding:14px 20px;color:var(--ink-strong,#17233c);font-size:15.5px;line-height:1.75;transition:background .3s,box-shadow .3s}
.lesson .fign-note p{margin:0 0 8px!important;font-size:inherit}.lesson .fign-note>:last-child{margin-bottom:0!important}
.lesson .fign-note ul,.lesson .fign-note ol{margin:6px 0 0;padding-left:22px}
.lesson .fign-flag{cursor:pointer}
.lesson .fign-flag::after{content:"Xem lưu ý \2193";margin-left:auto;flex:none;font-size:13px;font-weight:600;color:var(--blue,#1B5CC8);white-space:nowrap}
.lesson .fign-flag:hover::after{text-decoration:underline}
.lesson .fign-flag:focus-visible{outline:3px solid #2A7FE8;outline-offset:2px}
.lesson .fign-note.flash{animation:fignf 1.8s ease}
@keyframes fignf{0%,60%{background:#FFEFB5;box-shadow:0 0 0 3px rgba(245,197,66,.5)}100%{box-shadow:0 0 0 0 rgba(245,197,66,0)}}
@media (max-width:560px){.lesson .fign-flag{flex-wrap:wrap}.lesson .fign-flag::after{margin-left:28px}}
@media print{.lesson .fign-flag::after{display:none}}

/* Lưu ý có ảnh: nền vàng bao cả chữ (ở trên) và ảnh, không biểu tượng */
.lesson .figt{margin:22px 0;background:var(--gold-pale,#FFF8E1);border-left:6px solid var(--gold,#FDCE4C);border-radius:0 18px 18px 0;padding:16px 18px 18px 20px;box-sizing:border-box}
.lesson .figt-text{color:var(--ink-strong,#17233c);font-size:15.5px;line-height:1.75;margin-bottom:14px}
.lesson .figt-text p{margin:0 0 8px!important;font-size:inherit}.lesson .figt-text>:last-child{margin-bottom:0!important}
.lesson .figt-text ul{margin:0;padding:0;list-style:none}.lesson .figt-text ol{margin:0;padding-left:22px}
.lesson .figt-text li{margin:0 0 4px}.lesson .figt-text ul li{position:relative;padding-left:14px}
.lesson .figt-text ul li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:#C2860A}
.lesson .figt-text strong{color:#8A5A00}
.lesson .figt-img{margin:0!important;border-radius:14px;overflow:hidden;line-height:0;box-shadow:0 0 0 1px #F0DFA6;background:#fff}
.lesson .figt-img p{margin:0!important;line-height:1.6}
.lesson .figt-img img{display:block;width:100%;height:auto;border:0!important;border-radius:0!important;margin:0}
@media (max-width:560px){.lesson .figt{padding:12px 12px 14px 14px}}

/* ===== Ảnh trong bài (khớp 1-1 với editor) =====
   MẶC ĐỊNH: mọi ảnh (dán, kéo thả, chèn từ thư viện, chèn qua "Thêm tệp") dùng CHUNG một khung: rộng 100% khung nội dung, bo góc, viền, không phụ thuộc kích thước gốc của file.
   CHỈ KHI người soạn tự kéo cỡ / chỉnh trong hộp "Chỉnh ảnh" (có style width trên <img>) mới giữ cỡ riêng + vị trí (class alignleft/aligncenter/alignright/alignnone, ez-nowrap) + khoảng cách (style margin). */
.lesson article img:not([data-ez]):not(.emoji):not(.wp-smiley):not([style*="width"]){display:block;width:100%;max-width:100%;height:auto;margin:10px 0;border:1px solid var(--line,#E3E9F2);border-radius:14px;box-sizing:border-box}
.lesson article img.alignleft:not([data-ez]):not(.emoji):not(.wp-smiley):not([style*="width"]){width:50%;float:left;margin:4px 18px 10px 0}
.lesson article img.alignright:not([data-ez]):not(.emoji):not(.wp-smiley):not([style*="width"]){width:50%;float:right;margin:4px 0 10px 18px}
.lesson article img[style*="width"]:not([data-ez]):not(.emoji):not(.wp-smiley){max-width:100%;height:auto;border:1px solid var(--line,#E3E9F2);border-radius:14px;box-sizing:border-box}
.lesson.lesson article img.alignleft[style*="width"]{float:left;display:block;margin:4px 18px 10px 0}
.lesson.lesson article img.alignright[style*="width"]{float:right;display:block;margin:4px 0 10px 18px}
.lesson.lesson article img.aligncenter{float:none;display:block!important;margin-top:10px;margin-bottom:10px;margin-left:auto!important;margin-right:auto!important}
.lesson.lesson article img.alignnone[style*="width"]{float:none;display:inline-block;margin:8px 0;vertical-align:top}
.lesson.lesson article img.ez-nowrap{float:none!important;display:block!important;clear:both}
.lesson.lesson article img.alignright.ez-nowrap{margin-left:auto}
.lesson.lesson article img.ez-nb{border:0}
.lesson article::after{content:"";display:block;clear:both}
.lesson article .pager,.lesson article .fb{clear:both}
@media(max-width:640px){.lesson.lesson article img.alignleft,.lesson.lesson article img.alignright{float:none;display:block;margin-left:auto;margin-right:auto}.lesson article img.alignleft:not([data-ez]):not(.emoji):not(.wp-smiley):not([style*="width"]),.lesson article img.alignright:not([data-ez]):not(.emoji):not(.wp-smiley):not([style*="width"]){width:100%}}
/* Ảnh cũ nằm trong khung figure: bỏ khung trống bao quanh */
.lesson figure.shot.real{border:0;background:none;border-radius:0;overflow:visible;display:flow-root;margin:0 0 14px}
.lesson .shot.real img,.lesson .kv-fig img{vertical-align:top}

/* Mốc neo ẩn cho mục lục theo bước (không hiển thị, chỉ để cuộn tới) */
.lesson .kv h3.kv-sa{height:0;margin:0!important;padding:0;border:0;overflow:hidden;visibility:hidden;font-size:0;scroll-margin-top:150px}
