/* ======================================== * AMT01 – LOADER + TOAST + PAGINATION * =====================================*/ /* ===== 1. DIMMER OVERLAY (3 chấm nhảy) ===== */ /* Dùng chung cho AMT.UI.loader: phủ toàn màn hình, nền mờ + 3 dot nhảy */ .amt-dimmer { position: fixed; inset: 0; display: none; z-index: 9999; } .amt-dimmer.is-active { display: flex; align-items: center; justify-content: center; } /* Nền mờ bên dưới */ .amt-dimmer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); } /* Khối chứa 3 dot */ .amt-dimmer-spinner { position: relative; display: flex; gap: 0.3rem; } /* 3 chấm nhảy nhảy */ .amt-dimmer-spinner .dot { width: 8px; height: 8px; border-radius: 999px; background: #fff; opacity: 0.6; animation: amt-dots 0.8s infinite alternate; } .amt-dimmer-spinner .dot:nth-child(2) { animation-delay: 0.15s; } .amt-dimmer-spinner .dot:nth-child(3) { animation-delay: 0.3s; } @keyframes amt-dots { from { transform: translateY(0); opacity: 0.4; } to { transform: translateY(-6px); opacity: 1; } } /* Nếu sau này anh muốn blur nội dung khi loading, có thể dùng rule này + JS add class 'amt-blur' vào và class 'amt-blur-target' vào vùng cần blur (tuỳ chọn). Hiện tại chưa dùng nên có thể COMMENT hoặc xoá. */ /* html.amt-blur .amt-blur-target { filter: blur(2px); } */ /* ===== 2. MODAL HỘP TRẮNG (OPTIONAL – CHƯA DÙNG) ===== */ /* Chỉ giữ nếu anh muốn dùng popup loading/hộp thông báo kiểu modal. Nếu hệ thống không render .amt-modal ở đâu -> Có thể xoá cho gọn. */ .amt-modal { position: fixed; left: 50%; top: 15%; transform: translateX(-50%); min-width: 320px; max-width: 92vw; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); z-index: 9999; display: none; } .amt-modal.show { display: block; } .amt-modal .hd { padding: 10px 14px; border-bottom: 1px solid #eee; font-weight: 600; } .amt-modal .bd { padding: 14px; display: flex; gap: 10px; align-items: center; } /* ===== 3. SPINNER VÒNG TRÒN (UTILITY) ===== */ /* Dùng khi anh cần icon loader dạng vòng quay (VD chèn trong modal hoặc nơi khác). */ .amt-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #ddd; border-top-color: #111; animation: amtspin 0.9s linear infinite; } @keyframes amtspin { to { transform: rotate(360deg); } } /* ===== 4. TOASTS (AMT.UI.toast) ===== */ /* Dùng chung cho AMT.UI.toast.success / error / info */ .amt-toasts { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 10px; align-items: center; } .amt-toast { min-width: 260px; max-width: 92vw; background: #111; color: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease; } .amt-toast.show { opacity: 1; transform: translateY(0); } /* Icon loader nhỏ bên trái nội dung toast */ .amt-toast .amt-icon { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; border-top-color: transparent; animation: amtspin .9s linear infinite; } .amt-toast.success { background: #16a34a; } .amt-toast.error { background: #dc2626; } .amt-toast.info { background: #111; } /* ===== 5. PAGINATION FALLBACK (x-pagination) ===== */ /* Dùng cho component khi không dùng sẵn Tailwind UI */ .amt-pag > ul { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; list-style: none; padding: 0; margin: .75rem 0 0; } .amt-pag li { display: inline-block; } .amt-pag a, .amt-pag span { display: inline-flex; align-items: center; padding: .375rem .625rem; border: 1px solid #e5e7eb; /* gray-200 */ border-radius: .5rem; /* rounded */ text-decoration: none; line-height: 1.2; white-space: nowrap; } .amt-pag a:hover { background: #f3f4f6; /* hover gray-100 */ } .amt-pag .is-disabled { opacity: .5; pointer-events: none; } .amt-pag .is-active { background: #000; color: #fff; border-color: #000; }