/* He modal chung (phase 4): dat class "cm-modal" len .modal (Bootstrap 5). Khong doi JS / id cua tung modal.
   Cau truc:
     .modal.cm-modal > .modal-dialog(.cm-modal--lg|--xl) > .modal-content
       .cm-mh (tieu de + mo ta + nut dong)  .cm-mb (noi dung, cuon)  .cm-mf (hanh dong, dinh duoi)
   Truong: .cm-field > label + input/select + .cm-help ; .cm-fgrid (2 cot tren desktop) ; .cm-seg (lua chon dang chip, dung cho .btn-group.form-gradient)
   Vung tai anh: .cm-drop (boc #open-... co .card-upload-img ben trong; anh xem truoc do JS chen vao cung hien gon). Token mau: cm-tokens.css (sang/toi). */
.cm-modal { --mr: 24px; --mpad: 24px; }
.cm-modal .modal-dialog { max-width: 560px; margin: 24px auto; }
.cm-modal .modal-dialog.cm-modal--lg { max-width: 760px; }
.cm-modal .modal-dialog.cm-modal--xl { max-width: 1040px; }
.cm-modal .modal-content { border: 0; border-radius: var(--mr); background: var(--cm-surface); color: var(--cm-text); box-shadow: 0 40px 100px -30px rgba(10, 14, 30, .45); overflow: hidden; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; }
.cm-modal .modal-dialog-scrollable .modal-content, .cm-modal .modal-content { max-height: calc(100dvh - 48px); }

/* Dau */
.cm-mh { display: flex; align-items: flex-start; gap: 14px; padding: 20px var(--mpad) 16px; border-bottom: 1px solid var(--cm-line); flex-shrink: 0; }
.cm-mh__ic { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--cm-surface-2); color: var(--cm-text); }
.cm-mh__ic .icon { width: 20px; height: 20px; }
.cm-mh__t { flex: 1; min-width: 0; }
.cm-mh__t h2, .cm-mh__t h5 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--cm-text); }
.cm-mh__t p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--cm-muted); }
.cm-mx { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; margin: -2px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--cm-muted); cursor: pointer; transition: background-color .15s, color .15s; }
.cm-mx:hover { background: var(--cm-surface-2); color: var(--cm-text); }
.cm-mx .icon { width: 20px; height: 20px; }

/* Than */
.cm-mb { padding: 20px var(--mpad) 8px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.cm-mb > * + * { margin-top: 16px; }

/* Chan: luon thay nut hanh dong */
.cm-mf { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px var(--mpad); border-top: 1px solid var(--cm-line); background: var(--cm-surface); flex-shrink: 0; }
.cm-mf__note { margin-right: auto; font-size: 12.5px; color: var(--cm-muted); }
.cm-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--cm-line-2); background: var(--cm-surface); color: var(--cm-text) !important;
           font: 600 14.5px/1 inherit; font-family: inherit; cursor: pointer; transition: background-color .15s, border-color .15s, opacity .15s; white-space: nowrap; }
.cm-mbtn:hover { background: var(--cm-surface-2); }
.cm-mbtn .icon { width: 17px; height: 17px; }
.cm-mbtn--primary { border-color: transparent; background: var(--cm-text); color: var(--cm-bg) !important; }
.cm-mbtn--primary:hover { background: var(--cm-text); opacity: .88; }
.cm-mbtn[disabled] { opacity: .55; cursor: progress; }

/* Truong nhap */
.cm-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cm-field > label, .cm-field > .cm-label { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cm-text); }
.cm-field > label .cm-req { color: var(--cm-danger, #D92D20); }
.cm-modal .form-control, .cm-modal .form-select { min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--cm-line-2); background-color: var(--cm-surface); color: var(--cm-text); font-size: 15px; box-shadow: none; }
.cm-modal textarea.form-control { min-height: 96px; }
.cm-modal .form-control:focus, .cm-modal .form-select:focus { border-color: var(--cm-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-text) 12%, transparent); }
.cm-modal .form-control::placeholder { color: var(--cm-faint, #98A2B3); }
.cm-help, .cm-modal .form-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--cm-muted) !important; }
.cm-modal label.error, .cm-modal .error:not(input):not(select) { margin: 2px 0 0; font-size: 12.5px; font-weight: 500; color: var(--cm-danger, #D92D20); }
.cm-fgrid { display: grid; gap: 16px; }
@media (min-width: 768px) { .cm-fgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lua chon dang chip (giu .btn-group.form-gradient .btn + .active cua app.js) */
.cm-seg.btn-group { display: flex; width: 100%; flex-wrap: nowrap; gap: 6px; padding: 4px; border-radius: 14px; background: var(--cm-surface-2); box-shadow: none; }
.cm-seg.btn-group > .btn { flex: 1 1 0; justify-content: center; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; white-space: nowrap; margin: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important;
                           color: var(--cm-muted) !important; font-size: 14px; font-weight: 600; box-shadow: none !important; background-image: none !important; }
.cm-seg.btn-group > .btn .icon { width: 16px; height: 16px; }
.cm-seg.btn-group > .btn:hover { color: var(--cm-text) !important; }
.cm-seg.btn-group > .btn.active { background: var(--cm-surface) !important; color: var(--cm-text) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .1) !important; }

/* Vung tai anh / video */
.cm-drop { position: relative; }
.cm-drop .card-upload-img { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px !important; height: auto; margin: 0; padding: 24px; border-radius: 16px !important;
                            border: 1.5px dashed var(--cm-line-2) !important; background: var(--cm-surface-2) !important; color: var(--cm-muted); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.cm-drop .card-upload-img:hover { border-color: var(--cm-text) !important; color: var(--cm-text); }
.cm-drop .card-upload-img::before { content: ""; width: 44px; height: 44px; border-radius: 12px; background: var(--cm-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.cm-drop .card-upload-img span { font-size: 14.5px; font-weight: 600; color: var(--cm-text); }
.cm-drop .card-upload-img::after { content: attr(data-hint); font-size: 12.5px; color: var(--cm-muted); }
.cm-drop > div > img, .cm-drop img.rounded-10 { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: 16px !important; background: var(--cm-surface-2); cursor: pointer; }
.cm-drop progress { width: 100%; }

/* The tom tat (vd "Nop bai cho chu de ...") */
.cm-mcard { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--cm-surface-2); }
.cm-mcard img { flex: 0 0 96px; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.cm-mcard small { display: block; font-size: 12px; font-weight: 600; color: var(--cm-muted); text-transform: uppercase; letter-spacing: .04em; }
.cm-mcard b, .cm-mcard .topic-title { display: block; font-size: 15px; font-weight: 700; color: var(--cm-text); }

/* Tab nho trong modal (Anh / Video) */
.cm-mtabs { display: flex; width: 100%; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 12px; background: var(--cm-surface-2); list-style: none; }
.cm-mtabs > li { flex: 1 1 0; min-width: 0; }
.cm-mtabs a { display: flex; justify-content: center; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; color: var(--cm-muted); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.cm-mtabs a .icon { width: 16px; height: 16px; }
.cm-mtabs a.active { background: var(--cm-surface); color: var(--cm-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .1); }

/* Khoi anh + form trong modal: xep mot cot */
.cm-msplit { display: grid; gap: 20px; }
/* Mot cot (chu so huu, 02/10): anh tren, form duoi */

/* Di dong: modal bam day man hinh tu duoi len */
@media (max-width: 575.98px) {
    .cm-modal .modal-dialog { margin: 0; max-width: none; min-height: 100%; display: flex; align-items: flex-end; }
    .cm-modal .modal-content { border-radius: 22px 22px 0 0; max-height: 94dvh; width: 100%; }
    .cm-modal { --mpad: 18px; }
    .cm-mf .cm-mbtn { flex: 1; }
}

.cm-modal label.error:empty, #for-content-product:empty { display: none; }
.cm-modal .modal-content .form-select { min-width: 0; text-overflow: ellipsis; }

/* ===== Hop thoai nho (xac nhan / thong bao / nhap 1 truong) + toast: public/js/cm-dialog.js (thay SweetAlert2) ===== */
.cm-dlg { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--cm-surface); color: var(--cm-text);
          box-shadow: 0 40px 100px -30px rgba(10, 14, 30, .5); overflow: auto; font-family: inherit; animation: cmDlgIn .26s cubic-bezier(.2, .8, .2, 1); }
.cm-dlg::backdrop { background: rgba(10, 14, 30, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cmFade .2s ease; }
.cm-dlg.is-out { animation: cmDlgOut .16s ease forwards; }
@keyframes cmDlgIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes cmDlgOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes cmFade { from { opacity: 0; } }
.cm-dlg__f { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 28px 24px 22px; }
.cm-dlg__x { position: absolute; top: 12px; right: 12px; margin: 0; }
.cm-dlg__x svg { width: 20px; height: 20px; }
.cm-dlg__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; background: var(--ic-bg, var(--cm-surface-2)); color: var(--ic, var(--cm-text)); }
.cm-dlg__ic svg { width: 26px; height: 26px; }
.cm-dlg.is-success { --ic: #12B76A; --ic-bg: color-mix(in srgb, #12B76A 14%, transparent); }
.cm-dlg.is-error { --ic: #F04438; --ic-bg: color-mix(in srgb, #F04438 13%, transparent); }
.cm-dlg.is-warning { --ic: #F79009; --ic-bg: color-mix(in srgb, #F79009 15%, transparent); }
.cm-dlg.is-info { --ic: #2E90FA; --ic-bg: color-mix(in srgb, #2E90FA 13%, transparent); }
.cm-dlg.is-question { --ic: #7A5AF8; --ic-bg: color-mix(in srgb, #7A5AF8 13%, transparent); }
.cm-dlg__t { margin: 0; padding-right: 28px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--cm-text); text-wrap: balance; }
.cm-dlg__b { font-size: 14.5px; line-height: 1.55; color: var(--cm-text-2, var(--cm-muted)); }
.cm-dlg__b:empty { display: none; }
.cm-dlg__b img { max-width: 100%; height: auto; }
.cm-dlg__in { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cm-dlg .form-control, .cm-dlg .form-select { min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--cm-line-2); background: var(--cm-surface); color: var(--cm-text); font-size: 15px; width: 100%; }
.cm-dlg .form-control:focus, .cm-dlg .form-select:focus { outline: none; border-color: var(--cm-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-text) 12%, transparent); }
.cm-dlg textarea.form-control { min-height: 110px; }
.cm-dlg__err { margin: 0; font-size: 12.5px; color: var(--cm-danger, #D92D20); }
.cm-dlg__foot { font-size: 13px; color: var(--cm-muted); }
.cm-dlg__a { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.cm-dlg__a .cm-mbtn { min-width: 96px; }
.cm-dlg.is-loading .swal2-confirm { opacity: .6; cursor: progress; }
.cm-mbtn--danger { background: #D92D20 !important; color: #fff !important; }
@media (max-width: 575.98px) { .cm-dlg__a .cm-mbtn { flex: 1; } }

.cm-toasts { position: fixed; top: 72px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.cm-toast { display: flex; align-items: flex-start; gap: 10px; width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 16px; background: var(--cm-surface); color: var(--cm-text);
            box-shadow: 0 20px 44px -18px rgba(10, 14, 30, .45), 0 0 0 1px var(--cm-line); pointer-events: auto; cursor: pointer; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
.cm-toast.is-in { opacity: 1; transform: none; }
.cm-toast__ic { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; background: var(--ic-bg); color: var(--ic); }
.cm-toast__ic svg { width: 16px; height: 16px; }
.cm-toast.is-success { --ic: #12B76A; --ic-bg: color-mix(in srgb, #12B76A 14%, transparent); }
.cm-toast.is-error { --ic: #F04438; --ic-bg: color-mix(in srgb, #F04438 13%, transparent); }
.cm-toast.is-warning { --ic: #F79009; --ic-bg: color-mix(in srgb, #F79009 15%, transparent); }
.cm-toast.is-info, .cm-toast.is-question { --ic: #2E90FA; --ic-bg: color-mix(in srgb, #2E90FA 13%, transparent); }
.cm-toast__t { min-width: 0; padding-top: 3px; font-size: 14px; line-height: 1.4; }
.cm-toast__t b { display: block; font-weight: 600; }
.cm-toast__t .swal2-html-container { margin-top: 2px; font-size: 13px; color: var(--cm-muted); }
@media (prefers-reduced-motion: reduce) { .cm-dlg, .cm-dlg::backdrop, .cm-dlg.is-out { animation: none; } .cm-toast { transition: none; } }

/* select2 (chon nhieu) trong modal: cung kieu o nhap + the dang chip */
.cm-modal .select2-container--bootstrap-5 .select2-selection, .cm-modal .select2-container .select2-selection--multiple { min-height: 46px; padding: 5px 8px; border-radius: 12px; border: 1px solid var(--cm-line-2); background: var(--cm-surface); box-shadow: none; }
.cm-modal .select2-container--focus .select2-selection, .cm-modal .select2-container--open .select2-selection { border-color: var(--cm-text) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-text) 12%, transparent) !important; }
.cm-modal .select2-selection__rendered { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; }
.cm-modal .select2-selection__choice { display: inline-flex !important; align-items: center; gap: 4px; height: 30px; margin: 0 !important; padding: 0 6px 0 12px !important; border: 0 !important; border-radius: 999px !important; background: var(--cm-surface-2) !important; color: var(--cm-text) !important; font-size: 13.5px; font-weight: 600; }
.cm-modal .select2-selection__choice__remove { order: 2; position: static !important; width: 20px; height: 20px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50%; background-color: transparent !important; color: var(--cm-muted) !important; font-size: 15px; line-height: 20px; }
.cm-modal .select2-selection__choice__remove:hover { background-color: var(--cm-line) !important; color: var(--cm-text) !important; }
.cm-modal .select2-search--inline .select2-search__field { height: 30px !important; margin: 0 0 0 4px !important; font-size: 14.5px; }