demo-audio-2

demo-audio-2/css/style_pc.css

@@ -0,0 +1,998 @@
+:root {
+  --color-primary: #ff5c00;
+  --color-secondary: #1f1f1f;
+  --white: #fff;
+  --black: #000;
+  --gray: #b7b7b7;
+  --gray-2: #999999;
+  --box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+  --marker-color: #d9d9d9;
+}
+*,
+::after,
+::before {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+}
+html {
+  font-size: 16px;
+}
+body {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: "Inter", sans-serif;
+  color: #000;
+  min-width: 1220px;
+  word-break: break-word;
+  line-height: 1.3;
+  font-weight: 400;
+  background-color: #fff;
+}
+.container {
+  max-width: 1220px;
+  width: 100%;
+  padding: 0 10px;
+  margin: 0 auto;
+}
+.box-w {
+  border-radius: 15px;
+  background-color: #fff;
+  padding: 12px;
+}
+.alert-mess {
+  text-align: center;
+  padding: 50px 30px;
+  font-size: 20px;
+  font-weight: 500;
+  color: red;
+}
+.paging {
+  padding: 56px 10px 32px;
+  text-align: center;
+}
+.paging-link.active,
+.paging-link:hover {
+  color: #fff;
+  background: var(--color-secondary);
+  font-weight: 500;
+  border-color: var(--color-secondary);
+}
+.paging-link {
+  display: -webkit-inline-box !important;
+  display: -ms-inline-flexbox !important;
+  display: inline-flex !important;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-right: 8px;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 16px;
+  line-height: 20px;
+  text-decoration: none;
+  background: #fff;
+  text-transform: capitalize;
+  width: 34px;
+  height: 34px;
+  color: #000;
+}
+.routing ol {
+  margin: 0;
+  list-style: none;
+}
+.routing-link {
+  position: relative;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 0 10px;
+  color: #888;
+  text-decoration: none;
+}
+.routing-link:first-child {
+  padding-left: 0;
+}
+.routing-link:last-child {
+  color: #333;
+  max-width: 700px;
+  overflow: hidden;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+.routing-link:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  -webkit-transform: translateY(-50%) rotate(25deg);
+  -ms-transform: translateY(-50%) rotate(25deg);
+  transform: translateY(-50%) rotate(25deg);
+  width: 1px;
+  height: 80%;
+  border-right: 1px solid #dfdfdf;
+}
+.success-form {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99999;
+  background: rgba(0, 0, 0, 0.5);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.success-form .cart-success {
+  width: 500px;
+  height: 300px;
+  background: #fff;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: fixed;
+}
+.success-form .success-form-svg {
+  display: block;
+  height: 80px;
+  width: 80px;
+  color: var(--color-primary);
+}
+.success-form .text-cart-success {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.6;
+  padding-top: 30px;
+}
+.cart:hover .cart-ttip {
+  display: block;
+}
+.cart-ttip {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  border-radius: 10px;
+  width: 400px;
+  height: auto;
+  right: 0;
+  top: 24px;
+  z-index: 3;
+  -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
+  box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
+}
+.cart-ttip .cart-ttip-price-button {
+  border-radius: 5px;
+  padding: 10px;
+  background: var(--color-primary);
+  text-align: center;
+  margin: 0 12px 12px;
+}
+.cart-ttip .cart-ttip-item-container {
+  max-height: 300px;
+  overflow: auto;
+}
+.cart-ttip .cart-ttip-item-container .compare-item {
+  height: auto;
+  margin: 0;
+  max-width: unset;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.cart-ttip .cart-ttip .header-null-cart {
+  width: 100% !important;
+  text-align: center;
+  padding: 30px;
+  color: #000;
+  font-weight: 600;
+}
+.cart-ttip .header-cart-item-price {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+.cart-ttip .cart-ttip-price,
+.compare-item,
+.header-nav-menu a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+}
+.cart-ttip .header-cart-item-price p {
+  font-weight: 700;
+  width: auto;
+}
+.cart-ttip .cart-ttip-price {
+  padding: 10px 20px 10px 10px;
+  border-top: 3px solid var(--color-primary);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end !important;
+  -ms-flex-pack: end !important;
+  justify-content: flex-end !important;
+  gap: 6px;
+}
+.cart-ttip .cart-ttip-price p {
+  color: #000;
+  width: auto;
+  padding: 0;
+  margin: 0;
+}
+.cart-ttip .cart-ttip-price p:first-child {
+  font-size: 15px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.cart-ttip .cart-ttip-price p:nth-child(2) {
+  font-size: 13px;
+  font-weight: 200;
+  color: var(--color-primary);
+  margin-left: 0 !important;
+}
+.cart-ttip .cart-ttip-price p:last-child {
+  font-size: 15px;
+  font-weight: 700;
+}
+.cart-ttip .compare-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  -webkit-box-shadow: 0 1px 8px rgb(0 0 0 / 25%);
+  box-shadow: 0 1px 8px rgb(0 0 0 / 25%);
+  padding: 10px;
+  border-radius: 10px;
+  max-width: 360px;
+  background: #fff;
+}
+.cart-ttip .compare-item img {
+  width: 80px;
+  border: 5px;
+}
+.cart-ttip .compare-item .compare-item-text {
+  display: inline-block;
+  padding: 0 10px;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.cart-ttip .compare-item .compare-item-text p {
+  background: 0 0;
+  color: #000;
+  padding: 0;
+  width: 100%;
+  word-break: break-word;
+  line-height: 24px;
+  margin-left: 0;
+}
+.cart-ttip .header-null-cart {
+  width: 100%;
+  text-align: center;
+  padding: 24px;
+  color: #000;
+  font-size: 14px;
+  font-weight: 600;
+}
+.static-icons {
+  background-image: url(../images/static-icons-map-pc.png);
+  background-repeat: no-repeat;
+  display: inline-block;
+  background-size: 240px 227px;
+}
+.static-icons-static-icon-category-grid {
+  width: 23px;
+  height: 20px;
+  background-position: -2px -2px;
+}
+.static-icons-static-icon-category-list {
+  width: 23px;
+  height: 20px;
+  background-position: -30px -2px;
+}
+.static-icons-static-icon-feature-calendar {
+  width: 32px;
+  height: 32px;
+  background-position: -57px -2px;
+}
+.static-icons-static-icon-feature-calendar-orange {
+  width: 36px;
+  height: 36px;
+  background-position: -94px -2px;
+}
+.static-icons-static-icon-feature-delivery {
+  width: 32px;
+  height: 26px;
+  background-position: -135px -2px;
+}
+.static-icons-static-icon-feature-delivery-orange {
+  width: 46px;
+  height: 36px;
+  background-position: -2px -33px;
+}
+.static-icons-static-icon-feature-phone {
+  width: 32px;
+  height: 32px;
+  background-position: -135px -33px;
+}
+.static-icons-static-icon-feature-wallet {
+  width: 32px;
+  height: 31px;
+  background-position: -53px -70px;
+}
+.static-icons-static-icon-fire {
+  width: 21px;
+  height: 30px;
+  background-position: -90px -70px;
+}
+.static-icons-static-icon-header-cart {
+  width: 20px;
+  height: 20px;
+  background-position: -116px -70px;
+}
+.static-icons-static-icon-header-cart-pro {
+  width: 20px;
+  height: 20px;
+  background-position: -141px -70px;
+}
+.static-icons-static-icon-header-cart-pro-big {
+  width: 26px;
+  height: 25px;
+  background-position: -2px -95px;
+}
+.static-icons-static-icon-header-delivery {
+  width: 24px;
+  height: 20px;
+  background-position: -166px -70px;
+}
+.static-icons-static-icon-header-phone {
+  width: 24px;
+  height: 24px;
+  background-position: -116px -95px;
+}
+.static-icons-static-icon-header-search {
+  width: 20px;
+  height: 20px;
+  background-position: -145px -95px;
+}
+.static-icons-static-icon-header-user {
+  width: 22px;
+  height: 24px;
+  background-position: -33px -120px;
+}
+.static-icons-static-icon-location {
+  width: 13px;
+  height: 14px;
+  background-position: -172px -2px;
+}
+.static-icons-static-icon-phone-ct {
+  width: 14px;
+  height: 14px;
+  background-position: -172px -21px;
+}
+.static-icons-static-icon-phone-ct-orange {
+  width: 26px;
+  height: 28px;
+  background-position: -60px -120px;
+}
+.static-icons-static-icon-red-gift {
+  width: 16px;
+  height: 16px;
+  background-position: -53px -40px;
+}
+.static-icons-static-icon-review-user {
+  width: 31px;
+  height: 31px;
+  background-position: -145px -120px;
+}
+.static-icons-static-icon-social-fb {
+  width: 42px;
+  height: 42px;
+  background-position: -191px -2px;
+}
+.static-icons-static-icon-social-fb-orange {
+  width: 34px;
+  height: 34px;
+  background-position: -195px -49px;
+}
+.static-icons-static-icon-social-gg-news {
+  width: 42px;
+  height: 42px;
+  background-position: -195px -88px;
+}
+.static-icons-static-icon-social-gg-news-orange {
+  width: 34px;
+  height: 34px;
+  background-position: -91px -135px;
+}
+.static-icons-static-icon-social-instagram {
+  width: 42px;
+  height: 42px;
+  background-position: -181px -135px;
+}
+.static-icons-static-icon-social-instagram-orange {
+  width: 34px;
+  height: 34px;
+  background-position: -2px -182px;
+}
+.static-icons-static-icon-social-twitter {
+  width: 42px;
+  height: 42px;
+  background-position: -41px -182px;
+}
+.static-icons-static-icon-social-youtube {
+  width: 42px;
+  height: 42px;
+  background-position: -88px -182px;
+}
+.static-icons-static-icon-star-orange {
+  width: 13px;
+  height: 12px;
+  background-position: -75px -50px;
+}
+.static-icons-static-icon-thunder {
+  width: 27px;
+  height: 41px;
+  background-position: -135px -182px;
+}
+@-webkit-keyframes gradient-bg-antimation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@keyframes gradient-bg-antimation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+.heading-primary .title {
+  font-size: 32px;
+  line-height: 38px;
+  font-weight: 700;
+  padding: 24px 0;
+}
+.heading-primary .offsite-wrapper {
+  width: 100%;
+  flex: 1;
+  line-height: 24px;
+  border-bottom: 2px solid var(--color-secondary);
+  text-align: right;
+}
+.heading-primary .view-more {
+  position: relative;
+  display: inline-block;
+  color: var(--color-primary);
+  transform: translateY(-2px);
+  line-height: 20px;
+  margin-right: 4px;
+}
+.heading-primary .view-more::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--color-primary);
+}
+.global-time-deal {
+  font-size: 20px;
+  line-height: 30px;
+  gap: 4px;
+}
+.global-time-deal p {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background: #171717;
+  border-radius: 5px;
+  min-width: 26px;
+  line-height: 36px;
+  padding: 0 4px;
+}
+.header {
+  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.25);
+}
+.header .header-top .row {
+  height: 40px;
+}
+.header .header-bottom .row {
+  height: 105px;
+}
+.header .header-bottom .category .image {
+  height: 25px;
+}
+.header .header-bottom .function .icon {
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ebe9eb;
+  border-radius: 5px;
+}
+.homepage .swiper-section-hero .swiper-pagination-bullet {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #fff;
+  background-color: transparent;
+  opacity: 1;
+}
+.homepage .swiper-section-hero .swiper-pagination-bullet-active {
+  background-color: var(--color-primary);
+  border-color: transparent;
+}
+.homepage .swiper-section-hero .wrapper-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.homepage .swiper-section-hero .wrapper-content .title {
+  font-size: 64px;
+  line-height: 78px;
+  font-weight: 600;
+  max-width: 484px;
+  margin: 0 auto;
+}
+.homepage .swiper-section-hero .wrapper-content .text {
+  font-size: 20px;
+  line-height: 24px;
+  max-width: 666px;
+  margin: 12px auto 0;
+}
+.homepage .section-brand {
+  border-radius: 15px;
+}
+.homepage .section-brand .swiper {
+  margin: 0 30px;
+  padding: 30px 0;
+}
+/*  */
+.homepage .section-deal .heading-deal {
+  background-color: var(--color-primary);
+  border-radius: 15px;
+  padding: 10px 16px;
+  color: white;
+  margin-bottom: 20px;
+}
+.homepage .section-deal .heading-deal .wrapper-title {
+  font-size: 40px;
+  line-height: 48px;
+  font-weight: 900;
+}
+.homepage .section-deal .product-deal .wrapper-deal {
+  height: 20px;
+  width: 100%;
+}
+.homepage .section-deal .product-deal .wrapper-deal .deal-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: 10px;
+  background: linear-gradient(270deg, #ffb800 0%, #ff7a30 100%);
+}
+.homepage .section-deal .product-deal .wrapper-deal .deal-line.total {
+  opacity: 0.3;
+}
+.homepage .section-deal .product-deal .wrapper-deal .deal-line.remaining {
+  background: -o-repeating-linear-gradient(
+    left,
+    #ffb800 0,
+    #ff7a30 50%,
+    #ffb800 100%
+  );
+  background: repeating-linear-gradient(
+    to right,
+    #ffb800 0,
+    #ff7a30 50%,
+    #ffb800 100%
+  );
+  background-size: 200% auto;
+  background-position: 0 100%;
+  -webkit-animation: 2s linear infinite forwards gradient-bg-antimation;
+  animation: 2s linear infinite forwards gradient-bg-antimation;
+}
+.homepage .section-deal .product-deal .wrapper-deal .static-icons {
+  position: absolute;
+  bottom: 2px;
+  left: 0;
+}
+.homepage .section-deal .product-deal .wrapper-deal .sold {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.homepage .section-deal .product-deal .p-deal-featured .p-cart {
+  height: 50px;
+  border: 1px solid var(--color-primary);
+  border-radius: 10px;
+}
+.homepage .section-deal .product-deal .p-deal-featured .p-image {
+  border-radius: 25px;
+  border: 4px solid var(--color-primary);
+}
+.homepage .section-deal .product-deal .p-deal-other .p-image {
+  max-width: 124px;
+  width: 100%;
+  padding-bottom: 0;
+  border-radius: 8px;
+}
+.homepage .section-deal .product-deal .p-deal-other .swiper {
+  height: 392px;
+}
+
+.homepage .section-deal .banner-deal-image {
+  position: relative;
+  border-radius: 15px;
+  overflow: hidden;
+  display: block;
+}
+.homepage .section-deal .banner-deal-image .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.homepage .section-deal .banner-deal-image .wrapper-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+  max-width: 335px;
+  width: 100%;
+  text-align: center;
+}
+.homepage .section-deal .banner-deal-image .wrapper-content .title {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 600px;
+}
+.homepage .section-deal .banner-deal-image .wrapper-content .btn {
+  padding: 13px 33px;
+  width: max-content;
+  margin: 0 auto;
+  border-radius: 10px;
+}
+
+/*  */
+.homepage .section-category .category-child {
+  border-bottom: 1px solid #d9d9d9;
+}
+.homepage .section-category .category-child .list {
+  gap: 50px;
+}
+.homepage .section-category .category-child .item {
+  position: relative;
+  cursor: pointer;
+  padding-bottom: 10px;
+  transform: translateY(1px);
+}
+.homepage .section-category .category-child .item.selected {
+  color: var(--color-primary);
+}
+.homepage .section-category .category-child .item.selected::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--color-primary);
+}
+.homepage .section-customer .list {
+  margin: 12px 0 38px;
+}
+.homepage .section-customer .customer-product-review {
+  border-top: 1px solid var(--color-primary);
+}
+
+.homepage .section-customer .customer-product-image {
+  border-radius: 15px;
+}
+
+/*  */
+.p-item .p-image {
+  position: relative;
+  padding-bottom: 100%;
+  overflow: hidden;
+  display: flex;
+}
+.p-item .p-img {
+  margin: auto 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  position: absolute;
+}
+.p-item .p-name {
+  display: block;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  margin: 12px 0 8px;
+}
+.p-item .p-price-sale {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.p-item .p-price-stock {
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 500;
+  color: #b7b7b7;
+  text-decoration: line-through;
+  margin-left: 8px;
+}
+.p-item .p-summary {
+  font-size: 13px;
+  line-height: 18px;
+  max-width: 190px;
+}
+.p-item .p-cart {
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--color-primary);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.footer .footer-top .features {
+  border-top: 1px solid #f0f0f0;
+  height: 110px;
+}
+.footer .footer-mid {
+  background-color: #f0f0f0;
+}
+.footer .footer-mid .row {
+  height: 180px;
+}
+.footer .footer-bottom {
+  padding: 30px 0 40px;
+}
+.footer .footer-bottom .list li:not(:last-child) {
+  margin-bottom: 8px;
+}
+.footer .footer-bottom .list a:hover {
+  color: var(--color-primary);
+}
+.footer .footer-bottom .ministry-of-industry-and-trade {
+  max-width: 140px;
+  margin-top: 30px;
+}
+.footer .copy-right {
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/*  */
+.category-page .banner .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  font-size: 40px;
+  line-height: 48px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #fff;
+}
+.category-page .sort {
+  border-bottom: 1px solid #f0f0f0;
+}
+.category-page .sort .sort-by-collection select {
+  width: 156px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: #f0f0f0;
+  outline: 0;
+  border: 0;
+  padding: 4px;
+}
+.category-page .filter {
+  background-color: #f0f0f0;
+  border-radius: 15px;
+  padding: 16px 8px;
+}
+.category-page .filter .filter-item {
+  border-top: 1px solid #1f1f1f;
+  padding-top: 12px;
+}
+.category-page .filter .filter-item .list .check-box {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #ffffff;
+  border-radius: 3px;
+}
+
+/*  */
+.color-green {
+  color: #64c800;
+}
+.color-blue {
+  color: #0079c8;
+}
+.gray-line {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid #e1e1e1;
+}
+.detail-page .section-product .pro-name {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.detail-page .section-product .pro-sub-title {
+  line-height: 26px;
+}
+.detail-page .section-product .pro-price .title {
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+  display: inline-block;
+  width: 90px;
+}
+.detail-page .section-product .pro-status .pro-status-item {
+  padding: 8px 12px;
+  background: #f0f0f0;
+  border-radius: 8px;
+  display: inline-block;
+}
+.detail-page .section-product .pro-gift .title {
+  font-size: 16px;
+  line-height: 26px;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.detail-page .section-product .pro-gift .list {
+  position: relative;
+  padding: 16px;
+  background: #f0f0f0;
+  border-radius: 15px;
+}
+.detail-page .section-product .pro-gift .list::after {
+  position: absolute;
+  content: "";
+  top: -12px;
+  left: 60px;
+  width: 20px;
+  height: 12px;
+  clip-path: polygon(50% 0%, 0 100%, 100% 100%);
+  background: #f0f0f0;
+}
+.detail-page .section-product .pro-gift .list .item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.detail-page .section-product .pro-gift .list .marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--color-primary);
+  font-size: 12px;
+  line-height: 13px;
+  font-weight: 700;
+  color: #fff;
+}
+.detail-page .section-product .pro-cart .pro-cart-quantity {
+  max-width: 72px;
+  width: 100%;
+  height: 50px;
+  background: #f0f0f0;
+  border-radius: 5px;
+  outline: 0;
+  border: 0;
+  padding: 12px 18px;
+  font-size: 16px;
+  font-weight: 700;
+}
+.detail-page .section-product .pro-cart .pro-cart-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 245px;
+  width: 100%;
+  height: 50px;
+  border-radius: 25px;
+  border: 1px solid var(--color-primary);
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.detail-page .section-review .review-form {
+  padding: 20px 12px 30px;
+  border: 1px solid #e1e1e1;
+  border-radius: 15px;
+}
+.detail-page .section-review .review-form .review-form-item {
+  margin-bottom: 20px;
+}
+.detail-page .section-review .review-form .review-form-item .r-input {
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 10px;
+  height: 42px;
+  width: 100%;
+  font-size: 14px;
+  line-height: 18px;
+  padding: 10px;
+  outline-color: #d7d7d7;
+}
+.detail-page .section-review .review-form .review-form-item textarea.r-input {
+  height: 106px;
+  resize: none;
+  margin-bottom: -4px;
+}
+
+.detail-page .section-review .review-form .review-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 212px;
+  height: 42px;
+  background: #1f1f1f;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #fff;
+}

demo-audio-2/js/main_pc.js

@@ -0,0 +1,116 @@
+// HOMEAPGE FUNC
+function homepageHandler() {
+  swiperSectionHero();
+  swiperSectionBrand();
+  swiperDealList();
+}
+
+homepageHandler();
+
+// SWIPER SECTION HERO
+function swiperSectionHero() {
+  new Swiper(".swiper-section-hero", {
+    spaceBetween: 12,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+  });
+}
+
+function swiperSectionBrand() {
+  new Swiper(".swiper-section-banner", {
+    spaceBetween: 20,
+    slidesPerView: 6,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+  });
+}
+
+function swiperDealList() {
+  new Swiper(".swiper-deal-list", {
+    direction: 'vertical',
+    spaceBetween: 10,
+    slidesPerView: 3,
+    rewind: true,
+    speed: 1000,
+    autoplay: {
+      delay: 2500,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: "true",
+    },
+  });
+}
+
+// PRODUCT DETAIL
+// PRODUCT THUMBNAIL
+let galleryThumbs = new Swiper(".gallery-thumbs", {
+  spaceBetween: 12,
+  slidesPerView: 5,
+  slideToClickedSlide: true,
+  freeMode: true,
+  watchSlidesProgress: true,
+  centerInsufficientSlides: true,
+});
+
+let galleryTop = new Swiper(".gallery-top", {
+  spaceBetween: 12,
+  slidesPerView: 1,
+  speed: 1000,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+    pauseOnMouseEnter: "true",
+  },
+  thumbs: {
+    swiper: galleryThumbs,
+  },
+  // AUTO SILDED AT FISRT AND END
+  on: {
+    slideChange: function () {
+      let activeIndex = this.activeIndex + 1;
+
+      let activeSlide = document.querySelector(
+        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`
+      );
+      let nextSlide = document.querySelector(
+        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`
+      );
+      let prevSlide = document.querySelector(
+        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`
+      );
+
+      if (
+        nextSlide &&
+        !nextSlide.classList.contains("swiper-slide-visible")
+      ) {
+        this.thumbs.swiper.slideNext();
+      } else if (
+        prevSlide &&
+        !prevSlide.classList.contains("swiper-slide-visible")
+      ) {
+        this.thumbs.swiper.slidePrev();
+      }
+    },
+  },
+});
+
+// FANCY-BOX
+$('[data-fancybox="gallery"]').fancybox({
+  thumbs: {
+    autoStart: true
+  }
+});
+

demo-audio-2/test.html

@@ -0,0 +1,170 @@
+<script>
+  // DEAL TIME DOWN
+  function dealTimeDown() {
+    // SET TIMER
+    let timeDealLeft = parseInt($(".box-deal .p-item").first().attr("data-time"));
+    const timer = setInterval(timeDown, 1000);
+
+    function timeDown() {
+      // GET TIME LEFT PER SECOND
+      let timeLeft = timeDealLeft;
+      timeDealLeft = timeLeft - 1;
+
+      if ($(".global-time-deal").length) $(".global-time-deal").html(renderTimeLeft(timeLeft));
+      if (timeLeft === 0) {
+        clearInterval(timer);
+      }
+    }
+  }
+
+  // RENDER HOMEPAGE TIME LEFT
+  function renderTimeLeft(timeLeft) {
+    const sec = String(timeLeft % 60).padStart(2, 0);
+    const min = String(Math.trunc((timeLeft / 60) % 60)).padStart(2, 0);
+    const hour = String(Math.trunc(timeLeft / 3600) % 24).padStart(2, 0);
+    const day = String(Math.trunc(timeLeft / 86400) % 3600).padStart(2, 0);
+
+    const firstLetterSec = Math.floor(sec / 10);
+    const secondLetterSec = sec % 10;
+    const firstLetterMin = Math.floor(min / 10);
+    const secondLetterMin = min % 10;
+    const firstLetterHour = Math.floor(hour / 10);
+    const secondLetterHour = hour % 10;
+    const firstLetterDay = Math.floor(day / 10);
+    const secondLetterDay = day % 10;
+
+    return `
+      <p>${firstLetterDay}</p>
+      <p>${secondLetterDay}</p>
+      <span>:</span>
+      <p>${firstLetterHour}</p>
+      <p>${secondLetterHour}</p>
+      <span>:</span>
+      <p>${firstLetterMin}</p>
+      <p>${secondLetterMin}</p>
+      <span>:</span>
+      <p>${firstLetterSec}</p>
+      <p>${secondLetterSec}</p>
+    `;
+  }
+
+  // GET HOT-DEAL PRODUCT
+  function getDealProduct() {
+    let params = {
+      action_type: "list",
+      type: "active",
+      show: 10,
+    }
+
+    let target = "#js-deal-box";
+
+    Hura.Ajax.get("deal", params).then(function (data) {
+      console.log(data.list);
+      let html = Hura.Template.parse(productDealTpl, data.list);
+      Hura.Template.render(target, html);
+
+      saleTimeDown();
+      dealLineWidth();
+    });
+  }
+
+  // RESET IMAGE IN PAGE DEAL
+  function resetImagePageDeal() {
+    if ($(".page-deal").length > 0) {
+      $(".p-item .p-img").each(function () {
+        let firstChild = $(this).children(":first");
+        let lastChild = $(this).find(".swiper-lazy-preloader");
+        let imageDataSrc = firstChild.attr("data-src");
+        firstChild.attr("src", imageDataSrc);
+        lastChild.css("display", "none");
+      })
+    }
+  }
+
+  // CUSTOM BOTTOM LINE PRODUCT DEAL
+  function dealLineWidth() {
+    $(".js-line-deal-left").each(function () {
+      let quantityDealLeft = parseInt($(this).parent().attr("data-quantity-left"));
+      let quantityDealTotal = parseInt($(this).parent().attr("data-quantity-sale-total"));
+
+      if (quantityDealLeft >= 0) {
+        let lineDealWidth = quantityDealLeft / quantityDealTotal * 100 + "%";
+        $(this).css("width", lineDealWidth);
+      } else {
+        $(this).css("width", 0);
+      }
+    })
+  }
+</script>
+
+<script>
+  const product_deal_featured_tpl = `
+    <div class="p-info text-right">
+      <a href="{%= item.product_info.productUrl %}">
+        <h3 class="p-name text-24 font-weight-600 mb-4">{%= item.product_info.productName %}</h3>
+      </a>
+      <p class="p-price-sale text-32 font-weight-700 color-primary mb-1">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</p>
+      <p class="p-price-stock text-24 font-weight-500 color-gray-2 text-line-through">
+        {% if (item.product_info.marketPrice > 0) { %}
+        {%= formatCurrency(item.product_info.marketPrice) %}₫
+        {% } else { %}
+        {%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
+        {% } %}
+      </p>
+      <p class="p-summary font-weight-300 my-4">
+        <span>{%= item.product_info.productSummary %}</span>
+      </p>
+      <div class="wrapper-deal p-relative mb-4" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
+        <div class="deal-line total"></div>
+        <div class="deal-line remaining"></div>
+        <i class="static-icons static-icons-static-icon-fire"></i>
+        <p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
+      </div>
+      <a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart d-flex align-items-center justify-content-center gap-8">
+        <i class="static-icons static-icons-static-icon-header-cart-pro-big"></i>
+        <span class="text-20 font-weight-500 color-primary text-uppercase">Cho vào giỏ hàng</span>
+      </a>
+    </div>
+
+    <div class="p-image">
+      <a href="{%= item.product_info.productUrl %}">
+        <img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="d-flex w-100">
+      </a>
+    </div>
+  `;
+
+  const product_deal_list_tpl = `
+    <div class="p-item d-flex gap-16">
+      <a href="{%= item.product_info.productUrl %}" class="p-image">
+        <img src="{%= item.product_info.productImage.large %}" alt="{%= item.product_info.productName %}" class="p-img d-flex w-100">
+      </a>
+      <div class="p-info">
+        <a href="{%= item.product_info.productUrl %}">
+          <h3 class="p-name mt-1">{%= item.product_info.productName %}</h3>
+        </a>
+        <p class="p-price">
+          <span class="p-price-sale">{%= formatCurrency(item.product_info.sale_rules.price) %}₫</span>
+          <span class="p-price-stock">
+            {% if (item.product_info.marketPrice > 0) { %}
+            {%= formatCurrency(item.product_info.marketPrice) %}₫
+            {% } else { %}
+            {%= formatCurrency(item.product_info.sale_rules.normal_price) %}₫
+            {% } %}
+          </span>
+        </p>
+        <div class="wrapper d-flex align-items-end gap-32 mt-2">
+          <div class="wrapper-deal p-relative flex-1 mb-2" data-deal-left="{%= item.quantity - item.sale_quantity %}" data-deal-total="{%= item.quantity %}">
+            <div class="deal-line total"></div>
+            <div class="deal-line remaining js-line-deal-left"></div>
+            <i class="static-icons static-icons-static-icon-fire"></i>
+            <p class="sold text-12 color-white">Đã bán {%= item.sale_quantity %}</p>
+          </div>
+
+          <a href="javascript:addCart({%= item.product_info.productId %});" class="p-cart">
+            <i class="static-icons static-icons-static-icon-header-cart-pro"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  `;
+</script>