/*
Theme Name: HopAmViet
Theme URI: https://demo.nqtno1.com/
Author: NQT
Author URI: https://demo.nqtno1.com/
Description: Giao dien HopAmViet.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: hopamviet
*/

/* custom css */

.navbar-brand {
	width: 40%;
}
#searchform {
	width: 50%!important;
}
@media (max-width: 768px) {
    #searchform {
        width: 100%!important; /* Khi màn hình <= 768px (mobile) */
    }
}
.container {
 padding-right: 0px;
padding-left: 0px;
}
.bg-light {
    background-color: #efefef !important;
}
/* Container tổng */
/* .col-12 {
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
 */
/* Tiêu đề bài hát */
.col-12 h5 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.col-12 h5 i {
    color: #ff6b6b; /* icon màu nổi */
    font-size: 1.2rem;
}

/* Tác giả */
.col-12 h5 small {
    font-weight: 400;
    font-size: 0.85rem;
    color: #555;
    margin-left: 5px;
}

.col-12 h5 small a {
    color: #ff4757;
    text-decoration: none;
}
.col-12 h5 small a:hover {
    text-decoration: underline;
}

/* Hợp âm và thông tin Tone/Capo */
.col-12 em {
    display: block;
    margin-top: 10px;
    line-height: 1.6;
    font-style: normal;
    font-size: 0.95rem;
    color: #333;
}

.chord {
    display: inline-block;
    color: #d63031;
    margin: 0 2px;

    font-weight: 600;
    font-family: monospace;
}

/* Link thể loại nhạc */
.col-12 a.float-right {
    font-size: 0.8rem;
    color: #999;
    text-decoration: none;
    transition: color 0.3s;
}
.col-12 a.float-right:hover {
    color: #ff6b6b;
}

/* Line phân cách */
.col-12 .clearfix + div {
    background: #ddd;
    height: 1px;
    margin: 15px 0;
}
.fa-user {
    font-size: 12px !important;
    color: #c7c7c7 !important;
}
.fa-guitar {
	font-size: 18px !important;
}

/* Container form */
#searchform {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* Input group */
#searchform .input-group {
    width: 100%;
    max-width: 600px; /* giới hạn chiều rộng */
    border-radius: 50px;
    overflow: hidden;
/*     box-shadow: 0 4px 12px rgba(0,0,0,0.08); */
}

/* Nút giọng nói */
#searchform .btn-light {
    border: none;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    transition: background 0.3s, transform 0.2s;
}
#searchform .btn-light:hover {
    background-color: #e0e0e0;
    transform: scale(1.05);
}

/* Input tìm kiếm */
#searchform .form-control.biginput {
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    flex: 1;
    outline: none;
}

/* Placeholder mờ hơn */
#searchform .form-control::placeholder {
    color: #aaa;
    font-style: italic;
}

/* Nút xóa */
#searchform .search-clear {
    position: absolute;
    right: 60px; /* cách nút submit */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 14px;
    transition: color 0.2s;
}
#searchform .search-clear:hover {
    color: #333;
}

/* Nút tìm kiếm */
#searchform .btn-primary {
    border-radius: 0 50px 50px 0;
    background: linear-gradient(45deg, #ff5a5f, #ff8080);
    border: none;
    color: #fff;
    font-weight: 500;
    padding: 0 20px;
    transition: background 0.3s, transform 0.2s;
}
#searchform .btn-primary:hover {
    background: linear-gradient(45deg, #ff8080, #ff5a5f);
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 576px) {
    #searchform .input-group {
        max-width: 100%;
    }
    #searchform .btn-primary {
        padding: 0 12px;
        font-size: 14px;
    }
    #searchform .form-control.biginput {
        font-size: 14px;
        padding: 8px 10px;
    }
}