/**
 * Ant Page Builder — CSS nền frontend (≤15KB).
 * Mọi class dùng tiền tố apb- để tránh xung đột với theme.
 */

/* ---------- Khung trang & section ---------- */
.apb-page{--apb-sec-pad-sm:.5rem;--apb-sec-pad-md:1.5rem;--apb-sec-pad-lg:3rem;--apb-sec-pad-xl:5rem}
.apb-section{position:relative}
.apb-section-inner{width:100%}
.apb-width-container .apb-section-inner{max-width:var(--apb-layout-container,1200px);margin-inline:auto;padding-inline:1rem}
.apb-width-full .apb-section-inner{max-width:none}
.apb-align-left .apb-section-inner{text-align:left}
.apb-align-center .apb-section-inner{text-align:center}
.apb-align-right .apb-section-inner{text-align:right}
.apb-pt-none{padding-top:0}.apb-pt-sm{padding-top:var(--apb-sec-pad-sm)}.apb-pt-md{padding-top:var(--apb-sec-pad-md)}.apb-pt-lg{padding-top:var(--apb-sec-pad-lg)}.apb-pt-xl{padding-top:var(--apb-sec-pad-xl)}
.apb-pb-none{padding-bottom:0}.apb-pb-sm{padding-bottom:var(--apb-sec-pad-sm)}.apb-pb-md{padding-bottom:var(--apb-sec-pad-md)}.apb-pb-lg{padding-bottom:var(--apb-sec-pad-lg)}.apb-pb-xl{padding-bottom:var(--apb-sec-pad-xl)}

/* ---------- Ẩn theo thiết bị ---------- */
@media (min-width:1025px){.apb-hide-desktop{display:none!important}}
@media (min-width:768px) and (max-width:1024px){.apb-hide-tablet{display:none!important}}
@media (max-width:767px){.apb-hide-mobile{display:none!important}}

/* ---------- Hiệu ứng xuất hiện ---------- */
.apb-anim-fade,.apb-anim-fade-up,.apb-anim-zoom{opacity:0;transition:opacity .6s ease,transform .6s ease}
.apb-anim-fade-up{transform:translateY(24px)}
.apb-anim-zoom{transform:scale(.96)}
.apb-anim-fade.apb-inview,.apb-anim-fade-up.apb-inview,.apb-anim-zoom.apb-inview{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.apb-anim-fade,.apb-anim-fade-up,.apb-anim-zoom{opacity:1;transform:none;transition:none}}

/* ---------- Nút & chữ ---------- */
.apb-btn{display:inline-block;padding:.75rem 1.75rem;border-radius:var(--apb-radius-button,8px);background:var(--apb-color-primary,#2563eb);color:#fff;text-decoration:none;font-weight:600;border:0;cursor:pointer}
.apb-btn:hover{filter:brightness(.92);color:#fff}
.apb-empty-note{padding:1rem;border:1px dashed #9ca3af;border-radius:8px;color:#6b7280;background:#f9fafb;font-size:.9rem}
.apb-missing{padding:1rem;border:1px dashed #d97706;border-radius:8px;background:#fffbeb;color:#92400e}
.apb-preview-hidden{outline:2px dashed #9ca3af;outline-offset:-2px}

/* ---------- core/rich-text ---------- */
.apb-rich-text-inner>:first-child{margin-top:0}
.apb-rich-text-inner>:last-child{margin-bottom:0}
.apb-rich-text-inner img{max-width:100%;height:auto}

/* ---------- core/image ---------- */
.apb-core-image .apb-section-inner{text-align:center}
.apb-image-img{max-width:100%;height:auto;border-radius:6px}
.apb-variant-rounded .apb-image-img{border-radius:16px}
.apb-variant-wide .apb-image-img{width:100%}
.apb-image-caption{margin-top:.5rem;font-size:.9rem;color:var(--apb-color-muted,#6b7280)}

/* ---------- core/gallery ---------- */
.apb-gallery-title{margin:0 0 1rem}
.apb-gallery-grid{display:grid;grid-template-columns:repeat(var(--apb-gallery-cols,3),1fr);gap:.75rem}
.apb-gallery-item{margin:0}
.apb-gallery-img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:6px;display:block}
.apb-gallery-slider{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.apb-gallery-slide{flex:0 0 min(72%,420px);scroll-snap-align:start;margin:0}
.apb-gallery-slide-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block}
@media (max-width:767px){.apb-gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- core/cta ---------- */
.apb-cta-inner{padding:2.5rem 2rem;border-radius:12px}
.apb-variant-card .apb-cta-inner{box-shadow:0 8px 30px rgba(0,0,0,.12)}
.apb-cta-eyebrow{margin:0 0 .5rem;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.apb-cta-title{margin:0 0 .75rem;font-size:clamp(1.4rem,3vw,2rem);line-height:1.25}
.apb-cta-desc{margin:0 0 1.25rem;opacity:.9}

/* ---------- core/columns ---------- */
.apb-columns-inner{display:flex;gap:1.5rem}
.apb-column{min-width:0;flex:1 1 0}
.apb-layout-33-67 .apb-column:first-child{flex:1 1 33%}.apb-layout-33-67 .apb-column:last-child{flex:1 1 67%}
.apb-layout-67-33 .apb-column:first-child{flex:1 1 67%}.apb-layout-67-33 .apb-column:last-child{flex:1 1 33%}
.apb-layout-25-50-25 .apb-column:nth-child(1){flex:1 1 25%}.apb-layout-25-50-25 .apb-column:nth-child(2){flex:1 1 50%}.apb-layout-25-50-25 .apb-column:nth-child(3){flex:1 1 25%}
.apb-layout-100 .apb-column{flex:1 1 100%}
@media (max-width:767px){.apb-columns-inner{flex-direction:column}}

/* ---------- 1.2.0 (ADR-15): mọi nội dung nằm trong khung section ----------
   Áp cho cả frontend và bản xem trước Composer (preview_document nạp chính
   file CSS này). Hiện tượng đã gặp: đoạn chữ chạy tới mép phải và bị CẮT khi
   canvas hẹp; placeholder "Chưa chọn ảnh" tràn khỏi khung section. */
.apb-section,.apb-section-inner{box-sizing:border-box;min-width:0}
.apb-section-inner{overflow-wrap:break-word;word-wrap:break-word}
.apb-section-inner img,.apb-section-inner video{max-width:100%;height:auto}
.apb-section-inner iframe:not(.apb-video-frame){max-width:100%}
.apb-section-inner table{max-width:100%}
.apb-empty-note{max-width:100%;box-sizing:border-box;overflow-wrap:break-word}
/* Section con trong cột không bao giờ đẩy cột tràn */
.apb-column .apb-section{min-width:0;max-width:100%}

/* ---------- core/faq ---------- */
.apb-faq-title{margin:0 0 1rem}
.apb-faq-item{border:1px solid #e5e7eb;border-radius:8px;margin-bottom:.6rem;background:#fff}
.apb-faq-question{padding:.9rem 1.1rem;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.apb-faq-question::-webkit-details-marker{display:none}
.apb-faq-question::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--apb-color-muted,#6b7280)}
.apb-faq-item[open] .apb-faq-question::after{content:"–"}
.apb-faq-answer{padding:0 1.1rem 1rem;color:var(--apb-color-text,#1f2937)}

/* ---------- core/video ---------- */
.apb-video-title{margin:0 0 1rem}
.apb-video-wrap{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.apb-video-frame,.apb-video-file{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- core/spacer ---------- */
.apb-spacer-sm{height:.5rem}.apb-spacer-md{height:1.5rem}.apb-spacer-lg{height:3rem}.apb-spacer-xl{height:5rem}