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

/*************** ADD CUSTOM CSS HERE.   ***************/
:root{
	--bg-main: #d33b3b;
}
.social__links {
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    justify-content: flex-end
}

@media (max-width: 991px) {
    .social__links {
        -webkit-justify-content:center;
        -moz-box-pack: center;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: 15px
    }
}

@media (max-width: 450px) {
    .social__links {
        margin-top:0
    }
}

.social__links a {
    font-size: 15px;
    width: 42px;
    height: 42px;
    background: #fff;
    color: var(--fs-color-primary);;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    -webkit-box-shadow: 0 0 30px 0 rgba(0,26,100,.06);
    box-shadow: 0 0 30px 0 rgba(0,26,100,.06)
}

.social__links a:not(:last-child) {
    margin-right: 12px
}

.social__links a:hover {
    background: var(--fs-color-primary);
    color: #fff
}
.section-01{
	min-height: calc(100vh - 150px)!important;
	align-items: flex-end;
}
.hero__content {
    padding: 230px 0 245px;
    position: relative;
}
.hero__content--2 {
    min-height: 570px;
    /*width: 570px;*/
    padding: 0;
    overflow: hidden;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    z-index: 1
}
.hero__content--2 .hero-icon {
    margin-bottom: 25px;
}
.hero__content--2 .hero-icon img {
    /*margin-bottom: 25px;*/
    width: 100px;
}
.hero__content--2 .hero-text h1 {
    font-size: 42px;
    /*line-height: 65px;*/
    margin-bottom: 25px;
}
.hero__content--2 .hero-text p {
    font-size: 24px;
    color: #000000;
    /* font-weight: 700; */
}
.site-btn {
    display: inline-block;
    background: #1f1f20;
    color: #fff;
    padding-right: 40px;
    font-size: 16px;
    /*text-transform: uppercase;*/
    border-radius: 40px;
    font-weight: 700;
    padding-left: 0;
    line-height: 26px;
}
.site-btn__2 {
    display: inline-block;
    padding: 17px 35px;
    background-color: var(--fs-color-primary);
    position: relative;
    z-index: 2;
    min-width: 190px;
    color: #fff;
}
.hero__content--2 .hero-text .site-btn__2 {
    /*margin-top: 48px;*/
    padding: 17px 29.5px;
}
.site-btn .icon {
    width: 60px;
    height: 60px;
    /*background: #fff;*/
    display: inline-block;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    margin: 5px 25px 5px 5px;
    font-size: 20px;
    /*color: #fd4a36;*/
    -webkit-transition: .3s;
    transition: .3s;
}
.site-btn__2 .icon {
    background-color: transparent;
    padding: 0;
    width: auto;
    height: auto;
    line-height: 0px;
    color: #fff;
    margin: 0 10px 0 0;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}
.hero__content--2:after {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    -webkit-animation: sliderShape 10s infinite;
    animation: sliderShape 10s infinite;
    border-radius: 100%;
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
}
@-webkit-keyframes sliderShape {
    0%,to {
        border-radius: 60% 78% 90% 40%/55% 65% 75% 85%;
        -webkit-transform: translateZ(0) rotate(.01deg);
        transform: translateZ(0) rotate(.01deg)
    }

    34% {
        border-radius: 70% 60% 56% 64%/30% 49% 71% 70%;
        -webkit-transform: translate3d(0,5px,0) rotate(.01deg);
        transform: translate3d(0,5px,0) rotate(.01deg)
    }

    50% {
        -webkit-transform: translateZ(0) rotate(.01deg);
        transform: translateZ(0) rotate(.01deg)
    }

    67% {
        border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
        -webkit-transform: translate3d(0,-3px,0) rotate(.01deg);
        transform: translate3d(0,-3px,0) rotate(.01deg)
    }
}

@keyframes sliderShape {
    0%,to {
        border-radius: 60% 78% 90% 40%/55% 65% 75% 85%;
        -webkit-transform: translateZ(0) rotate(.01deg);
        transform: translateZ(0) rotate(.01deg)
    }

    34% {
        border-radius: 70% 60% 56% 64%/30% 49% 71% 70%;
        -webkit-transform: translate3d(0,5px,0) rotate(.01deg);
        transform: translate3d(0,5px,0) rotate(.01deg)
    }

    50% {
        -webkit-transform: translateZ(0) rotate(.01deg);
        transform: translateZ(0) rotate(.01deg)
    }

    67% {
        border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
        -webkit-transform: translate3d(0,-3px,0) rotate(.01deg);
        transform: translate3d(0,-3px,0) rotate(.01deg)
    }
}
h2{
	font-size: 36px;
}
h3{
	font-size: 28px;
}
h4{
	font-size: 24px;
}
.bg-red-about{
	background: var(--fs-color-primary);
	color: #fff;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 1.3em;
}
.bg-red-about h3{
	color: #fff;
}
.bg-red-about p{
	margin-bottom: 0;
}
h6.subt-title {
	color: var(--fs-color-primary);
	font-size: 18px;
    text-transform: uppercase;

}
.right-50 {
    width: 100%;
    margin-left: auto;
    margin-right: 0;
    text-align: justify;
    font-style: italic;
}
.flip-card {
  background: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 12px;
}

.flip-card:hover .card-inner {
  transform: rotateX(180deg);
}

.card-front, .card-back {
  /*position: absolute;*/
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  padding:45px 35px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Mặt trước */
.card-front {
  background-color: #fff;
  z-index: 2;
      border-bottom: 5px var(--bg-main) solid;
}

.card-front .hsb-icon img {
  width: 60%;
  margin-bottom: 20px;
}

.card-front .hsb-title {
  font-size: 20px;
    font-weight: 500;
  color: var(--color2);
  padding: 8px 0 16px;
  /*line-height: 1;*/
}

/* Mặt sau */
.card-back {
  background: var(--bg-main);
  color: #fff;
  transform: rotateX(180deg);
  z-index: 1;
  position: absolute;
    top: 0;

}
.card-back h3{
	font-size: 20px;
    font-weight: 500;
  color: var(--color2);
  padding: 8px 0 16px;
}
.card-back .hsb-icon img {
  width: 60%;
  margin-bottom: 20px;
}
.card-back .hsb-desc {
  font-size: 16px;
  margin-bottom: 20px;
  padding: 0 10px;
  text-align: center;
}

.card-back .hsb-button {
  padding: 10px 20px;
  border: 1px solid #fff;
  border-radius: 25px;
  color: #fff;
  text-decoration: none;
}
.section-solution{
	align-items: flex-end;
	padding-bottom: 0!important;
}
.box-solution {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    border-bottom: 5px var(--bg-main) solid;
}
.box-solution h4{
	line-height:initial;
}
.box-solution p{
	margin-bottom: 0;
}
.penned .box-solution{
	border: 1px var(--bg-main) solid;;
	border-bottom: 5px var(--bg-main) solid;
}
.penned .box-solution:hover{
	background: var(--bg-main);
}
.penned .box-solution:hover img{
	filter: brightness(10);
}
.penned .box-solution:hover *{
	color: #fff!important;
}
.penned  .banner{
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--bg-main);
}
.row-quytrinh >.col:before, .row-quytrinh >.col:after{
	border-color: var(--bg-main);
}
.wp-box__icon {
    
    
}
.wp-box__icon .icon-box-img {
	width: 90px!important;
    height: 90px!important;
    border-radius: 10px;
    background: #fd4a36;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    margin-bottom: 0;
}
.wp-box__icon .icon-box-img .icon{
	width: 50px;
}
.wp-box__icon img {
    -webkit-transition: .3s;
    transition: .3s
}
.wp-box__icon {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.wp-box__icon_bottom .icon-box-img{
	/*order: 2;*/
}
.row-quytrinh .col.medium-4 >.col-inner{
	border: 1px solid;
	padding: 20px;
	border-radius: 10px;
}
.row-quytrinh .col.medium-4{
	padding: 10px!important;
}

@media (prefers-reduced-motion:reduce) {
    .wp-box__icon img {
        -webkit-transition: none;
        transition: none
    }
}

/*.wp-box__icon--2 .icon-box-img{
    background: #0f418f
}

.wp-box__icon--3 .icon-box-img{
    background: #ffb400
}

.wp-box__icon--4 .icon-box-img{
    background: #0af4ff
}

.wp-box__icon--5 .icon-box-img{
    background: #5bbf00
}

.wp-box__icon--6 .icon-box-img{
    background: #6200ff
}*/

.wp-box__icon--center {
    margin: 0 auto
}

.wp-box__icon H4 {
    font-size: 22px;
    margin-bottom: 20px;
    -webkit-transition: .3s;
    transition: .3s
}
.pub-timeline {
  --bg: #f7f7fb;
  --title-bg: #d33a3a;
  --stage-chip: #2f3b52;
  --bar: #2c7be5;
  --bar-alt: #6ec1ff;
  --text: #0b1221;
  --muted: #6b7280;
  --grid-gap: 8px;
  --left-col: 220px;
  --stage-h: 56px;
  --row-h: 86px;
  /*background: var(--bg);*/
  /*padding: clamp(12px, 2vw, 24px);*/
  border-radius: 16px;
  /*box-shadow: 0 6px 20px rgba(0,0,0,.06);*/
  color: var(--text);
}
.pt-title {
  background: var(--title-bg);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 14px;
  text-align: center;
  margin-bottom: 50px;
}
.pt-title h2 {
  margin: 0;
  letter-spacing: .02em;
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: bold;
  color: #fff;
}

.pt-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--left-col) repeat(16, 1fr);
  grid-template-rows: var(--stage-h) repeat(3, var(--row-h));
  gap: var(--grid-gap);
  background: #fff;
  border: 1px solid var(--bg-main);
  border-radius: 12px;
  padding: 12px;
  /*overflow: hidden;*/
}

/* ===== Đường kẻ ngang ===== */
.pt-hline {
  position: absolute;
  left: var(--left-col);
  right: 0;
  height: 1px;
  background: #e5e7eb;
}
.h0 {
    top: calc(var(--stage-h) + 16px);
}
.h1 { top: calc(var(--stage-h) + var(--row-h) + 24px); }
.h2 { top: calc(var(--stage-h) + var(--row-h)*2 + 32px); }
.h3 { top: calc(var(--stage-h) + var(--row-h)*3 + 40px); display: none	;}
.h4 { bottom: 0; display: none;}

/* ===== Nhãn trái ===== */
.pt-left {
  grid-column: 1 / 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 14px;
  font-weight: bold;
  color: var(--stage-chip);
  line-height: 1.25;
  /*margin-bottom: 10px;*/
}
.pt-left--1 { grid-row: 2; }
.pt-left--2 { grid-row: 3; }
.pt-left--3 { grid-row: 4; }

/* ===== Giai đoạn ===== */
.pt-stage {
  grid-row: 1;
  align-self: center;
  justify-self: stretch;
  background: var(--bg-main);
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 12px 10px;
  border-radius: 10px;
 margin-bottom: 80px;
}
.pt-s1 { grid-column: 2 / span 4; }
.pt-s2 { grid-column: 6 / span 4; }
.pt-s3 { grid-column: 10 / span 4; }
.pt-s4 { grid-column: 14 / span 4; }

/* ===== Đường kẻ dọc ===== */
.pt-vline {
  position: absolute;
  top: var(--stage-h);
  bottom: 0;
  width: 1px;
  background: #e5e7eb;
}
.v1 { left: calc((var(--left-col) + 0 * (100% - var(--left-col)) / 16) + 14px); }
.v2 { left: calc((var(--left-col) + 4 * (100% - var(--left-col)) / 16) + 10px); }
.v3 { left: calc((var(--left-col) + 8 * (100% - var(--left-col)) / 16) + 6px); }
.v4 { left: calc((var(--left-col) + 12 * (100% - var(--left-col)) / 16) + 0px); }
.v5 { left: calc((var(--left-col) + 16 * (100% - var(--left-col)) / 16) + 0px); display: none;}

/* ===== Thanh công việc ===== */
.pt-bar {
  /*align-self: center;*/
  height: max-content;
  color: #fff;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(44,123,229,.22);
  display: flex;
  align-items: center;
  line-height: 1.2;
  z-index: 9;
}
.b1 { grid-row: 2; grid-column: 2 / 7;  background: var(--bar-alt); color: #08345b; }
.b2 { grid-row: 2; grid-column: 10 / 14; background: var(--bar); margin-top:20px }
.b3 { grid-row: 3; grid-column: 3 / 7;  background: var(--bar-alt); color: #08345b; }
.b4 { grid-row: 3; grid-column: 5 / 10;  background: var(--bar); margin-top:35px }
.b5 { grid-row: 4; grid-column: 14 / 18; background: var(--bar-alt); color: #08345b; }
.b6 { grid-row: 4; grid-column: 10 / 18; background: var(--bar); margin-top:35px}

/* Ghi chú */
.pt-note {
  margin: 10px 6px 0;
  font-style: italic;
  color: var(--muted);
  font-size: 0.9rem;
  font-family: Arial, Helvetica, sans-serif;
}
.contact-block {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  /*padding: 25px 30px;*/
  border-radius: 4px;
  max-width: 500px;  /* có thể bỏ nếu muốn full width */
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 8px;
  margin-left: 0!important;
}

.contact-list i {
  width: 22px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

/* Tùy chọn hover nhẹ cho link (nếu có trong nội dung) */
.contact-list a {
  color: #fff;
  text-decoration: none;
}
.contact-list a:hover {
  text-decoration: underline;
}
.row-contact-block{
	position: relative;
}
.row-contact-block:before{
	content: "";
	display: inline-block;
	width: 70%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(/wp-content/uploads/2025/11/banner.webp);
	background-attachment: 100%;
	border-radius: 20px;
}
.radius-10 img {
    border-radius: 10px;
}
.bg-main-col >.col-inner{
    background: var(--bg-main);
    padding: 30px 20px 20px;
    border-radius: 20px;
}
.bg-main-col >.col-inner .box-image{
	border-radius: 10px;
	    border: 5px double #f00;
}
.bg-main-col-gay >.col-inner {
	 background: #e1e1e1;
    padding: 30px 20px 20px;
    border-radius: 20px;
}
.bg-main-col-gay >.col-inner .box-image{
	border-radius: 10px;
	 border: 5px double #e1e1e1;
}
/* Responsive nhỏ gọn */
@media (max-width: 480px) {
  .contact-list li {
    font-size: 15px;
    gap: 10px;
  }
  .contact-list i {
    font-size: 16px;
  }
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

h2 {
    font-size: 28px;
}
.hero__content--2 .hero-text h1{
	font-size: 30px;
}
.hero__content--2 .hero-text p{
	font-size: 20px;
}
.row-contact-block:before{
	width: calc(100% - 20px);
	left: 10px;
}
}