/*
Theme Name: Thumuasangocu
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.colleft,.colright{border:1px solid #ebebeb}
h3{font-size:17px}
h4{font-size:14px}
h3.catetit{background:#2489DA;color:#fff;text-transform:uppercase;padding:12px 0;text-align:center;margin:0;font-size: 13px;font-weight:700}
ul.menul{list-style:none;margin:0;padding:0}
ul.menul li{border-bottom:1px solid #ebebeb;padding-top:8px;padding-bottom:8px}
.colleft h3.catetit::after,.colright h3.catetit::after,.breadcrumb::after{content:'';width:0;height:0;border-bottom:21px solid transparent;border-top:21px solid transparent;float:right;margin-top:-12px}
.colleft h3.catetit::before,.colright h3.catetit::before,.breadcrumb::before{content:'';width:0;height:0;border-bottom:21px solid transparent;border-top:21px solid transparent;float:left;margin-top:-12px}
.breadcrumb::before,.breadcrumb::after{margin-top:-11px}
.support{background:#f7f7f7;padding-top:15px}
.item-item{padding-left:5px;padding-right:5px}
.header-main .nav > li > a {
    font-weight: 700; 
    padding-left: 15px;
    padding-right: 15px;
}
.header-main .nav > li > a:hover, 
.header-main .nav > li.active > a {
    background-color: rgba(0,0,0,0.1); 
}
.nav-dropdown {
    border-radius: 0px !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    border-top: 3px solid #f1c40f; 
    padding: 0; 
    min-width: 220px; 
}
.nav-dropdown > li {
    border-bottom: 1px solid #eaeaea;
    margin: 0;
}
.nav-dropdown > li:last-child {
    border-bottom: none;
}
.nav-dropdown > li > a {
    color: #333; 
    font-size: 14px;
    padding: 12px 15px; 
    text-transform: none;
    font-weight: 400;
    transition: all 0.2s;
}
.nav-dropdown > li > a:hover {
    background-color: #f9f9f9; 
    color: #1e73be; 
    padding-left: 20px; 
}
.tc-wrapper {
    background-color: #baddb6;
    border: 2px dashed #44862d;
    border-radius: 15px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
.tc-head {
    text-align: center;
    margin-bottom: 20px;
}
.tc-head h3 {
    color: #333;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px 0 !important;
    text-transform: uppercase;
}
.tc-head p {
    color: #333;
    font-size: 15px;
    font-weight: 700;
    margin: 0 !important;
    text-transform: uppercase;
}
.tc-head a {
    color: #0044cc !important;
    text-decoration: none;
    font-weight: 800;
}
.tc-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    gap: 10px;
    align-items: center;
}
.tc-body br { display: none !important; }
.tc-body p { margin: 0 !important; padding: 0 !important; display: contents; }
.tc-field, .tc-body select {
    width: 100% !important;
    height: 42px !important;
    border: 1px solid #fff !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    color: #555;
    background: #fff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.tc-btn {
    width: 100% !important;
    height: 42px !important;
    background: #5cad2c !important;
    background: linear-gradient(to bottom, #6ac134 0%, #5cad2c 100%) !important;
    color: #fff !important;
    font-weight: bold !important;
    text-transform: uppercase;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.tc-btn:hover {
    background: #4a8f23 !important;
}
.tc-btn {
    transform: translateY(0px) !important; 
}
.tc-body {
    align-items: flex-start !important;
}

.tc-field, .tc-body select {
    margin-top: 0 !important; 
}


/* Container bao ngoài tạo đường viền mỏng màu trắng */
.noi-that-form-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.8); /* Viền trắng hơi mờ */
    padding: 30px 40px;
    max-width: 500px; /* Độ rộng form, bạn có thể chỉnh lại */
    margin: 0 auto; /* Căn giữa form */
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif; /* Font chữ cơ bản */
}

/* Khoảng cách giữa các ô input */
.noi-that-form-wrapper .form-row {
    margin-bottom: 5px;
}

/* Style chung cho các ô nhập liệu (Input & Textarea) */
.noi-that-form-wrapper .form-control {
    width: 100%;
    background: #ffffff;
    border: none;
    border-radius: 4px; /* Bo góc nhẹ */
    padding: 12px 15px;
    font-size: 14px;
    color: #333;
    box-sizing: border-box; /* Đảm bảo padding không làm vỡ khung */
}

/* Style riêng cho ô Textarea (Yêu cầu) để cao hơn chút */
.noi-that-form-wrapper textarea.form-control {
    height: 50px;
}

/* Nút Submit */
.noi-that-form-wrapper .form-submit-row {
    text-align: center; /* Căn giữa nút bấm */
    margin-top: 10px;
}

.noi-that-form-wrapper input[type="submit"] {
    background-color: #29abe2; /* Mã màu xanh dương giống ảnh */
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase; /* Chữ in hoa */
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 0; /* Nút vuông vức hoặc bo nhẹ tùy bạn */
    /* Nếu muốn bo nhẹ nút bấm thì thêm dòng dưới: */
    /* border-radius: 3px; */
}

.noi-that-form-wrapper input[type="submit"]:hover {
    background-color: #1a8NCb; /* Màu đậm hơn khi di chuột vào */
}

/* Responsive: Trên mobile thì giảm padding chút cho đẹp */
@media (max-width: 600px) {
    .noi-that-form-wrapper {
        padding: 20px;
        width: 100%;
    }
    .noi-that-form-wrapper h3.form-title {
        font-size: 20px;
    }
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .tc-body {
        grid-template-columns: 1fr; 
        gap: 10px;
    }
    
    .tc-head h3 {
        font-size: 16px;
    }
    .tc-head p {
        font-size: 13px;
    }
    .tc-btn {
        width: 100% !important;
    }
@media only screen and (max-width: 768px) {
    .tc-wrapper {
        border: 2px dashed #44862d !important;
        background-color: #baddb6 !important;
        padding: 15px !important;
        margin: 0 10px !important; 
        border-radius: 10px !important;
    }
    .tc-head h3 {
        color: #111 !important; 
        text-shadow: none !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 5px !important;
    }
    .tc-head p {
        color: #333 !important;
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    .tc-btn {
        width: 100% !important;
        display: block !important;
        margin-top: 10px !important;
        transform: none !important; 
    }
    .tc-body {
        display: block !important; 
    }
    

}