@charset "UTF-8";
/*!
Theme Name:   Storefront Custom
Theme URI:    https://woocommerce.com/products/storefront/
Author:       Timnn
Author URI:   https://woocommerce.com/
Description:  Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
Version:      4.6.1
Tested up to: 6.7
Requires PHP: 5.6.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  storefront-custom
Tags:         e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, editor-style

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Storefront is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer https://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/

All sizing (typography, layout, padding/margins, etc) are inspired by a modular scale that uses 1em as a base size with a 1.618 ratio.
You can read more about the calculator we use in our Sass here: https://github.com/modularscale/modularscale-sass

FontAwesome License: SIL Open Font License - http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
Images License: GNU General Public License v2 or later
*/
header {
  display: flex;
  position: relative;
  flex-direction: column;
}
@media (max-width: 768px) {
  header {
    align-items: center;
    justify-content: space-between;
  }
}
header > .col-full {
  display: flex;
  padding: 1em 0;
  align-items: center;
}
header > .col-full .site-branding .custom-logo-link img {
  width: 10rem;
  height: auto;
}
header > .col-full .site-search {
  flex-grow: 1;
  margin: 0 2em;
}
header > .col-full .site-search input[type=search] {
  width: 100%;
  max-width: 30em;
  padding: 0.5em;
  font-size: 1.2em;
}

header.site-header {
  display: flex;
}
header.site-header .content-header {
  display: flex;
  flex-direction: row;
  width: auto;
  padding: 0;
}
header.site-header .content-header .header-search {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  position: relative;
}
header.site-header .content-header .header-search .search-form {
  width: 100%;
  max-width: 400px;
}
header.site-header .content-header .header-search ul#sas-results {
  position: absolute;
  top: 4rem;
  left: 1rem;
  padding: 1rem 2rem;
}
header.site-header .content-header .header-search ul#sas-results li {
  padding: 1em;
}
header.site-header .content-primary-navigation {
  display: flex;
  margin-top: 1em;
  padding: 1em 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
header.site-header .content-primary-navigation > .col-full {
  display: flex;
  width: 100%;
}
header.site-header .content-primary-navigation > .col-full nav#site-navigation {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
header.site-header .content-primary-navigation > .col-full nav#site-navigation button {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 2.5em;
  height: 2.5em;
  position: relative;
  padding: 0;
}
header.site-header .content-primary-navigation > .col-full nav#site-navigation button::before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free", "FontAwesome", Arial, sans-serif;
  font-weight: 900;
  font-size: 2em;
  color: #333;
  display: block;
  text-align: center;
  background: transparent;
}
header.site-header .content-primary-navigation > .col-full nav#site-navigation button span {
  display: none;
}
header.site-header .content-primary-navigation > .col-full nav#site-navigation ul.menu {
  display: flex;
  position: relative;
  list-style: none;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
header.site-header .content-primary-navigation > .col-full nav#site-navigation ul.menu li a {
  text-decoration: none;
  color: #333;
  padding: 0.5em 1.5em;
}
header.site-header .content-primary-navigation > .col-full nav#site-navigation ul.menu li a:hover {
  color: #e60b57;
  border-radius: 2em;
  background-color: #f9f9f9;
}
@media (max-width: 768px) {
  header.site-header .content-primary-navigation > .col-full nav#site-navigation ul.menu {
    display: block;
    position: absolute;
    top: 4em;
    left: -200vh;
    z-index: 1000;
    width: 50%;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #f9f9f9;
    border-radius: 0.5em;
    padding: 1em 0;
    min-height: 30vh;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  header.site-header .content-primary-navigation > .col-full nav#site-navigation ul.menu li {
    padding: 1em;
  }
  header.site-header .content-primary-navigation > .col-full nav#site-navigation ul.menu li a {
    text-decoration: none;
    color: #333;
    padding: 0.5em 1.5em;
  }
  header.site-header .content-primary-navigation > .col-full nav#site-navigation ul.menu li a:hover {
    color: #e60b57;
    border-radius: 2em;
    background-color: #f9f9f9;
  }
}
@media (max-width: 768px) {
  header.site-header .content-primary-navigation > .col-full nav#site-navigation.toggled ul.menu {
    display: block;
    position: absolute;
    top: 4em;
    left: 0em;
    z-index: 1000;
    width: 70%;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@media (max-width: 768px) {
  header.site-header .content-primary-navigation > .col-full nav#site-navigation button {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  header.site-header {
    flex-direction: row;
    gap: 1em;
    align-items: start;
    position: relative;
  }
  header.site-header .content-header {
    flex: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  header.site-header .content-header .site-branding {
    margin-bottom: 1em;
  }
  header.site-header .content-header .header-search {
    width: 100%;
    padding: 0.5em;
  }
  header.site-header .content-primary-navigation {
    border: none;
    position: absolute;
    top: 0rem;
    left: 0rem;
    width: 100%;
    display: flex;
    justify-content: start;
  }
  header.site-header .content-primary-navigation .col-full {
    width: auto;
  }
}
.homebanner-top,
.banner-top {
  display: flex;
  justify-content: center;
  align-items: center;
}
.homebanner-top img,
.banner-top img {
  margin: 1em auto;
}

.entry-content .chord-highlight {
  line-height: 1.2;
  background-color: #f4f4f4;
  color: #e60b60;
  padding: 0.1em 0.5em;
  border-radius: 0.4em;
  font-weight: 600;
  font-size: 0.9em;
  margin: 0 0.3em;
}

.box-controls {
  display: flex;
  margin: 2em 0 0em 0;
  flex-direction: row;
  gap: 1em;
}
@media screen and (max-width: 768px) {
  .box-controls {
    flex-direction: column;
    align-items: center;
    gap: 0em;
  }
}

.textsize-box-controls,
.chord-box-controls {
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 0.2em 0;
  border-radius: 0.5em;
  padding: 0 0.2em;
  height: min-content;
  background: #f9f9f9;
  width: auto;
}
@media screen and (max-width: 768px) {
  .textsize-box-controls,
  .chord-box-controls {
    width: 100%;
    justify-content: center;
  }
}
.textsize-box-controls .icon,
.chord-box-controls .icon {
  padding: 0 1em;
}
.textsize-box-controls .icon svg,
.chord-box-controls .icon svg {
  width: 1.5em;
  height: 1.5em;
  fill: #e60b57;
  cursor: pointer;
}
.textsize-box-controls .icon svg:hover,
.chord-box-controls .icon svg:hover {
  fill: #d50a4b;
}
.textsize-box-controls div.textsize div#font-controls,
.textsize-box-controls div.textsize div#chord-controls,
.textsize-box-controls div.chords div#font-controls,
.textsize-box-controls div.chords div#chord-controls,
.chord-box-controls div.textsize div#font-controls,
.chord-box-controls div.textsize div#chord-controls,
.chord-box-controls div.chords div#font-controls,
.chord-box-controls div.chords div#chord-controls {
  display: flex;
  justify-content: center;
  align-items: center;
}
.textsize-box-controls div.textsize div#font-controls button,
.textsize-box-controls div.textsize div#chord-controls button,
.textsize-box-controls div.chords div#font-controls button,
.textsize-box-controls div.chords div#chord-controls button,
.chord-box-controls div.textsize div#font-controls button,
.chord-box-controls div.textsize div#chord-controls button,
.chord-box-controls div.chords div#font-controls button,
.chord-box-controls div.chords div#chord-controls button {
  background-color: #FFFFFF;
  color: #999999;
  border: 1px solid #ddd;
  padding: 0.2em 1em;
  font-size: 0.8em;
  border-radius: 0.3em;
  cursor: pointer;
  margin: 0 0.5em;
}
.textsize-box-controls div.textsize div#font-controls button:hover,
.textsize-box-controls div.textsize div#chord-controls button:hover,
.textsize-box-controls div.chords div#font-controls button:hover,
.textsize-box-controls div.chords div#chord-controls button:hover,
.chord-box-controls div.textsize div#font-controls button:hover,
.chord-box-controls div.textsize div#chord-controls button:hover,
.chord-box-controls div.chords div#font-controls button:hover,
.chord-box-controls div.chords div#chord-controls button:hover {
  background-color: #d50a4b;
  color: #FFFFFF;
}

.single-2col {
  display: grid;
  grid-template-columns: minmax(400px, 60%) minmax(400px, 40%);
  grid-column-gap: 2em;
}
.single-2col ._column1 {
  overflow: hidden;
}
.single-2col ._column2 {
  position: relative;
  display: block;
}
.single-2col ._column2 .sticky {
  position: sticky;
  top: 3em;
  z-index: 10;
  padding: 10px;
}

@media screen and (max-width: 768px) {
  .single-2col {
    grid-template-columns: 1fr;
  }
  .single-2col ._column2 {
    position: relative;
  }
  .single-2col ._column2 .sticky {
    display: flex;
    justify-content: center;
    padding: 10px;
  }
  .single-2col ._column2 .ba-aff-banner-wrapper {
    display: flex;
    justify-content: center;
  }
}
.singlelyrics-2col {
  display: grid;
  grid-template-columns: minmax(400px, 60%) minmax(400px, 40%);
  grid-column-gap: 2em;
}
.singlelyrics-2col ._column1 {
  overflow: hidden;
}
.singlelyrics-2col ._column2 {
  position: relative;
  display: block;
}
.singlelyrics-2col ._column2 .sticky {
  position: sticky;
  top: 3em;
  z-index: 10;
  padding: 10px;
}

@media screen and (max-width: 768px) {
  .singlelyrics-2col {
    grid-template-columns: 1fr;
  }
  .singlelyrics-2col ._column2 {
    position: relative;
  }
  .singlelyrics-2col ._column2 .sticky {
    display: flex;
    justify-content: center;
    padding: 10px;
  }
  .singlelyrics-2col ._column2 .ba-aff-banner-wrapper {
    display: flex;
    justify-content: center;
  }
}
.bannerAff_homepageBottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2em;
}

.bannerAff_rightCol {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.ba-aff-banner {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  border: 1px solid #dddddd;
  padding: 1em;
  border-radius: 0.5em;
}
.ba-aff-banner .ba-aff-thumbnail {
  width: 40%;
  max-width: 12rem;
  min-width: 10rem;
  text-align: center;
}
.ba-aff-banner .ba-aff-thumbnail a {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
}
.ba-aff-banner .ba-aff-thumbnail a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Giữ tỉ lệ, crop phần thừa */
  display: block;
}
.ba-aff-banner .ba-aff-thumbnail p.ba-aff-price {
  font-weight: 600;
  font-size: 1em;
  color: #ff7800;
}
.ba-aff-banner .ba-aff-content h3.title {
  font-size: 1.2em;
  margin: 0;
}
.ba-aff-banner .ba-aff-content h3.title a {
  color: #456789;
  text-decoration: none;
}
.ba-aff-banner .ba-aff-content h3.title a:hover {
  color: #e60b60;
}
.ba-aff-banner .ba-aff-content .ba-aff-des {
  font-size: 0.9em;
  color: #888888;
  line-height: 1.3;
}
.ba-aff-banner .ba-aff-meta .ba-aff-link {
  border: 1px solid #f9f9f9;
  display: flex;
  background: rgba(69, 103, 137, 0.5019607843);
  padding: 0.3em 2em;
  border-radius: 1em;
  justify-content: center;
  width: min-content;
  white-space: nowrap;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.8em;
}
.ba-aff-banner .ba-aff-meta .ba-aff-link:hover {
  background: #456789;
  color: #fff;
}

.allPosts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.allPosts .postItem ._title a {
  font-size: 1em;
  margin: 0.5em 0;
  color: #e60b60;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.2;
}
.allPosts .postItem ._thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.allPosts .postItem ._excerpt {
  font-size: 0.9em;
  line-height: 1.6;
}

.postRelated {
  display: block;
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid rgba(69, 103, 137, 0.3137254902);
}

.postsRelated_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.postsRelated_list a {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  gap: 0.5em;
}
.postsRelated_list a img {
  width: 6em;
  height: 4em;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 0.3em;
}
.postsRelated_list a p {
  margin: 0 0 0 0.5em;
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: #456789;
  /* hoặc màu chữ bạn muốn */
}
.postsRelated_list a:hover p {
  color: #e60b60;
  /* hoặc màu chữ bạn muốn */
}

.lyric-list,
.lyrics-shortcode-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em 2em;
  padding: 2em 0;
}
@media (max-width: 768px) {
  .lyric-list,
  .lyrics-shortcode-list {
    grid-template-columns: 1fr;
  }
}
.lyric-list li.lyric-item h3,
.lyrics-shortcode-list li.lyric-item h3 {
  margin: 0.2em 0;
}
.lyric-list li.lyric-item h3 a,
.lyrics-shortcode-list li.lyric-item h3 a {
  text-decoration: none;
  color: #456789;
  font-weight: 400;
}
.lyric-list li.lyric-item h3 a:hover,
.lyrics-shortcode-list li.lyric-item h3 a:hover {
  color: #ff334e;
}
.lyric-list li.lyric-item p.lyric-excerpt,
.lyrics-shortcode-list li.lyric-item p.lyric-excerpt {
  font-size: 0.9em;
  line-height: 1.6em;
}

.entry-lyric-title {
  font-size: 1.8em;
  margin: 0.5em 0;
  color: #e60b60;
  font-weight: 500;
}

ul.lyric-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.3em 1em;
  flex-wrap: wrap;
}
ul.lyric-meta li {
  display: flex;
  align-items: center;
}
ul.lyric-meta li svg {
  margin-right: 0.3em;
  color: #e60b57;
  width: 20px;
  height: 20px;
  -webkit-text-fill-color: #e60b57;
}
ul.lyric-meta li a {
  text-decoration: none;
  color: #333;
  font-size: 0.8em;
}
ul.lyric-meta li a:hover {
  color: #e60b57;
}

.lyricsRelated {
  padding-top: 1em;
  margin-top: 2em;
  border-top: 1px solid rgba(69, 103, 137, 0.3137254902);
}
.lyricsRelated ._title {
  color: #456789;
}
.lyricsRelated ._list ._item {
  padding: 0.5em 0;
}
.lyricsRelated ._list ._item a {
  text-decoration: none;
}
.lyricsRelated ._list ._item a ._name {
  font-weight: 500;
  color: #456789;
  font-size: 1.2em;
}
.lyricsRelated ._list ._item a ._name:hover {
  color: #e60b60;
}

.google-auto-placed.ap_container {
  margin: 2rem auto;
}

footer.site-footer {
  margin-top: 2em;
  padding: 2em;
}

.banner-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3em auto 2em auto;
  padding-top: 2em;
  border-top: 3px solid rgba(69, 103, 137, 0.1254901961);
}

body, html {
  font-family: "Mulish", Arial, Helvetica, sans-serif;
}

.entry-content p {
  line-height: 2;
}

svg {
  margin-right: 0.3em;
  width: 20px;
  height: 20px;
}

div#page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
}
@media screen and (max-width: 768px) {
  div#page {
    overflow-x: hidden;
  }
}

.navigation.pagination .nav-links {
  display: flex;
  margin: 1em;
  padding: 1em;
}
.navigation.pagination .nav-links a {
  border-radius: 100px;
  padding: 0.5em 1em;
  margin: 0 0.2em;
  background-color: #f9f9f9;
  color: #333;
  text-decoration: none;
  font-size: 0.9em;
}
.navigation.pagination .nav-links a:hover {
  background-color: #e60b57;
  color: #fff;
}
.navigation.pagination .nav-links span.page-numbers.current {
  border-radius: 100px;
  padding: 0.5em 1em;
  margin: 0 0.2em;
  background-color: #e60b57;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.9em;
}

.storefront-breadcrumb {
  margin: 0 !important;
}
@media screen and (min-width: 768px) {
  .storefront-breadcrumb {
    margin: 0 !important;
  }
}

/*# sourceMappingURL=style.css.map */