/* Legacy content styles — PurgeCSS từ CSS theme 'anhquanpc' cũ (567KB→~40KB), chỉ giữ rule nội dung trang thật đang dùng (2026-09-29). Chỉ nạp ở trang con, KHÔNG nạp ở trang chủ. */
/* bootstrap.min */
@charset "UTF-8";/*!
 * Bootstrap v5.0.2 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root{--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}.h2,.h3,.h4,h2,h3,h4{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}p{margin-top:0;margin-bottom:1rem}ol,ul{padding-left:2rem}ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,th,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}input,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}select{text-transform:none}select{word-wrap:normal}select:disabled{opacity:1}[type=submit]{-webkit-appearance:button}[type=submit]:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}[hidden]{display:none!important}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.figure{display:inline-block}.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.table{--bs-table-bg:transparent;--bs-table-accent-bg:transparent;width:100%;margin-bottom:1rem;color:#212529;vertical-align:top;border-color:#dee2e6}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>:not(:last-child)>:last-child>*{border-bottom-color:currentColor}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.overflow-hidden{overflow:hidden!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-flex{display:flex!important}.top-0{top:0!important}.w-100{width:100%!important}.h-100{height:100%!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.mb-3{margin-bottom:1rem!important}.p-0{padding:0!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.lh-1{line-height:1!important}.text-center{text-align:center!important}.text-light{color:#f8f9fa!important}.rounded-1{border-radius:.2rem!important}@media (min-width:576px){.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}}@media (min-width:768px){.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}}@media (min-width:992px){.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}}@media (min-width:1200px){.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}}@media (min-width:1400px){.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}}
/* plugins */
@charset "UTF-8";
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
 .animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(10%,0,0);transform:translate3d(10%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(10%,0,0);transform:translate3d(10%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,30%,0);transform:translate3d(0,30%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,30%,0);transform:translate3d(0,30%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}

/* owl-carousel.css */

/* owl-theme.css */

/* owl-transitions.css */

/* magnific-popup */

/* twentytwenty */


/* countdown */
/* jQuery Countdown styles 2.0.0. */
/* modified */
.is-countdown {
}

    /* select2 */


    /* daterangepicker */

    /*  Larger Screen Styling */
/* swiper */
/**
 * Swiper 10.3.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 28, 2023
 */:root{}:root{}
/* datepicker */
/*!
 * Datepicker for Bootstrap v1.10.0 (https://github.com/uxsolutions/bootstrap-datepicker)
 *
 * Licensed under the Apache License v2.0 (https://www.apache.org/licenses/LICENSE-2.0)
 */
/* style */
/* ================================================== */


/* CyberGuard
/* created by designesia

@charset "utf-8";

Table of content:

* body
* header
  * subheader
* navigation
* content
* section
* footer
* sidebar
* contact
* elements
  * border
  * breadcrumb
  * button and link
  * columns
  * counter
  * divider
  * dropcap
  * heading
  * list
  * map
  * page heading
  * pagination
  * preloader
  * progress bar
  * social icons
  * spacer
  * tabs
  * testimonial
* plugins
* media query
*/

/* ================================================== */


/* ================================================== */


/* import fonts icon */


/* ================================================== */


* {
  /* body font */
  --body-font: "DM Sans", Helvetica, Arial, sans-serif;
  --body-font-color: #797a8c;
  --body-font-color-dark: rgba(255, 255, 255, .75);
  /* heading font */
  --heading-font: "Urbanist", Helvetica, Arial, sans-serif;  
  --heading-font-weight: 600;
  --heading-font-color: #111013;
  --heading-text-transform: none;
  /* h1 */
  /* h2 */
  --h2-font-size: 48px;
  --h2-font-weight: var(--heading-font-weight);
  --h2-letter-spacing: -0.015em;
  --h2-line-height: 1.2em;
  --h2-margin-bottom: 15px;
  /* h3 */
  --h3-font-size: 26px;
  --h3-font-weight: var(--heading-font-weight);;
  --h3-letter-spacing: 0;
  --h3-line-height: 1.5em;
  --h3-margin-bottom: 10px;
  /* h4 */
  --h4-font-size: 20px;
  --h4-font-weight: var(--heading-font-weight);;
  --h4-letter-spacing: 0;
  --h4-line-height: 1.6em;
  --h4-margin-bottom: 10px;
  /* h5 */
  /* h6 */
  /* mainmenu */
  /* header logo */
  /* misc */
  --bg-dark-1: #1B1663;
  --bg-dark-2: #120d4f;
  --bg-dark-3: #1e1e1e;
  --rounded-1: 10px;
  --container-max-width:1240px;
  /* button */
  --btn-color: #ffffff;
  --btn-font-family: var(--body-font);
  --btn-font-size: 15px;
  --btn-font-weight: 600;
  --btn-letter-spacing: 0;
  --btn-padding: 6px 20px;
  --btn-rounded: 8px;
  --btn-text-decoration: none;
  --btn-text-transform: none;
}

/* base background color */
.bg-color{background: linear-gradient(var(--primary-gradient));}
.bg-dark, .bg-dark > a{background-color: var(--bg-dark-1) !important}
.bg-dark-2{background-color: var(--bg-dark-2) !important}
.bg-dark-3{background-color: var(--bg-dark-3) !important}
.bg-dark-gradient {
  background: linear-gradient(0deg, var(--bg-dark-3) 0%, var(--bg-dark-2) 100%);
}

/* base color */
.rounded-1{
  border-radius: var(--rounded-1) !important;
  -moz-border-radius: var(--rounded-1) !important;
  -webkit-border-radius: var(--rounded-1) !important;
}

/* ================================================== */


/* body */


/* ================================================== */

a,
a:hover {
  color:var(--body-font-color);
  text-decoration: none;
  outline: none;
}


.text-light a,
.text-light a:hover {
  color:var(--body-font-color-dark);
  text-decoration: none;
  outline: none;
}


/* ================================================== */


/*  header  */


/* ================================================== */

/* left col header */

/* middle col header */
/* subheader */


/* ================================================== */


/* navigation */


/* ================================================== */
/*
#mainmenu>li::before {
  content: counter(my-awesome-counter) ' —';
  right: 8px;
  top: 5px;
  color:var(--primary-color);
  margin-right: 5px;
  font-weight: 500;
  font-family: var(--heading-font);
}
*/

/* menu toggle for mobile */

/* ================================================== */


/* content */


/* ================================================== */

/* ================================================== */


/* section */


/* ================================================== */

section {
  padding: 100px 0 100px 0;
}

/* ================================================== */


/* footer */


/* ================================================== */

/* topbar start here */

/* topbar left content */

/* topbar widget */

/* topbar end here */

/* ================================================== */


/* blog */


/* ================================================== */

/* blog list */

 div.btn-main > a {
  display: inline-block;
  margin-top: 0px;
  padding: 5px 25px;
}

/* de-bloglist-type-1 */


/* de-post-type-1 */

/* blog comment */

/* blog comment form */

/* ================================================== */

/* ratings */


/* ================================================== */

/* ================================================== */


/* contact form */


/* ================================================== */

.text-light ::placeholder {
  color: #ffffff;
  opacity: 1; /* Firefox */
}

.text-light::-ms-input-placeholder { /* Edge 12 -18 */
  color: #ffffff;
}

/* ================================================== */


/* elements */


/* ================================================== */


/* border */


/* ------------------------------ */

/* breadcrumb */


/* ------------------------------ */

/* button and link */


/* ------------------------------ */

a {
  text-decoration: none;
}

a.btn-main, div.btn-main > a,
a.btn-main:active, div.btn-main > a:active,
a.btn-main:focus, div.btn-main > a:focus,
a.btn-main:visited, div.btn-main > a:visited,
.btn-main {
  background: var(--primary-color);
  color: var(--btn-color);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  padding: var(--btn-padding); 
  text-decoration: var(--btn-text-decoration);
  text-transform: var(--btn-text-transform);
  border-radius: var(--btn-rounded);
  -moz-border-radius: var(--btn-rounded);
  -webkit-border-radius: var(--btn-rounded);
  border: none;
  position: relative;
  display: inline-block;
  text-align: center;
  outline: 0;
  white-space: nowrap;
}

a.btn-main.fx-slide, div.btn-main > a.fx-slide{
  overflow: hidden;
}

a.btn-main.fx-slide span, div.btn-main > a.fx-slide span{
  display: block;
  position: relative;
  transition: all .3s ease-in-out;
}

a.btn-main.fx-slide:hover span, div.btn-main > a.fx-slide:hover span{
  transform: translate(0, 40px);
  opacity: 0;
}

a.btn-main.fx-slide:hover:before, div.btn-main > a.fx-slide:hover:before {
  opacity: 1;
  transform: translate(0, 0);
}

a.btn-main.fx-slide:before, div.btn-main > a.fx-slide:before {
  content: attr(data-hover);
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translate(0, -100%);
  transition: all 0.3s ease-in-out;
}



/* divider */


/* ------------------------------ */

/* dropcap */


/* ------------------------------ */

/* form */


/* ------------------------------ */


/* heading */


/* ------------------------------ */


h2,
h4,
h3,
.h2,
.h3,
.h4 {
  margin-top: 0;
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-font-color);
  text-transform: var(--heading-text-transform);
}

h2.text-light {
  color: #fff;
}

h2{
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);  
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  margin-bottom: var(--h2-margin-bottom);
}

h3{
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight); 
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  margin-bottom: var(--h3-margin-bottom);
}

h4{
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight); 
  letter-spacing: var(--h4-letter-spacing);
  line-height: var(--h4-line-height);
  margin-bottom: var(--h4-margin-bottom);
}

.text-light, .text-light p {
  color: var(--body-font-color-dark);
}


.text-light h2,
.text-light h3,
.text-light h4 {
  color: #fff;
}

/* list */

/* pagination */

/* ================================================== */

/* preloader */

/* ================================================== */

/* progress bar */


/* ================================================== */


/* social-icons */


/* ================================================== */

/* ================================================== */

/* accordion

/* ================================================== */


/* bs */

/* new added */



/* tab de_light */

/* tab de_light */


/* tab de_light */

/* testimonial
    /* ================================================== */

/*
.de_testi blockquote:before {
  font-family: FontAwesome;
  content: "\f10d";
  padding-bottom: 10px;
  font-size: 20px;
  display: inline-block;
  padding: 10px 20px 10px 20px;
  font-style: normal;
  background: #000;
  position: absolute;
  left: 15px;
  font-weight: normal;
}
*/

/* new timeline */

/* close new timeline */



/* css attributes */

.overflow-hidden {
  overflow: hidden;
}

/* ================================================== */


/* anim */


/* ================================================== */


.hover,
.hover *,
.btn-main{
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  outline: none;
}

/* ================================================== */


/* video */


/* ================================================== */

video {
  display: inline-block;
  vertical-align: baseline;
  min-width: 100%;
  min-height: 100%;
}

/* youtube, vimeo */

/* ================================================== */


/* map */


/* ================================================== */


/* --------------- map --------------- */

/* ================================================== */


/* overide bootstrap */


/* ================================================== */

p{
  margin-top: 0;
}

blockquote {
  font-family: var(--body-font);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4em;
  border: none;
  border-left: solid 3px #333333;
  padding-left: 30px;
}

/* Vertical line */

/* ================================================== */


/* widget */


/* ================================================== */ border-color: #eceff3;

/* marquee */


.d-flex {
  display: flex;
  white-space: nowrap;
}

/* marquee */

/* marquee plugin close */

/* select2 begin */

/* select2 end */

/* ================================================== */

/* declass */

/* ================================================== */

/* background */

/* width (percent) */
.w-100{width: 100%;}

/* width (px) */

/* height (percent) */
.h-100{height: 100%;}

/* height (px) */

/* top (percent) */

/* top (px) */

/* bottom (percent) */

/* bottom (px) */

/* top negative (px) */

/* bottom negative (px) */

/* left pos (percent) */

/* left pos (px) */

/* right  pos (percent) */

/* right  pos (px) */

/* margin-left (percent) */


/* margin-left (px) */


/* margin top (px) */

/* margin top negative (px) */

/* margin bottom (px) */

/* margin bottom negative (px) */

/* margin left negative (px) */

/* margin top negative (px) */

/* font-size (px) */


/* font-weight */

/* margin left (px) */

/* padding (px) */
.p-40{padding: 40px;}

/* padding bottom (px) */
.pb-20{padding-bottom: 20px;}

/* padding top (px) */

/* padding left (px) */

/* border white */

/* border bottom white with transparency */

/* border bottom grey */

/* border bottom dark */

/* border bottom dark */

/* hover effects */
.hover-op-1{ opacity:0 }
.hover:hover .hover-op-1{ opacity:1 }

/* opacity */

/* line height em */
.lh-1{line-height: 1em;}

/* min height (px) */

/* background dark */

/* overlay-black */

/* overlay-black */

/* overlay-white */

/* positions */
.abs { position: absolute;}
.relative { position: relative; }

/* z-index */
.z-2{ z-index:2 }

/* declass end */

/* shop */

/* shop end */


/* cart begin */

/* cart end */

/* ecommerce icons begin */
/* ecommerce icons end */

/* radio__button begin */


/* radio__button end */


/* owl sync begin */
/* owl sync end */

/* price range slider */
/* range slider end */

/* custom tabs */

/* custom tabs end */

/* de-dot */

/* de-vertical-nav begin */

/* de-vertical-nav end */


/* timeline begin */

/* de-timeline end */

/* timeline-s2 begin */

/* de-timeline end */


/* swiperjs */


/* swiper end */


/* swiper #2 begin */

/* swiper #2 end */

/* de-number begin */
/* de-number close */

/*Cookie Consent Begin*/

/*Cookie Consent End*/

strong {
  font-weight: bold;
}

.text-light strong {
  color: #fff;
}

.no-bottom {
  margin-bottom: 0;
  padding-bottom: 0;
}

p {
  margin-bottom: 20px;
}

.no-bottom {
  padding-bottom: 0 !important;
}

.no-top {
  padding-top: 0 !important;
}

/* new owl */

/* new owl close */

/* mouse scroll icon begin */

/* mouse scroll icon close */

/* owl */


/* shadow */


/* image effect */

/* price list */

/* dropdown */
/* ------------------------------ */  

/* --------------------------------------------------
* plugin
* --------------------------------------------------*/

/* ================================================== */


/* isotope */


/* ================================================== */

/**** disabling Isotope CSS3 transitions ****/

a,
img {
  outline: 0;
}

/* overwrite bootstrap */


/* -------------------------Line Preloader--------------------- */

/* demo */

/* ================================================== */


/* media query */


/* ================================================== */

@media (min-width: 1000px){
    .container {
        max-width: var(--container-max-width);
    }
}


@media (min-width: 1200px) {

  .container {
    max-width: 1200px;
  }
}


@media (min-width: 1400px) {

  .container {
    max-width: 1304px;
  }
}


/* bootstrap cols 5 */
/* bootstrap cols 5 end */

@media(min-width:980px) and (max-width: 1199px) {

  .container {
    min-width: 95%;
  }
}

/* -------------------------------------------------- 
    design for 768px
    /* ================================================== */

@media only screen and (max-width: 992px) {

  .container{
    max-width: 100%;
  }

  /* header light */

  section{
    padding: 60px 0;
  }

  /* title tablet */

  h2{
    font-size: 40px;
  }

  /* padding top (px) */

  /* padding top (px) */

  /* margin top (px) */

  /* margin top (px) */


}

/* -------------------------------------------------- 
    custom for 320px & 480px 
    /* -------------------------------------------------- */

@media only screen and (max-width: 767px) {

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  section{
    padding: 40px 0;
  }

  /* title phone */

  h2{
    font-size: 36px;
  }

  /* padding top (px) */

  /* padding top (px) */

  /* margin top (px) */

  /* margin top (px) */

}

/* -------------------------------------------------- 
    design for 480px
    /* -------------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* -------------------------------------------------- 
    design for 320px
    /* -------------------------------------------------- */

/* section control */
@media only screen and (min-device-width: 768) and (max-device-width: 1024) and (orientation: portrait) {
  section {
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    background-attachment: scroll;
  }
}

@media only screen and (max-width: 992px) {

  section {
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    background-attachment: scroll;
  }
}

/* new added */


/* custom-swiper-1 */
/* scheme-1 */
* {
  --primary-color: #4a81d3;
  --secondary-color: #514A9D;
  --primary-gradient: 45deg, var(--primary-color), var(--secondary-color);
  --bg-dark-1: #12132c;
  --bg-dark-2: #191b36;
  --bg-dark-3: #222e66;
}


/* root */
/*
Theme Name:
Theme URI: https://anhquanpc.vn/
Author: AnhQuanPC Team
Description: Theme for introducing AnhQuanPC company, specializing in network infrastructure and security cameras.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:
*/

/* ==========================================================================
   1. IMPORTS & VARIABLES
   ========================================================================== */

/* 1.1 Imports */

/* 1.2 Variables (Custom Properties) */
:root {
    --main-blue: #2196f3;
    --main-orange: #ff9800;
    --background: #fff;
    /* Assuming --primary-gradient and --bg-dark-1 are defined in scheme-1.css or elsewhere,
       but kept here for completeness if they were meant to be global */
}

/* ==========================================================================
   2. BASE STYLES & TYPOGRAPHY
   ========================================================================== */

a:hover {
    color: var(--main-orange);
}

.h2 {
    font-size: 2.5em;
}

 h2, h4, h3, .h2, .h3, .h4 {
    font-family: 'Montserrat', Arial, sans-serif;
    text-wrap-style: pretty;
}

h2 {
    font-size: 2em;
}

p {
    text-wrap-style: pretty;
}

.main-text-color {
    color: var(--main-blue);
}

.wp-block-button__link {
    background-color: var(--main-blue);
}

.mobile {
    display: none;
}

.desktop {
    display: initial;
}

/* ==========================================================================
   3. LAYOUT & STRUCTURE
   ========================================================================== */

.section {
    padding: 50px 0;
}

.content-section {
    padding: 0;
}

/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */

main {
    padding-top: 5%
}

/* Sub-Menu */

/* Header CTAs/Search */

/* ==========================================================================
   5. COMPONENTS (Banner, Services, CTA, Posts, Footer)
   ========================================================================== */

/* 5.1 Banner/Hero */

/* 5.2 Services Section */

/* 5.3 CTA Section */
.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--main-orange);
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: background-color 0.3s;
}

.anhquanpc-cta-callout {
    padding: 30px;
    border: 1px solid #eee;
    text-align: center;
    margin: 20px 15%;
}

.anhquanpc-cta-callout h2 {
    color: var(--main-blue);
}

/* 5.4 Post List/Cover Blocks */
.wp-block-cover {
    min-height: 350px;
}
.relative-abs .wp-block-cover__inner-container {
    position: initial;
}
.anhquanpc-project-list-header {
    position: absolute;
    bottom: 0;
    z-index: 99;
}
.main-page .anhquanpc-project-list-header {
    z-index: 0;
}
.hover.rounded-1 .wp-block-cover__inner-container {
    position: static;
    transform: translate(0, 75%);
}
.hover.rounded-1.main-page .wp-block-cover__inner-container {
    transform: initial;
    width: 100%;
    height: 100%;
    position: absolute !important;
    z-index: 999;
}

.padding-bottom-5-per {
    padding-bottom: 5%;
}

/* 5.5 Contact Form (WPCF7) */
.wpcf7-form {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background: var(--background);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.wpcf7-form p {
    margin-bottom: 20px;
}

.wpcf7-form label {
    display: block;
    font-weight: 700;
    color: var(--main-blue);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.wpcf7-form-control:not(.wpcf7-submit) {
    background-color: var(--background);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 15px;
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wpcf7-textarea {
    resize: vertical;
    min-height: 120px;
}

.wpcf7-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.wpcf7-form-control:focus:not(.wpcf7-submit) {
    border-color: var(--main-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.wpcf7-submit {
    background-color: var(--main-orange);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.1s;
    width: auto;
    display: block;
    margin: 30px auto 10px auto;
}

.wpcf7-submit:hover {
    background-color: #e68a00;
    box-shadow: 0 6px 15px rgba(255, 152, 0, 0.4);
    transform: translateY(-1px);
}

.wpcf7-not-valid, .wpcf7-form-control.wpcf7-not-valid {
    border-color: #f44336 !important;
}

.wpcf7-response-output {
    padding: 15px;
    margin: 20px 0;
    border-radius: 6px;
    font-weight: 700;
}
.wpcf7-mail-sent-ok {
    background-color: #e8f5e9;
    color: #4caf50;
    border: 1px solid #4caf50;
}

/* 5.6 Footer */


/* ==========================================================================
   6. UTILITIES & HELPERS
   ========================================================================== */

/* Spacing */
.gap0 {
    gap: 0 !important;
}
.margin-bottom-0 {
    margin-bottom: 0 !important;
}
.margin-top-0 {
    margin-top: 0 !important;
}
.padding-left-0 {
	padding-left: 0 !important;
}
.padding-1 {
    padding: 1em !important;
}
.left-0 {
    left:0;
}
.full-right {
    margin-bottom: -1.5em;
}

/* Position/Layout */
.relative-abs {
    position: relative;
}
.abs-top-left {
    position: absolute;
    top: 0;
    left: 0;
}
.height-400 .wp-block-cover {
    height: 450px;
}

/* Hover Effects */
.hover {
    position: relative;
}
.hover-op-1 {
    opacity: 0;
    position: absolute;
    /* Assumes --primary-gradient is defined elsewhere */
    background: linear-gradient(var(--primary-gradient));
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 2em;
    transition: opacity 0.3s ease;
}
.hover:hover .hover-op-1 {
    opacity: 1;
}

/* Other Hover/Display Fixes */
.hover div {
    z-index: 9;
    position: initial !important;
}
.hover div.abs {
    position: absolute !important;
}

/* Text & Links */
.no-deco a {
    text-decoration: none !important;
    color: var(--main-blue);
}

.highlight-gray a {
    text-decoration: none;
    font-weight: bold;
    color: var(--main-blue);
}
.highlight-gray a:hover {
    color: var(--main-orange);
}

/* Animation Delays */
.delay-04 {
    animation-delay: 0.4s;
}

.delay-06 {
    animation-delay: 0.6s;
}

/* Other */
.flip-container h3 {
    margin: 2rem;
}
.flip-container p {
    margin: 0 2em;
}

.two-column-container {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}

.two-column-img {
    order: 1;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

.two-column-content {
    order: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}


/* ==========================================================================
   7. ANIMATIONS
   ========================================================================== */

/* 7.1 Marquee */
.marquee {
    font-size: 2em;
}

.marquee span {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-name: marquee-content;
    animation-timing-function: linear;
    padding: 5px 15px;
}

.marquee:hover .marquee span {
    animation-play-state: paused;
}

@keyframes marquee-content {
    from {
        transform: translateX( 0% );
    }
    to {
        transform: translateX( -100% );
    }
}

/* 7.2 Accessibility (Respect user preferences about animations) */
@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01s;
    /* instead of animation: none, so an animationend event is
     * still available, if previously attached.
     */
    width: auto;
    padding-left: 0;
  }
}


/* ==========================================================================
   8. MEDIA QUERIES (Mobile Version)
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* --- BASE STYLES --- */
    blockquote {
        margin: 0;
        padding: 0;
    }

    h2 {
        line-height: 1.5em;
    }

    .mobile {
        display: initial;
    }

    .desktop {
        display: none;
    }

    /* --- HEADER & NAVIGATION --- */

    /* Menu Structure */

    /* Menu Links */

    /* Sub-Menu */

    /* Sub-menu Toggle Icon */

    /* Header CTAs/Search */

    /* --- COMPONENTS --- */

    main {
        padding-top: 18%
    }

    /* Banner */

    /* Services */

    .padding-bottom-5-per {
        padding-bottom: 10%;
    }

    .container .flip-container {
        position: absolute;
        bottom: 5%;
        z-index: 999;
    }

    .container div:has(.flip-container) {
        position: relative;
    }

    .container {
        margin-top: 5%;
    }

    /* CTA Callout */
    .anhquanpc-cta-callout {
        margin: 20px 5%;
    }

    /* Contact Form */
    .wpcf7-form {
        margin: 20px 10px;
        padding: 20px;
        max-width: none;
    }

    /* Footer */

}
:root{--body-font:"Montserrat",system-ui,sans-serif;--heading-font:"Montserrat",system-ui,sans-serif}