/*!
Theme Name: Bosa Agency Dark
Theme URI: https://bosathemes.com/bosa-agency-dark
Author: Bosa Themes
Author URI: https://bosathemes.com
Description: Bosa Agency Dark is multipurpose business theme. Bosa Agency Dark is beautiful, fast, lightweight, responsive, extremely customizable theme that you can use as a foundation to build versatile sites such as e-commerce, beauty products, women's fashion, smart home products, sports, toy shops, gadgets stores, jewelry shops, men's clothing, electronics, furniture, retail, digital products and preferably ideal for any type of business sites. Bosa Agency Dark is a child theme of Bosa, a free multipurpose WordPress theme. Bosa Agency Dark works perfectly with Gutenberg and the most popular page builder Elementor that can easily drag-and-drop your ideas from the interface. Bosa Agency Dark is built with SEO, speed, and usability in mind with the multiple Header & Footer layouts, predesigned starter sites includes awesome Home & Inner Pages that is incredibly customizable and powerful enough to take a stand among the crowd. Bosa Agency Dark is compatible with all major plugins like WooCommerce, Yoast, Contact form 7, Mailchimp for WordPress, bbPress, etc. Looking for a Multipurpose business theme? Look no further! Browse the demo to see that it's the only theme you will ever need: https://demo.bosathemes.com/bosa/agency-dark/
Version: 1.0.1
Requires PHP: 5.6
Tested up to: 6.2
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: bosa
Text Domain: bosa-agency-dark
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

Bosa Agency Dark WordPress Theme, Copyright 2023 Bosa Themes
Bosa Agency Dark is distributed under the terms of the GNU General Public License v3

Bosa Agency Dark is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

body {
  color: #333333;
  font-family: 'Poppins', sans-serif;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
  color: #111111;
  font-family: 'Jost', serif;
  font-weight: 500;
}

.entry-content h1 a,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a,
.entry-content h5 a,
.entry-content h6 a {
  text-decoration: underline;
}

.entry-content p a, 
.comment-content p a, 
.entry-content li a, 
.comment-content li a, .widget p a, 
.comments-area .comment-list .comment-content a {
  color: #2e92ff;
}
.entry-content p a:hover, 
.entry-content p a:focus, 
.comment-content p a:hover, 
.comment-content p a:focus, 
.entry-content li a:hover, 
.entry-content li a:focus, 
.comment-content li a:hover, 
.comment-content li a:focus, 
.widget p a:hover,
.widget p a:focus,
.comments-area .comment-list .comment-content a:hover,
.comments-area .comment-list .comment-content a:focus {
  color: #086abd;
}

.wp-block-quote {
  padding: 30px 30px 30px 50px;
  margin: 30px 0 30px 30px;
}

.site-header .site-branding .site-title {
  font-family: 'Jost', serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-header .site-branding .site-description {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
}

.main-navigation ul.menu > li > a {
  font-family: 'Jost', serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
}

.main-navigation ul.menu ul li a {
  font-weight: 500;
}

.section-banner .banner-content .entry-title {
  font-family: 'Jost', serif;
  font-size: 52px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-banner .banner-content .entry-meta a {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: capitalize;
}

.section-banner .banner-content .entry-text p {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  text-transform: initial;
}

.feature-posts-content-wrap .feature-posts-content .feature-posts-title {
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: capitalize;
}

.post .feature-posts-content .cat-links a {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.post .feature-posts-content .entry-meta a,
#primary .entry-meta,
.highlight-post-slider .post .entry-meta a {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: capitalize;
}

#primary article .entry-title {
  font-family: 'Jost', serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: capitalize;
}

.highlight-post-slider .post .entry-content .entry-title {
  font-family: 'Jost', serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
}

.highlight-post-slider .post .cat-links a {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
}

.sidebar .widget .widget-title {
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

.page-title {
  font-family: 'Jost', serif;
  font-size: 42px;
}

.site-footer .site-info,
.site-footer .footer-menu ul li a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  text-transform: none;
  line-height: 1.6;
}

.site-footer-eight .social-profile {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
}
.site-footer-eight .footer-menu {
  margin-bottom: 20px;
}
.section-feature-pages-area {
  padding-bottom: 70px;
}
.section-feature-pages-area ~ .section-banner {
  padding-bottom: 70px;
}
.section-feature-pages-area .content-wrap {
  margin-bottom: -30px;
}
.post .feature-pages-content .feature-pages-title {
  background-color: #FFFFFF;
  display: inline-block;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  padding: 10px 20px;
}

.feature-pages-content-wrap,
.travel-content-wrap {
  margin-bottom: 30px;
}

.feature-pages-layout-one .feature-pages-image,
.section-feature-posts-two-area .feature-posts-image {
  background-color: #cccccc;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  z-index: 1;
}
.feature-pages-layout-one .feature-pages-image:before,
.section-feature-posts-two-area .feature-posts-image:before {
  background-color: rgba(0, 0, 0, 0.2);
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  position: absolute;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  z-index: 1;
}
.feature-pages-layout-one .feature-pages-content,
.section-feature-posts-two-area .feature-posts-content {
  padding: 0 20px;
  position: relative;
  z-index: 2;
  width: 100%;
}
.section-feature-posts-two-area {
  padding-bottom: 50px;
}
.section-feature-posts-two-area .feature-posts-image {
  height: 260px;
}
.section-feature-posts-two-area .feature-big-posts .feature-posts-image {
  height: 550px;
}
.section-feature-posts-two-area .feature-posts-content .feature-posts-title {
  margin-bottom: 15px;
}
.section-feature-posts-two-area .feature-posts-content  .cat-links {
  display: block;
  margin-bottom: 10px;
}
.section-feature-posts-two-area .feature-posts-content  .cat-links a {
  background-color: #EB5A3E;
  margin: 2px;
  padding: 5px;
  letter-spacing: 0.8px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.section-advert {
  padding-bottom: 70px;
}
.section-advert a {
  display: inline-block;
}
.site-content .grid-thumbnail .hentry  {
  border-bottom: none;
  margin-bottom: 40px;
  padding-bottom: 0;
}
.site-content .grid-thumbnail .list-post .featured-image a {
  display: block;
}
.site-content .grid-thumbnail .list-post .featured-image img {
  width: 100%;
}
.site-content .grid-thumbnail .list-post {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.site-content .grid-thumbnail .list-post .featured-image {
  width: 100px;
}
.site-content .grid-thumbnail .list-post .entry-content {
  width: -moz-calc(100% - 100px);
  width: -webkit-calc(100% - 100px);
  width: calc(100% - 100px);
  padding-left: 20px;
}
.site-content .grid-thumbnail .list-post .entry-content h3{
  margin-bottom: 8px;
}
@media screen and (min-width: 576px) {
  .site-content .grid-thumbnail:nth-last-of-type(2) .hentry {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 992px) {
  .site-footer-eight .footer-menu {
    text-align: left;
    display: block;
  }
  .site-footer-eight .footer-menu ul li:first-child {
    border-left: none;
  }
}
@media screen and (max-width: 991px) {
  .site-footer-eight .bottom-footer-image-wrap {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {

  .section-feature-pages-area {
    padding-bottom: 50px;
  }
  .section-feature-pages-area ~ .section-banner {
    padding-bottom: 50px;
  }
}

@media screen and (max-width: 574px) {
  #masthead.site-header .site-branding .site-description {
    font-size: 12px;
    margin-top: 5px;
  }
}

/*header category css*/
.header-category-nav .navbar-nav {
  margin: 0;
}
.header-category-nav .navbar-nav ul {
  padding: 0;
  margin: 0;
}
.header-category-nav .navbar-nav li {
  list-style: none;
  position: relative;
}
.header-category-nav .navbar-nav li a {
  border-bottom: 1px solid rgba(243, 243, 243, 0.8);
  display: block;
}
.header-category-nav .navbar-nav > li > a {
  background-color: #333;
  border-bottom: none;
  color: #FFF;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 13px 20px;
  letter-spacing: 0.5px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.header-category-nav .navbar-nav > li > a:hover,
.header-category-nav .navbar-nav > li > a:focus {
  background-color: #086abd;
  color: #FFF;
}
.header-category-nav .navbar-nav > li > a i {
  margin-right: 10px;
}
.header-category-nav .navbar-nav li li a {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
}
.header-category-nav .navbar-nav li li a:hover,
.header-category-nav .navbar-nav li li a:focus {
  color: #086abd;
}

/*header menu css*/
.bottom-header .main-navigation ul.menu > li > a {
  padding: 12px 24px 12px 0;
}

.header-category-nav ul li a {
  font-family: 'Jost', serif;
  font-weight: 500;
  font-size: 15px;
}

body[class*=woocommerce] ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Jost', serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.4;
  text-transform: none;
}

body[class*=woocommerce] ul.products li.product .price {
  font-family: 'Jost', serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  text-transform: none;
}

body[class*=woocommerce] .product-inner .button, body[class*=woocommerce] .product-inner .added_to_cart {
  font-family: 'Jost', serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
}

/*services css*/ 
.section-services-area{
  padding-bottom: 70px;
}
.section-services-area .content-wrap {
  margin-bottom: -30px;
}
.services-content-wrap {
  margin-bottom: 30px;
}
.section-services-area .services-content-wrap {
  box-shadow: 0px 0px 13px -4px rgba(0, 0, 0, 0.2);
  padding: 25px;
}
.services-content-wrap .featured-image {
  overflow: hidden;
  border-radius: 100%;
  margin-right: 30px;
  margin-left: 30px;
  margin-bottom: 30px;
}
.services-content-wrap .button-container {
  padding-top: 10px;
  margin-top: 30px;
  margin-bottom: -10px;
  position: relative;
}
.services-content-wrap .button-container:before {
  border-top: 1px solid rgba(243, 243, 243, 0.8);
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 100%;
  margin-right: -25px;
  margin-left: -25px;
}
.services-content-wrap .button-container a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#offcanvas-menu .header-text {
  background-color: #ffffff;
  margin-bottom: 30px;
  padding: 15px;
}
@media screen and (min-width: 992px) {
  .site-footer-eight .footer-menu {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .section-services-area {
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 479px) {
  .site-header .header-right svg {
    width: 14px;
  }
  .header-cart a.cart-contents span.count {
    left: 6px;
  }
  #offcanvas-menu {
    padding-right: 10px;
    padding-left: 10px;
  }
}
/*info css*/
.section-info-area {
  padding-bottom: 40px;
}
.section-info-area .content-wrap .info-content-wrap {
  border:  1px solid rgba(243, 243, 243, 0.8);
  padding: 25px;
}
.section-info-area .content-wrap .row {
  row-gap: 25px;
}
.section-info-area .info-content-wrap .info-icon {
  background-color: #333333;
  color: #FFFFFF;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
}
.section-info-area .entry-content p {
  margin-bottom: 10px;
}
.section-info-area .entry-content p:last-child {
  margin-bottom: 0;
}
/*team section css*/
.section-teams-area {
  padding-bottom: 70px;
}
.section-teams-area .content-wrap {
  margin-bottom: -30px;
}
.section-teams-area .teams-content-wrap {
  border: 1px solid rgba(243, 243, 243, 0.8);
  margin-bottom: 30px;
}
.teams-content-wrap .featured-image {
  margin-bottom: 25px;
}
.teams-content-wrap .featured-image img {
  width: 100%;
}
.teams-content-wrap .entry-content {
  padding-right: 25px;
  padding-bottom: 20px;
  padding-left: 25px;
}
.teams-content-wrap .entry-content a {
  text-decoration: none;
}
.teams-content-wrap .button-container {
  margin-top: 15px;
}
.teams-content-wrap .button-container i {
  margin-left: 5px;
  font-size: 13px;
}
/*testimonial css*/
.section-testimonial-area {
  padding-bottom: 50px;
}
.testimonial-item {
  margin-bottom: 30px;
}
.testimonial-item .entry-content {
  background-color: #f8f8f8;
  padding: 70px 30px 30px;
  position: relative;
}
.testimonial-item .featured-image {
  border-radius: 100%;
  height: 100px;
  overflow: hidden;
  width: 100px;
  margin: 0 auto -45px;
  position: relative;
  z-index: 1;
}
.testimonial-quote-icon {
  font-size: 40px;
  opacity: 0.2;
  position: absolute;
  bottom: 0;
  right: 16px;
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  transform: scaleX(-1);
}
.testimonial-item .entry-content a {
  text-decoration: none;
}

/* Payment Notice Card Styling - Card riêng biệt */
.payment-notice-card {
  margin-bottom: 25px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #fff5e6 0%, #ffe4b3 100%) !important;
  border-left: 4px solid #ff9800 !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 12px rgba(255, 152, 0, 0.15) !important;
  display: flex !important;
  gap: 15px !important;
  align-items: flex-start !important;
  animation: slideInDown 0.5s ease-out !important;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.payment-notice-card .notice-icon {
  flex-shrink: 0 !important;
  width: 55px !important;
  height: 55px !important;
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: pulse 2s ease-in-out infinite !important;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4) !important;
}

.payment-notice-card .notice-icon .dashicons {
  font-size: 32px !important;
  width: 32px !important;
  height: 32px !important;
  color: #ffffff !important;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
  }
  25% {
    transform: scale(1.1) rotate(-5deg);
  }
  50% {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 6px 25px rgba(255, 152, 0, 0.6);
  }
  75% {
    transform: scale(1.1) rotate(-5deg);
  }
}

.payment-notice-card .notice-content {
  flex: 1 !important;
}

.payment-notice-card .notice-content h4 {
  margin: 0 0 10px 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #e65100 !important;
  font-family: 'Jost', serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.payment-notice-card .notice-content h4 .dashicons {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  color: #e65100 !important;
}

.payment-notice-card .notice-content p {
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #5d4037 !important;
  font-family: 'Poppins', sans-serif !important;
}

.payment-notice-card .notice-content p strong {
  font-weight: 600 !important;
  color: #3e2723 !important;
}

.payment-notice-card .currency-badge {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

.payment-notice-card .currency-badge.vnd {
  background: #4caf50 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important;
}

.payment-notice-card .currency-badge.usd {
  background: #2196f3 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3) !important;
}

.payment-notice-card .notice-warning {
  margin-top: 12px !important;
  padding: 8px 12px !important;
  background: rgba(255, 152, 0, 0.15) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  color: #e65100 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.payment-notice-card .notice-warning .dashicons {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: #e65100 !important;
  flex-shrink: 0 !important;
}

/* Package Name Field Styling */
.package-name-field {
  margin-bottom: 20px;
  padding: 12px 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.package-name-field:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.package-name-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 6px;
  font-family: 'Jost', serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.package-name-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 2px solid #e0e6ed;
  border-radius: 8px;
  background-color: #ffffff;
  color: #2c3e50;
  font-family: 'Poppins', sans-serif;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
}

.package-name-field input[type="text"]:focus {
  outline: none;
  border-color: #2e92ff;
  box-shadow: 0 0 0 3px rgba(46, 146, 255, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.package-name-field input[type="text"]::placeholder {
  color: #95a5a6;
  font-style: italic;
  opacity: 0.7;
}

.package-name-field input[type="text"]:hover {
  border-color: #bdc3c7;
}

/* App/Game Type Field Styling - Nằm trong khung Package Name */
.app-game-type-field {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.app-game-type-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  font-family: 'Jost', serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.app-game-type-field .radio-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.app-game-type-field .radio-option {
  flex: 1;
  min-width: 100px;
  position: relative;
  cursor: pointer;
}

.app-game-type-field .radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.app-game-type-field .radio-option span {
  display: block;
  padding: 8px 14px;
  background-color: #ffffff;
  border: 2px solid #e0e6ed;
  border-radius: 8px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #2c3e50;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.app-game-type-field .radio-option:hover span {
  border-color: #2e92ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(46, 146, 255, 0.2);
}

.app-game-type-field .radio-option input[type="radio"]:checked + span {
  background: #2e92ff;
  border-color: #2e92ff;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(46, 146, 255, 0.3);
  transform: scale(1.02);
}

.app-game-type-field .radio-option input[type="radio"]:focus + span {
  outline: none;
  border-color: #2e92ff;
  box-shadow: 0 0 0 3px rgba(46, 146, 255, 0.15);
}

/* Contact Field Styling - Nằm trong khung Package Name */
.contact-field {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.contact-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 6px;
  font-family: 'Jost', serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.contact-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 2px solid #e0e6ed;
  border-radius: 8px;
  background-color: #ffffff;
  color: #2c3e50;
  font-family: 'Poppins', sans-serif;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
}

.contact-field input[type="text"]:focus {
  outline: none;
  border-color: #2e92ff;
  box-shadow: 0 0 0 3px rgba(46, 146, 255, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.contact-field input[type="text"]::placeholder {
  color: #95a5a6;
  font-style: italic;
  opacity: 0.7;
}

.contact-field input[type="text"]:hover {
  border-color: #bdc3c7;
}

/* Responsive */
@media (max-width: 768px) {
  .payment-notice-card {
    padding: 12px;
    gap: 12px;
    margin-bottom: 15px;
  }
  
  .payment-notice-card .notice-icon {
    width: 45px;
    height: 45px;
  }
  
  .payment-notice-card .notice-icon .dashicons {
    font-size: 26px;
    width: 26px;
    height: 26px;
  }
  
  .payment-notice-card .notice-content h4 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .payment-notice-card .notice-content p {
    font-size: 12px;
    margin: 6px 0;
  }
  
  .payment-notice-card .currency-badge {
    padding: 2px 8px;
    font-size: 11px;
  }
  
  .payment-notice-card .notice-warning {
    font-size: 11px;
    padding: 6px 10px;
    margin-top: 8px;
  }
  
  .package-name-field {
    padding: 10px 12px;
    margin-bottom: 15px;
  }
  
  .package-name-field label {
    font-size: 12px;
    margin-bottom: 5px;
  }
  
  .package-name-field input[type="text"] {
    padding: 8px 10px;
    font-size: 13px;
  }
  
  .app-game-type-field {
    margin-top: 10px;
    padding-top: 10px;
  }
  
  .app-game-type-field label {
    font-size: 12px;
    margin-bottom: 6px;
  }
  
  .app-game-type-field .radio-group {
    gap: 8px;
  }
  
  .app-game-type-field .radio-option {
    min-width: 85px;
  }
  
  .app-game-type-field .radio-option span {
    padding: 7px 10px;
    font-size: 12px;
  }
  
  .contact-field {
    margin-top: 10px;
    padding-top: 10px;
  }
  
  .contact-field label {
    font-size: 12px;
    margin-bottom: 5px;
  }
  
  .contact-field input[type="text"] {
    padding: 8px 10px;
    font-size: 13px;
  }
}