/*
Theme Name: Giao-Dien-Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/




























/* CSS MẶC ĐỊNH - CSS CHÍNH ĐỂ Ở CSS BỔ SUNG ! */

.phulong-tag {
    display: inline-block;
    padding: 6px 24px 6px 18px;
    background: linear-gradient(to right, #269fad, #116a6f);
    border-radius: 14px 0 14px 0; /* trái trên + phải dưới */
    color: #ffffff;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    letter-spacing: .5px;
}

.phulong-tag:hover {
    filter: brightness(1.06);
}





.img, .img img {
    border-radius: 10px;
}



.nav > li > a, .mobile-sidebar-levels-2 .nav > li > ul > li > a {
    font-weight: bold;
}


.box-image {
    border-radius: 10px;
}

    .vx987-contact-tower {
    position: fixed;
    left: 18px;   /* Bên trái */
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    z-index: 999999;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Hàng Call: icon bên trái, số bên phải */
.vx987-call-row {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-direction: row;   /* Icon TRÁI – Text PHẢI */
}

/* Nút tròn */
.vx987-orb-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icon */
.vx987-orb-btn img {
    max-width: 60%;
    max-height: 60%;
}

/* Hiệu ứng glow */
.vx987-orb-glow {
    animation: vx987GlowPulse 2.4s infinite ease-out;
}

.vx987-orb-glow::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    opacity: 0;
    transform: scale(0.7);
    animation: vx987WaveRing 2.4s infinite ease-out;
}

/* Hover đẹp hơn */
.vx987-orb-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Màu */
.vx987-orb-call {
    background: radial-gradient(circle at 30% 30%, #4cff9a, #0bb35b);
}

.vx987-orb-zalo {
    background: radial-gradient(circle at 30% 30%, #ffffff, #1a7cff);
}

.vx987-orb-mess {
    background: radial-gradient(circle at 20% 20%, #ff7ad9, #006eff);
}

/* Số điện thoại: nằm BÊN PHẢI icon */
.vx987-call-text {
    padding: 6px 14px;
    border-radius: 99px;
    background: #ffffff;
    color: #0b7a3f;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    border: 1px solid rgba(11, 122, 63, 0.15);
}

/* Zalo rung */
.vx987-zalo-shake {
    animation:
        vx987GlowPulse 2.4s infinite ease-out,
        vx987Buzz 1.2s infinite linear;
}

/* Mobile */
@media (max-width: 768px) {
    .vx987-contact-tower {
        left: 12px;
        bottom: 25px;
        gap: 10px;
    }
    .vx987-call-text {
        font-size: 13px;
        padding: 5px 12px;
    }
}

/* ===== KEYFRAMES ===== */
@keyframes vx987GlowPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 153, 0.6); }
    50% { box-shadow: 0 0 0 12px rgba(0, 255, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 153, 0); }
}

@keyframes vx987WaveRing {
    0% { opacity: 0.7; transform: scale(0.7); }
    60% { opacity: 0; transform: scale(1.25); }
    100% { opacity: 0; transform: scale(1.25); }
}

@keyframes vx987Buzz {
    0%,100% { transform: translate(0,0) rotate(0); }
    10% { transform: translate(-1px,1px) rotate(-2deg); }
    20% { transform: translate(1px,-1px) rotate(2deg); }
    30% { transform: translate(-1px,1px) rotate(-1deg); }
    40% { transform: translate(1px,-1px) rotate(1deg); }
    50% { transform: translate(0,0) rotate(0); }
}




/* Nút Liên Hệ bên phải */
    .contact-label {
        position: fixed;
        right: 20px;
        bottom: 25px;
        background: linear-gradient(45deg, #ff4b2b, #ff416c);
        color: white;
        font-weight: 600;
        padding: 12px 22px;
        border-radius: 50px;
        box-shadow: 0 0 0 0 rgba(255,65,108,0.6);
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 9999;
        animation: glowPulseLabel 3s infinite ease-out;
    }

    @keyframes glowPulseLabel {
        0% { box-shadow: 0 0 0 0 rgba(255,65,108,0.6); }
        70% { box-shadow: 0 0 0 20px rgba(255,65,108,0); }
        100% { box-shadow: 0 0 0 0 rgba(255,65,108,0); }
    }

    .contact-label:hover {
        transform: scale(1.05);
    }
    
    /* KẾT THÚC NÚT CALL -CSS  */






.header-main .nav > li > a {
    font-weight: bold;
}


   


















.section-title-bold-center span, .section-title-center span {
    font-weight: bold;
}



li.html .row, li.html form, li.html input, li.html select {

    border-radius: 10px;
}

.searchform .button.icon {
    border-radius: 10px;
}


.nav-dropdown-has-border .nav-dropdown {
    border-radius: 10px;
}











.vt-footer-info{
  list-style: none;
  padding: 0;
  margin: 0;
  color: #fff;
}

.vt-footer-info li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
}

.vt-footer-info i{
  min-width: 20px;
  color: #ffd84d;
  font-size: 16px;
  margin-top: 3px;
}

.vt-footer-info a{
  color: #fff;
  text-decoration: none;
}

.vt-footer-info a:hover{
  text-decoration: underline;
}



















   /* =========================
   VINATECH CF7 - 3D FLAT UI (NO CSS VARIABLES)
   ========================= */

.wpcf7 form{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(2, 8, 23, .12);
  overflow: hidden;
}

/* decor blob */
.wpcf7 form:before,
.wpcf7 form:after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
}
.wpcf7 form:before{
  width: 180px;
  height: 180px;
  left: -30px;
  top: -30px;
  background: radial-gradient(circle at 30% 30%, rgba(31,111,255,.35), rgba(31,111,255,0));
  transform: rotate(12deg);
}
.wpcf7 form:after{
  width: 220px;
  height: 220px;
  right: -40px;
  bottom: -40px;
  background: radial-gradient(circle at 30% 30%, rgba(0,212,255,.28), rgba(0,212,255,0));
  transform: rotate(-10deg);
}

/* đảm bảo nội dung nằm trên blob */
.wpcf7 form *{
  position: relative;
  z-index: 1;
}

.wpcf7 form > p{
  margin: 0 0 14px;
}

/* Inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.80));
  color: #0f172a;
  font-size: 16px;
  outline: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  box-shadow: 0 10px 18px rgba(2, 8, 23, .06);
}

.wpcf7 textarea{
  min-height: 140px;
  resize: vertical;
  line-height: 1.45;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{
  color: rgba(100,116,139,.9);
}

/* Focus glow */
.wpcf7 input:focus,
.wpcf7 textarea:focus{
  border-color: rgba(31,111,255,.55);
  box-shadow:
    0 16px 34px rgba(2, 8, 23, .10),
    0 0 0 6px rgba(31,111,255,.28);
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.86));
}

/* Hover */
.wpcf7 input:hover,
.wpcf7 textarea:hover{
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 14px 26px rgba(2, 8, 23, .08);
}

/* Submit button */
.wpcf7 input[type="submit"]{
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(90deg, #1f6fff, #00d4ff);
  box-shadow:
    0 18px 34px rgba(31,111,255,.28),
    0 10px 18px rgba(2, 8, 23, .10);
  transform: translateY(0);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.wpcf7 input[type="submit"]:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    0 22px 44px rgba(31,111,255,.32),
    0 12px 22px rgba(2, 8, 23, .12);
}

.wpcf7 input[type="submit"]:active{
  transform: translateY(1px);
  box-shadow:
    0 12px 26px rgba(31,111,255,.22),
    0 8px 14px rgba(2, 8, 23, .10);
}

/* CF7 response */
.wpcf7 .wpcf7-response-output{
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 18px rgba(2, 8, 23, .06);
  color: #0f172a;
}

/* Mobile */
@media (max-width: 640px){
  .wpcf7 form{ padding: 16px; }
}











@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}