:root{
  --ink:#15181f;
  --ink-soft:#565c6b;
  --ink-faint:#8a8f9c;
  --bg:#ffffff;
  --bg-soft:#f8f7f6;
  --bg-tint:#fdeeee;
  --line:rgba(21,24,31,.08);
  --line-strong:rgba(21,24,31,.14);
  --accent:#dc1e23;
  --accent-dark:#a8161a;
  --accent-ink:#7a1013;
  --surface:#ffffff;
  --shadow-diffuse:0 30px 60px -25px rgba(21,24,31,.16);
  --shadow-soft:0 20px 40px -24px rgba(21,24,31,.14);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1360px;
}


.point-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17.6px;
    margin-top: 32px;
}
.point-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}
.point-card {
    min-width: 0;
    padding: 25.6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--bg-tint);
    border-radius: 16.8px;
    transition: transform .4s var(--ease), background .4s var(--ease);
}
.badge-md {
    width: 57.6px;
    height: 57.6px;
}
.point-card .badge {
    margin-bottom: 16px;
}
.group:hover .badge {
    transform: translateY(-2px);
}
.point-card h4 {
    font-size: 16.32px;
    margin-bottom: 8px;
}
p {
    margin: 0;
    line-height: 1.7;
    color: var(--ink-soft);
}
.point-card p {
    font-size: 14.4px;
}
.section {
    position: relative;
    padding-block: 48px;
}
.media-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-diffuse);
}
.media-frame.ratio-4-3 {
    aspect-ratio: 4 / 3;
}
.tax-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-delay-1 {
    transition-delay: .08s;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.tax-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 28px 24px 0;
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tax-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
    border-color: transparent;
}
.tax-card-head {
    display: flex;
    align-items: flex-start;
    gap: 13.6px;
    margin-bottom: 16px;
}
.tax-num {
    flex: none;
    width: 34.4px;
    height: 34.4px;
    border-radius: 10.4px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .4s var(--ease), transform .4s var(--ease);
}
.tax-card:hover .tax-num {
    background: var(--accent-dark);
    transform: scale(1.06);
}
.tax-card-head h4 {
    font-size: 16.32px;
    line-height: 1.32;
    color: var(--accent-dark);
    padding-top: 2.4px;
    font-weight: 700;
}
.tax-card>p {
   
    min-width: 0;
}
.tax-card-media {
    margin-top: auto;
    padding-top: 24px;
}
.tax-card-media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .5s var(--ease);
}
.tax-card:hover .tax-card-media img {
    transform: scale(1.035);
}

.strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-delay-2 {
    transition-delay: .16s;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.section-title{
  font-weight: 700;
}
.strip-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 25.6px 24px;
    border-right: 1px solid var(--line);
    min-width: 0;
}
.strip-item>div {
    min-width: 0;
}
.badge svg {
    width: 80%;
    height: 80%;
}
.strip-item h4 {
    font-size: 15.68px;
    margin-bottom: 5.6px;
    font-weight: 600;
}
.strip-item:last-child {
    border-right: none;
}
.badge-sm {
    width: 46.4px;
    height: 46.4px;
    border-radius: 13.6px;
}
.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--bg-tint);
    border-radius: 16.8px;
    transition: transform .4s var(--ease), background .4s var(--ease);
}
.section-head.center {
    text-align: center;
}
.row-list1 {
    border-top: 1px solid var(--line);
}
.row-item>div {
    min-width: 0;
}
.row-item .badge {
    margin-top: 1.6px;
}
.badge-sm {
    width: 46.4px;
    height: 46.4px;
    border-radius: 13.6px;
}
.row-item h4 {
    font-size: 16.32px;
    margin-bottom: 5px;
    font-weight: 600;
}
.row-item {
    display: flex;
    gap: 20px;
    padding-block: 10px;
    border-bottom: 1px solid var(--line);
}
.security-pair {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}
.security-pair>* {
    min-width: 0;
}
.security-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    position: relative;
    min-height: 352px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.security-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
    transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.security-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(21, 24, 31, 0) 20%, rgba(10, 11, 14, .94) 92%);
}
.security-card-body {
    position: relative;
    z-index: 1;
    padding: 32px;
}
.security-card-body p {
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
}
.security-card-body h4 {
    font-size: 18.4px;
    color: #fff;
    margin-bottom: 8.8px;
}
.security-card:hover img {
    transform: scale(1.06);
    opacity: .68;
}
.point-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17.6px;
    margin-top: 32px;
}
.point-grid-4 {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0;
}
.point-card .badge {
    margin-bottom: 16px;
}
.badge-md {
    width: 57.6px;
    height: 57.6px;
}
.point-card h4 {
    font-size: 16.32px;
    margin-bottom: 8px;
}
.point-card h4 {
    font-size: 16.32px;
    margin-bottom: 8px;
}
.media-frame.flat {
    box-shadow: none;
    background: none;
}
@media(min-width: 768px){
  .row-flex1 {
      display: flex;
  }
  .col-image-dev .media-frame {
      opacity: 0;
      height: 0;
  }
  .col-image-dev .wpb_wrapper{
    height: 100%;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-diffuse);
  
    background-size: cover;
    background-position: center;
  }
  .image-dev1 .wpb_wrapper {
    
    background-image: url('https://amnote.com.vn/wp-content/uploads/2026/07/asset-3c883ebcd3ec43.png');
    
  }
  .image-dev2 .wpb_wrapper {
    
    background-image: url(' https://amnote.com.vn/wp-content/uploads/2026/07/asset-9caf787bb6d5ef.png');
  }
  .image-dev3 .wpb_wrapper {
    
    background-image: url('https://amnote.com.vn/wp-content/uploads/2026/07/asset-89205929c1e9f5.jpg');
  }

}

@media (max-width:980px){
  .tax-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .tax-grid{grid-template-columns:1fr}
  .tax-card{padding:25.6px 22.4px 0}
}

@media (max-width:820px){
  .strip{grid-template-columns:1fr}
  .strip-item{border-right:none;border-bottom:1px solid var(--line)}
  .strip-item:last-child{border-bottom:none}
}

@media (max-width:820px){
  .security-head{grid-template-columns:1fr}
  .security-pair{grid-template-columns:1fr}
}
@media (max-width:980px){.point-grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.point-grid-4{grid-template-columns:1fr}}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{order:-1}
  .split,.split.reverse{grid-template-columns:1fr}
  .split .split-media,.split.reverse .split-media{order:-1}
  .point-grid{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .point-grid{grid-template-columns:1fr}
  .lang-grid{max-width:none;grid-template-columns:1fr 1fr;row-gap:14.4px}
}