/* =================================================================
   CSS Refactoring includes modifications, updates, and additions.
   ================================================================= */

/* === Header & Banner === */
.main {
    width: 1006px;
    margin: 0 auto 3px;
    position: relative;
    background: #fff;
    box-shadow: 0 3px 5px #A7A7A7;
}
// .banner img{ display:block;}
.top-banner {
    width: 1000px;
    height: 200px;
    background-image:
        url('/storage/{{banner_image}}');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
.banner-content {
    position: absolute;
    left: 3px;
    top: 30px;
    width: 260px;
    text-align: center;
}
.banner-logo img {
    width: 200px;
    height: auto;
}
.banner-brand {
    margin-top: 5px;
    font-family: "Times New Roman", serif;
    font-size: 22px;
    font-weight: normal;
    color: #222;
}
.banner-slogan {
    margin-top: 10px;
    font-family: "Times New Roman", serif;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    color: #333;
}

/* === Main Menu === */
.menu {
    margin: 0;
    padding: 0;
    height: 35px;

    color: #000;
    font-weight: bold;

    background-image: url("../images/bg_menu.jpg");
    background-repeat: repeat-x;
}
.menu img{
    display:block;
    margin-bottom:1px;
}
.menu a {
    color: #000;
    font-size: 13px;
    text-decoration: none;
}
.menu a:hover {
    color: red;
}
.menu a.active{
    color: red;
    font-weight:bold;
}
.menu_home {
    vertical-align: bottom;
    padding-bottom:8px
}

/* === Lead Forms === */
.form-intro{
    margin:8px 12px 10px;
    font:normal 13px/1.6 Tahoma, Verdana, Arial, sans-serif;
    color:#555;
}
.form-error {
    display: block;
    margin-top: 4px;
    color: #d32f2f;
    font-size: 12px;
    line-height: 1.4;
}
.input-error {
    border: 1px solid #d32f2f !important;
    background: #fff8f8;
}
.alert-error{
    margin-bottom:15px;
    padding:10px 15px;
    border:1px solid #d32f2f;
    background:#fff5f5;
    color:#d32f2f;
}
.alert-error ul{
    margin:0;
    padding-left:20px;
}

/* === Captcha === */
.captcha-wrapper{
    margin-bottom:20px;
}
.captcha-wrapper .form-error{
    margin-top:6px;
}

/* === Sidebar Right === */
.bg_member{
    // background:url(../images/member-bg.jpg) no-repeat top center;
    // height:195x;

    background:#b9c2cd; /* Khối 1: xám đậm thay bằng màu nền CSS */
    // background: linear-gradient(#c3ccd6, #aeb8c3);

    min-height:195px; /* thay cho height cố định để linh hoạt khi có thông báo lỗi */
}
/* Khối 2: xám nhạt + đường line (dùng ảnh) */
.bg_member_footer{
    background:url(../images/member-bg-bottom.jpg) no-repeat top center;
}
.input_login{ width:115px; height:16px; border:1px solid #999; color:#333}

/* === Footer === */
.bg_footer{ border-top:2px solid #666; color:#999999; padding:10px 10px 5px 10px; background:url(../images/bottom_bg.png) repeat-x top}
.footer_design{ float:left; width:450px; text-align:left; color:#333}
.footer_share{ float:right; width:400px; text-align:right}
.footer_share a{ text-decoration:none;}
