/* --- CÀI ĐẶT CHUNG --- */
* { box-sizing: border-box; font-family: Arial, sans-serif; }
body { background-color: #f4f7f6; margin: 0; padding: 15px; }
.container { max-width: 1200px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* --- BANNER QUẢNG CÁO --- */
.banner-ads { width: 100%; max-width: 728px; height: 90px; margin: 0 auto 20px auto; background-color: #e9ecef; border: 2px dashed #adb5bd; display: flex; align-items: center; justify-content: center; color: #6c757d; font-weight: bold; font-size: 18px; text-align: center; }

h1, h3 { color: #333; text-align: center; }

/* --- KHU VỰC ĐIỀU KHIỂN TRÊN CÙNG --- */
.top-controls { margin-top: 15px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; align-items: center; background: #f9f9f9; padding: 15px; border-radius: 5px; }
.file-area, .find-replace-area { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* --- KHU VỰC CHÍNH (NHẬP/XUẤT) --- */
.main-area { display: flex; gap: 20px; margin-top: 20px; margin-bottom: 20px; }
.box { flex: 1; display: flex; flex-direction: column; }
textarea { width: 100%; height: 300px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; resize: none; white-space: pre; overflow-x: auto; }
.stats { font-size: 13px; color: #666; margin-top: 5px; text-align: right; }
.actions { margin-top: 10px; display: flex; justify-content: flex-end; }

/* --- KHU VỰC TÙY CHỌN & CHUYỂN ĐỔI --- */
.options-area { display: flex; flex-direction: column; align-items: center; background: #f9f9f9; padding: 20px; border-radius: 5px; margin-bottom: 20px; }
.checkbox-group { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; justify-content: center; width: 100%; }
.checkbox-group label { cursor: pointer; display: flex; align-items: center; gap: 5px; }

/* --- KHU VỰC NÂNG CẤP SLUG --- */
.slug-advanced-group { width: 100%; max-width: 800px; display: flex; flex-direction: column; align-items: flex-start; padding: 15px; margin-bottom: 20px; background: #eef6ff; border: 1px dashed #007bff; border-radius: 5px; }
.slug-advanced-group label { cursor: pointer; }
.slug-inputs { display: flex; gap: 15px; width: 100%; align-items: center; flex-wrap: wrap; }
.slug-inputs input[type="text"] { flex: 1; min-width: 250px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }

/* --- KHU VỰC TEXT CASE --- */
.text-case-area { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; background: #f9f9f9; padding: 15px; border-radius: 5px; }

/* --- NÚT BẤM (BUTTONS) & INPUT --- */
button { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.2s; }
button:hover { opacity: 0.8; }
.btn-primary { background-color: #007bff; color: white; width: 100%; max-width: 400px; padding: 15px; font-size: 16px; box-shadow: 0 4px 6px rgba(0,123,255,0.3); }
.btn-red { background-color: #dc3545; color: white; }
.btn-green { background-color: #28a745; color: white; }
input[type="text"], input[type="file"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }

/* --- TOAST THÔNG BÁO COPPY --- */
#toastMessage { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 50px; padding: 15px; position: fixed; z-index: 1000; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 16px; opacity: 0; transition: opacity 0.3s, bottom 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
#toastMessage.show { visibility: visible; opacity: 1; bottom: 50px; }

/* ========================================================
   CSS DÀNH RIÊNG CHO ĐIỆN THOẠI (RESPONSIVE)
======================================================== */
@media screen and (max-width: 768px) {
    .main-area { flex-direction: column; gap: 15px; }
    .top-controls { flex-direction: column; align-items: stretch; gap: 15px; }
    .file-area, .find-replace-area { flex-direction: column; width: 100%; align-items: stretch; }
    .file-area button, .find-replace-area button { width: 100%; margin-top: 5px; }
    
    #btnProcessMain { 
        order: -1; 
        margin-bottom: 20px; 
        max-width: 100%; 
        padding: 18px; 
    }
    
    .checkbox-group { flex-direction: column; align-items: flex-start; padding-left: 20px; }
    
    /* Responsive cho khu vực slug mới */
    .slug-advanced-group { padding: 10px; }
    .slug-inputs { flex-direction: column; align-items: flex-start; gap: 10px; }
    .slug-inputs input[type="text"] { width: 100%; min-width: unset; }
    
    .text-case-area { flex-direction: column; }
    .text-case-area button { width: 100%; }
    .banner-ads { height: 60px; font-size: 14px; }
    textarea { height: 200px; }
}