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

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


.vc_custom_heading_h2 {
    margin-top: 60px;
    font-size: 70px;
    line-height: normal;
    text-align: center;
    font-family: Josefin Sans;
    font-weight: 100;
    font-style: normal;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.redart-btn {
    display: inline-flex;
    align-items: center;
    background: #b2184a;
    color: #fff;
    padding: 12px 28px 12px 70px;
    position: relative;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: 0.3s;
}

/* Khung icon bên trái */
.redart-btn .btn-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 47px;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* text */
.redart-btn .btn-text {
  position: relative;
}

/* hover */
.redart-btn:hover {
  background: #8e0f37;
}

/* ===== Icon LOA bằng mã \f0a1 ===== */
/* (FontAwesome code — sau này bạn load FA thì hiện đúng ngay) */

.redart-btn .btn-icon::before {
    content: "\f0a1";
    font-family: FONTAWESOME;
    color: #b2184a;
    font-style: normal;
    font-weight: normal;
}


.redart-btn .btn-icon::after {
  content: "";
  position: absolute;
  right: -12px;  /* nhô sang nền đỏ */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;

  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #ffffff; /* màu tam giác */
}


.vc_custom_heading-h3 {
    font-size: 40px;
    line-height: 30px;
    text-align: left;
    font-family: Josefin Sans;
    font-weight: 100;
    font-style: normal;
}

.sec-4 p {
    margin-bottom: 40px;
}


.dev-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dev-tag-item {
    display: inline-block;
    padding: 8px 15px;
    background: #222;
    color: #fff !important;
    font-size: 13px;
    text-decoration: none;
    transition: .2s;
}

.dev-tag-item:hover {
    background: #ff0055; /* tuỳ chỉnh màu hover */
}


#footer {
    position: relative;
}

#footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    display: block;
    background: url("/wp-content/uploads/2025/11/title-line.png") repeat-x !important;
    z-index: 10;
}

span.fa {
    color: #252525;
}


.fa-gavel {
    font-size: 250px;
    height: auto;
    line-height: 280px;
    width: 100%;
    transform: scaleX(-1);
    position: absolute;
    right: -25%;
}


.fa-anchor {
    font-size: 250px;
    height: auto;
    line-height: 280px;
    width: 100%;
    transform: scaleX(-1);
    position: absolute;
    right: -25%;
}


.fa-paint-brush {
    font-size: 203px;
}

.fa-anchor {
    font-size: 254px;
}
.about-row-1 {
    padding-bottom: 25px;
}


.vc_custom_1465191034650 {
    margin-bottom: 20px !important;
}


.artist-info {
    color: #fff;
    max-width: 700px;
}

.artist-info .title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 25px;
}

.info-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
}

.info-row .icon {
    width: 25px;
    opacity: 0.8;
}

.info-row .label {
    width: 70px;
    font-weight: 600;
    opacity: 0.9;
}

.info-row .text a {
    color: #3aa8ff;
}

.social-icons {
    margin-top: 25px;
    display: flex;
    gap: 5px;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    color: #fff;
    font-size: 17px;
}

.social-icons .fb { background: #3b5998; }
.social-icons .tw { background: #55acee; }
.social-icons .gg { background: #dd4b39; }
.social-icons .dr { background: #ea4c89; }


.social-icons {
    display: flex;
    gap: 0px;
}


/* ===== FORM STYLE ===== */

.contact-form-wrapper .form-row-3 {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
    background: #222;
    border: 1px solid #333;
    color: #fff;
    width: 100%;
    /* padding: 12px 15px; */
}

.contact-form-wrapper textarea {
    min-height: 200px;
}

/* Submit button */
.contact-form-wrapper .form-submit input[type="submit"] {
    background: #009fe3;
    color: white;
    text-transform: uppercase;
    border: none;
    font-weight: 600;
    cursor: pointer;
    width: 20%;
}

.contact-form-wrapper .form-submit input[type="submit"]:hover {
    opacity: 0.85;
}

/* Full row */
.form-row-full {
    margin-bottom: 20px;
}

/* ===== RIGHT SIDE INFO ===== */

.contact-right {
    color: #fff;
}

.contact-right h3 {
    font-size: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.contact-right p {
    margin-bottom: 10px;
}

.contact-right i {
    width: 20px;
    margin-right: 8px;
    opacity: 0.8;
}

.contact-right a {
    color: #3aa8ff;
}

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


}


@media only screen and (max-width: 767px) {
      .row-1 .col:nth-child(1) {
        order: 2; 
    }

  .row-3 .col:nth-child(1) {
        order: 2; 
    }
}