.donate-page{width:100%; float:left; position:relative; margin-top:60px; margin-bottom:40px; }
.donate-page .title-page{ display:inline-block; position:relative; font-weight:bold; text-transform:uppercase; letter-spacing:1px; color:#000; font-size:15px;}
.donate-page .title-page:before{content:''; width:60px; margin-right:30px; height:2px; margin-top:-1px; position:absolute; top:50%; right:100%; background:var(--color1)}
.donate-page .title-page:after{content:''; width:60px; margin-left:30px; height:2px; margin-top:-1px; position:absolute; top:50%; left:100%; background:var(--color1)}

.donate-page .head-bank{width:100%; display:block; position:relative; margin: auto; }
.donate-page .head-bank .row-top{width:100%; position:relative; float:left; background-image: linear-gradient(#ffffff , #f3f3f6); z-index:1;}
.donate-page .head-bank .row-top .title{width:100%; float:left; position:relative; text-align:center; z-index:3;}
.donate-page .head-bank .row-top .title h4{text-transform:uppercase; margin:0 0 5px 0; letter-spacing:1px; font-weight:bold; font-size:18px;}
.donate-page .head-bank .row-top .title h3{font-size:50px; font-weight:bold; color:#cb003c;}
.donate-page .head-bank .row-top .box-qr{max-width:950px; display:block; margin:0 auto; position:relative; clear:both; overflow:hidden; text-align:center;}
.donate-page .head-bank .row-top .box-qr:before{content:''; display:block; padding-bottom:420px;}
.donate-page .head-bank .row-top .box-qr .bg{width:100%; float:left; position:absolute; overflow:hidden; border-radius:50%; top:0; left:0;}
.donate-page .head-bank .row-top .box-qr .bg:before{content:''; display:block; padding-bottom:100%;}
.donate-page .head-bank .row-top .box-qr .bg:after{content:''; width:100%; height:50%; background:url(../Default/intro-knyt-bg.jpg) center bottom; background-size:cover; position:absolute; top:0; left:0;} 
.donate-page .head-bank .row-top .box-qr .info{display:block; position:absolute; z-index:5; width:100%; height:100%; top:0; left:0;}
.donate-page .head-bank .row-top .box-qr .info .qr{background:#fff; margin-top:50px; display:inline-block; padding:22px 25px 10px 25px; border-radius:7px; box-shadow: 0 0px 10px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05); position:relative; z-index:2; }
.donate-page .head-bank .row-top .box-qr .info .qr span{display:block; text-transform:uppercase; font-weight:bold; font-size:17px; padding-bottom:7px; color:#cb003c; letter-spacing:1px; }
.donate-page .head-bank .row-top .box-qr .info .qr .img-qr img{width:159px; height:159px;}
.donate-page .head-bank .row-top .box-qr .info .qr .item-logo{width:100%; float:left; position:relative; text-align:left; }
.donate-page .head-bank .row-top .box-qr .info .qr .item-logo img{width:72px; float:left; margin-top:10px;}
.donate-page .head-bank .row-top .box-qr .info .qr .item-logo img:last-child{float:right; margin:7px;}
.donate-page .head-bank .bank-info{display:table; width:600px; margin: -60px 0 0 -300px; background:#fff; padding:20px 0; position:relative; z-index:2;  border-radius:0 0 7px 7px; left:50%; float:left }
.donate-page .head-bank .bank-info:before{content:''; border-right:20px solid #fff; border-top:60px solid transparent; position:absolute; top:0; right:100%;}
.donate-page .head-bank .bank-info:after{content:''; border-left:20px solid #fff; border-top:60px solid transparent; position:absolute; top:0; left:100%;}
.donate-page .head-bank .bank-info .col-left{display:table-cell; text-align:center;vertical-align:middle; padding-right:20px; width:50%; position:relative;}
.donate-page .head-bank .bank-info .col-left:after{content:''; width:1px; height:calc(100% - 10px); position:absolute; top:5px; right:0; background:rgba(0,0,0,.15)}
.donate-page .head-bank .bank-info .col-left img{width:180px;}
.donate-page .head-bank .bank-info .col-right{display:table-cell; text-align:left; padding-left:20px; width:50%; vertical-align:middle }
.donate-page .head-bank .bank-info .col-right ul{margin:0; padding:0; list-style:none;}
.donate-page .head-bank .bank-info .col-right ul li{clear:both; position:relative; font-size:15px; padding: 1px 0}
.donate-page .head-bank .bank-info .col-right ul li span{width: 110px; display:inline-block;}
.donate-page .head-bank .bank-info .col-right ul li b{color:#000}
.donate-page .head-bank .bank-info .nav-follow{width:calc(100% - 100px); position:absolute; top:100%; left:50px; background:#cb003c; line-height:45px; font-size:15px; height:44px; padding: 0 15px 0 20px; color:#fff; text-transform:uppercase; font-weight:500; text-decoration:none; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0) }
.donate-page .head-bank .bank-info .nav-follow:before{content:''; border-right:7px solid #cb003c; border-top: 22px solid transparent; border-bottom: 22px solid transparent; position:absolute;  top:0; right:100%;}
.donate-page .head-bank .bank-info .nav-follow:after{content:''; border-left:7px solid #cb003c; border-top: 22px solid transparent; border-bottom: 22px solid transparent; position:absolute;  top:0; left:100%;}
.donate-page .head-bank .bank-info .nav-follow i{font-size:16px; float:right; line-height:45px;}
.donate-page .head-bank .row-bottom{width:100%; float:left; position:relative; z-index:1; padding-top:80px; text-align:center;}
.donate-page .head-bank .row-bottom .note{display:block; max-width:100%; margin: 0 auto; font-size:17px; line-height:26px; padding-bottom:30px;}
.donate-page .head-bank .row-bottom .sub-title{display:block; font-size:15px; padding-top:10px;}
.donate-page .head-bank .row-bottom .wrap-price-other{width:100%; width:100%; float:left; text-align:center; margin-top:-10px; padding-bottom:10px; display:none;}
.donate-page .head-bank .row-bottom .wrap-price-other .box{width:300px; display:inline-block; position:relative; }
.donate-page .head-bank .row-bottom .wrap-price-other .box:after{line-height:43px; content:'₫'; font-size:16px; position:absolute; top:0; right:15px; font-weight:bold; color:#cb003c}
.donate-page .head-bank .row-bottom .wrap-price-other input[type="text"]{width:100%; height:45px; text-align:left; border:1px solid #cb003c; padding-left:10px; border-radius:5px; font-weight:bold; font-size:17px; outline:none; color:#cb003c }
.donate-page .head-bank .row-bottom ul.price-list{margin:25px auto 30px auto; padding:0; list-style:none; text-align:center; max-width:100%; display:block;}
.donate-page .head-bank .row-bottom ul.price-list li{display:inline-block; position:relative; margin:0 2px }
.donate-page .head-bank .row-bottom ul.price-list li a{font-size:17px; font-weight:bold; color:#cb003c; line-height:50px; height:50px; border:1px solid rgba(0,0,0,.1); display:block; padding: 0 20px; text-decoration:none; position:relative; border-radius:5px;}
.donate-page .head-bank .row-bottom ul.price-list li a.current{background:#cb003c; color:#fff; padding-left:45px;}
.donate-page .head-bank .row-bottom ul.price-list li a.current:before{font-family: "Font Awesome 5"; font-weight:400; content: "\f00c"; font-size:16px; width:24px; height:24px; background:#fff; color:#cb003c; text-align:center; line-height:24px; position:absolute; top:12px; left:13px; border-radius:3px; box-shadow:none!important}
.donate-page .head-bank .row-bottom ul.price-list li:not(:last-child) a:after{content:'₫'; font-size:16px; padding-left:2px; float:right; margin-top:-1px;}
.donate-page .head-bank .row-bottom .wrap-form{max-width: 500px; width:100%; display:block; margin: 0 auto; position:relative; clear:both;}
.donate-page .head-bank .row-bottom .wrap-form li{margin-top:20px;}
.donate-page .head-bank .row-bottom .wrap-form li:last-child{margin-top:10px;}
.donate-page .head-bank .row-bottom .wrap-form input[type="text"],
.donate-page .head-bank .row-bottom .wrap-form textarea{height:45px; background:none!important; border-color:rgba(0,0,0,.15)}
.donate-page .head-bank .row-bottom .wrap-form input[type="text"]:focus,
.donate-page .head-bank .row-bottom .wrap-form textarea:focus{border-color:var(--color1)}
.donate-page .head-bank .row-bottom .wrap-form textarea{height:100px;}
.donate-page .head-bank .row-bottom .wrap-form a.nav-donate{width:100%; float:left; background:var(--color2); padding: 0 50px 0 20px; height:50px; line-height:52px; text-decoration:none; color:#fff; border-radius:5px; text-align:left; position:relative; transition:.3s; box-shadow: inset 0 0 rgba(0,0,0,0)}
.donate-page .head-bank .row-bottom .wrap-form a.nav-donate:hover{box-shadow:inset 0 50px rgba(0,0,0,.1)}
.donate-page .head-bank .row-bottom .wrap-form a.nav-donate span{text-transform:uppercase; font-weight:bold; font-size:15px;}
.donate-page .head-bank .row-bottom .wrap-form a.nav-donate b{font-size:15px; float:right;}
.donate-page .head-bank .row-bottom .wrap-form a.nav-donate b:before{content:''; padding: 0 10px; font-weight:normal;}
.donate-page .head-bank .row-bottom .wrap-form a.nav-donate b:after{content:'đ'; padding-left:2px;}
.donate-page .head-bank .row-bottom .wrap-form a.nav-donate:after{font-family: "Font Awesome 5";  font-weight: 900; content: "\f061"; font-size:16px; line-height:50px; position:absolute; top:0; right:20px;}
.donate-page .head-bank .row-bottom .note-bank{width:100%; position:relative; margin:20px auto 0 auto; padding:0; list-style:none; display:block; max-width:680px; }
.donate-page .head-bank .row-bottom .note-bank li{width:33.33333333%; justify-content:center; padding: 0 0px; float:left}
.donate-page .head-bank .row-bottom .note-bank li span{font-weight:500; width:100%; float:left; padding-bottom:10px; text-transform:uppercase; font-weight:bold; font-size:13px; letter-spacing:1px;}
.donate-page .head-bank .row-bottom .note-bank li:nth-child(1) img{height:32px;  margin:0px 2px 0 2px;}
.donate-page .head-bank .row-bottom .note-bank li:nth-child(1) a{clear:both; display:block; font-size:12px; color:#000; font-weight:bold}
.donate-page .head-bank .row-bottom .note-bank li:nth-child(2) img{height:34px; margin-top:5px;}
.donate-page .head-bank .row-bottom .note-bank li:nth-child(3) img{width:100%; max-width:180px; height:inherit}




.donate-page .body-page{width:100%; float:left; position:relative; text-align:center; margin-top:50px;}
.donate-page .body-page ul{margin: 0 -10px; clear:both; list-style:none; padding:0;}
.donate-page .body-page ul li{padding: 0 10px; text-align:center; margin-top:60px;}
.donate-page .body-page ul li .number{width:60px; height:60px; line-height:60px; display:block; text-align:center; margin: 0 auto; font-weight:bold; color:var(--color1); font-size:25px; position:relative; background:rgba(0,0,0,.02); box-shadow: 0 0 0 3px var(--color-border)}
.donate-page .body-page ul li h4{margin:0; display:block; color:var(--color1); font-size:20px; font-weight:bold; padding-top:25px;}
.donate-page .body-page ul li .note{display:block; font-size:16px; font-weight:normal; line-height:24px; padding-top:10px;} 
.donate-page .body-page ul li .box-momo{width:210px; padding: 20px; display:block; margin: 20px auto 0 auto; border:2px solid #cb003c; border-radius:10px}
.donate-page .body-page ul li .box-momo img{width:100%;}
.donate-page .body-page ul li .nav-paypalDonate{max-width:300px; width:100%; display:block; margin: 20px auto 0 auto}
.donate-page .body-page ul li .nav-paypalDonate img{width:100%;}
.donate-page .body-page ul li .info-bank{width:100%; float:left; position:relative; margin-top:30px;}
.donate-page .body-page ul li .info-bank .name{display:block; text-align:center; width:100%; float:left; padding-bottom:5px;}
.donate-page .body-page ul li .info-bank .name img{height:30px;}
.donate-page .body-page ul li .info-bank .name span{display:block; font-size:16px; font-weight:bold; padding-top:10px;}
.donate-page .body-page ul li .info-bank .row-info{width:100%; float:left; position:relative; display:table; margin-top:3px;}
.donate-page .body-page ul li .info-bank .row-info span{display:table-cell; width:50%; position:relative; font-size:15px;}
.donate-page .body-page ul li .info-bank .row-info span:first-child{padding-right:15px; text-align:right;}
.donate-page .body-page ul li .info-bank .row-info span:first-child:after{content:':'; position:absolute; right:-1px;}
.donate-page .body-page ul li .info-bank .row-info span:last-child{padding-left:15px; text-align:left; font-weight:500;}

ul.listBank{margin:0; padding:0; list-style:none; width:calc(100% + 10px); margin-left:-5px; }
ul.listBank li{width:calc(25% - 10px); margin: 10px 5px 0 5px; float:left; border:1px solid rgba(0,0,0,.07); padding: 10px 0; border-radius:5px; text-align:center}
ul.listBank li img{max-width:100%; max-height:100%;}


@media (max-width: 767px){
    .donate-page{margin-top:0px; margin-bottom:0;}
    .donate-page .head-bank .row-top{}
    .donate-page .head-bank .row-top .title{position:absolute; top:0; left:0; width:100%; padding-top:30px;}
    .donate-page .head-bank .row-top .title h4{font-size:16px;}
    .donate-page .head-bank .row-top .title h3{font-size:32px;}
    .donate-page .head-bank .row-top .box-qr{padding-top:0px;}
    .donate-page .head-bank .row-top .box-qr:before{display:none;}
    .donate-page .head-bank .row-top .box-qr .info{position:relative; padding-bottom:60px;}
    .donate-page .head-bank .row-top .box-qr .info .qr{margin-top:120px;}
    .donate-page .head-bank .row-top .box-qr .bg{border-radius:0; height:100%;}
    .donate-page .head-bank .row-top .box-qr .bg:after{height:100%;}
    .donate-page .head-bank .bank-info{width:100%; margin: -20px 0 0 0; left:initial; float:left; border-radius:20px 20px 0 0; display:block;}
    .donate-page .head-bank .bank-info .col-left{display:block; width:100%; padding:15px 0; }
    .donate-page .head-bank .bank-info .col-left:after{display:none;}
    .donate-page .head-bank .bank-info .col-right{display:block; width:100%; }
    .donate-page .head-bank .bank-info .col-right ul li span{width:50%; padding-right:10px; text-align:right;}
    .donate-page .head-bank .bank-info .col-right ul li b{width:50%; padding-left:10px; text-align:left;}

    .donate-page .head-bank .row-bottom ul.price-list{margin-top:20px; width:calc(100% + 10px); margin-left:-5px; max-width:initial}
    .donate-page .head-bank .row-bottom ul.price-list li{margin: 0; width:50%; float:left; display:block; padding: 5px}
    .donate-page .head-bank .row-bottom ul.price-list li a{width:100%; text-align:right;}
    .donate-page .head-bank .row-bottom ul.price-list li a:before{font-family: "Font Awesome 5"; content:''; font-weight:400; font-size:16px; width:24px; height:24px; background:#fff; color:#cb003c; text-align:center; line-height:24px; position:absolute; top:12px; left:13px; border-radius:3px; box-shadow: inset 0 0 0 1px var(--color-border)}
    .donate-page .head-bank .row-bottom ul.price-list li:last-child{width:100%;}
    .donate-page .head-bank .row-bottom .wrap-price-other{}
    .donate-page .head-bank .row-bottom .wrap-price-other .box{width:100%;}

    .donate-page .head-bank .row-bottom .note-bank li{width:100%; padding-bottom:30px;}
    .donate-page .head-bank .row-bottom .note-bank li:last-child{padding-bottom:0;}

    #myModal-listBank{}
    #myModal-listBank .modal-content{position:fixed; width:100%; height:100%; top:0; left:0; border-radius:0; padding:55px 0 0 0; width:100%; background:#fff;}
    #myModal-listBank .modal-content .modal-header{padding: 0 15px; height:55px; width:100%; position:absolute; top:0; left:0;}
    #myModal-listBank .modal-content .modal-header .modal-title{line-height:55px;}
    #myModal-listBank .modal-content .modal-header .nav-close{right:15px;}
    #myModal-listBank .modal-content .modal-body{padding: 0 15px 15px 15px; overflow-y:auto; overflow-x:hidden;}
    #myModal-listBank .modal-content .modal-footer{display:none;}
    ul.listBank{float:left;}
    ul.listBank li{width:calc(33.333333333% - 10px); }
}

@media (min-width: 768px) and (max-width: 991px){
   .donate-page{margin-top:40px; margin-bottom:0;}
   .donate-page .head-bank .row-top .title h3{font-size:40px;}
   .donate-page .head-bank .row-top .box-qr .bg{width:calc(100% + 150px); margin-left:-75px;}
   .donate-page .head-bank .row-bottom ul.price-list{margin-top:20px;}
   .donate-page .head-bank .row-bottom ul.price-list li{margin: 6px 2px 0 2px}

   .donate-page .body-page ul li{text-align:left; border-bottom:1px solid var(--color-border); padding-bottom:30px; padding-top:30px; margin-top:0;}
   .donate-page .body-page ul li:last-child{padding-bottom:0; border:none;}
   .donate-page .body-page ul li .head-donate{width:270px; float:left; } 
   .donate-page .body-page ul li .body-donate{width:calc(100% - 270px); float:right; padding-left:20px; text-align:left;} 
   .donate-page .body-page ul li .number{margin:0;}
}