.elementor-kit-7{--e-global-color-primary:#FFC500;--e-global-color-secondary:#FFB100;--e-global-color-text:#333333;--e-global-color-accent:#000000;--e-global-color-mat_gray:#FAFAFA;--e-global-color-mat_dark:#1E1E1E;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1170px;}.e-con{--container-max-width:1170px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:991px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================================
   MAT – vCard / Resume template  ·  port to Elementor
   Dán vào: Elementor → Site Settings → Custom CSS  (build.php tự nạp)
   Placeholders {{...}} được build.php thay bằng URL thật trong Media.
   ===================================================================== */

/* ---------- Fonts & icon fonts ---------- */
@font-face{font-family:'FontAwesome';src:url(https://hieunguyen.website/wp-content/uploads/mat/fontawesome-webfont.woff2) format('woff2'),url(https://hieunguyen.website/wp-content/uploads/mat/fontawesome-webfont.woff) format('woff');font-weight:400;font-style:normal}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased}
.fa-home:before{content:"\f015"}.fa-download:before{content:"\f019"}.fa-picture-o:before{content:"\f03e"}.fa-play:before{content:"\f04b"}
.fa-bars:before{content:"\f0c9"}.fa-suitcase:before{content:"\f0f2"}.fa-graduation-cap:before{content:"\f19d"}.fa-paper-plane:before{content:"\f1d8"}.fa-clone:before{content:"\f24d"}

/* ---------- 1. Body & core ---------- */
html{height:100%}
body.elementor-kit-7,body{font-family:'Roboto',sans-serif;font-size:14px;line-height:1.42857143;color:#333;background:url(https://hieunguyen.website/wp-content/uploads/2026/10/mat-images-bg.png) #fafafa;overflow-x:hidden;position:relative}
body a{text-decoration:none!important}
.elementor-kit-7 h1,.elementor-kit-7 h2,.elementor-kit-7 h3,.elementor-kit-7 h4,.elementor-kit-7 h5,.elementor-kit-7 h6{font-family:'Roboto',sans-serif;font-weight:500;color:inherit;margin:0}
.elementor-widget-text-editor p{font-size:13px;color:#4c4c4c;line-height:24px;margin:0 0 10px}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-widget-container{font-family:'Roboto',sans-serif}
.little-text,.little-text p{color:#989898!important;font-weight:400;line-height:18px!important}
hr{width:100%;background:#efefef}

/* khoảng cách tiện ích (giữ tên lớp như mẫu) */
.elementor .elementor-element.top_15{margin-top:15px!important}.elementor .elementor-element.top_30{margin-top:30px!important}.elementor .elementor-element.top_45{margin-top:45px!important}.elementor .elementor-element.top_60{margin-top:60px!important}
.elementor .elementor-element.bottom_15{margin-bottom:15px!important}.elementor .elementor-element.bottom_30{margin-bottom:30px!important}.elementor .elementor-element.bottom_45{margin-bottom:45px!important}.elementor .elementor-element.bottom_60{margin-bottom:60px!important}
.elementor .elementor-element.about-text{margin-top:33.1px!important}

/* ---------- Section title ---------- */
.elementor .elementor-widget.section-title{position:relative;width:auto;align-self:flex-start;padding:0 3px}
.elementor .elementor-widget.section-title:before{content:"";position:absolute;height:7px;width:100%;left:0;bottom:0;opacity:.4;background:#ffb100;z-index:0}
.elementor .section-title .elementor-heading-title{font-size:18px;font-weight:600;line-height:1.1;position:relative;z-index:1;color:#333}

/* ---------- Buttons (.site-btn) ---------- */
.elementor-widget-button.site-btn{width:auto}
.elementor-widget-button.site-btn .elementor-button{font-family:'Roboto',sans-serif;font-size:14px;font-weight:500;line-height:35px;border:0;border-radius:50px;padding:1px 29px;background:#ffc500;color:#000;fill:#000;transition:all ease .3s}
.elementor-widget-button.site-btn .elementor-button:hover,.elementor-widget-button.site-btn .elementor-button:focus{background:#ffb100;color:#000}
.elementor-widget-button.site-btn.icon .elementor-button{padding:1px 6px 1px 19px;text-align:left}
.elementor-widget-button.site-btn .elementor-button-content-wrapper{gap:0}
.elementor-widget-button.site-btn.icon .elementor-button-content-wrapper{flex-direction:row!important;justify-content:space-between;align-items:flex-start}
.elementor-widget-button.site-btn.icon .elementor-button-icon{order:2;margin:4px 0 0 15px;width:27px;height:27px;border-radius:50px;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
.elementor-widget-button.site-btn.icon .elementor-button-icon svg{width:11px;height:11px;fill:#000}
.elementor-widget-button.site-btn.icon .elementor-button-text{order:1}

/* ---------- 2. Profile ---------- */
.mat-profile{background:#fff;border-radius:6px;box-shadow:0 2px 92px 0 rgba(0,0,0,.07)}
.mat-profile .profile-name{padding:20px}
.mat-profile .profile-name .elementor-heading-title{font-size:17px;font-weight:700;text-transform:uppercase;line-height:19px;color:#333}
.mat-profile .profile-job{font-size:13px;color:#777;line-height:19px}
.mat-profile .profile-job p{font-size:13px;color:#777;line-height:19px;margin:0}
.mat-profile .elementor-widget.profile-image{margin-top:-18px}
.mat-profile .profile-image img{width:100%;display:block;-webkit-clip-path:polygon(0 9%,100% 0,100% 94%,0 100%);clip-path:polygon(0 9%,100% 0,100% 94%,0 100%)}
ul.profile-information{list-style:none;margin:8px 0 8px 35px;padding:0}
ul.profile-information li{list-style:none;border-left:solid 2px #eee;padding:0 0 23px 20px;font-size:14px;color:#787878;line-height:1.42857143}
ul.profile-information li p{font-size:13.5px;color:#7f7f7f;line-height:12px;margin:0}
ul.profile-information li:last-child{border:0;margin-left:2px;margin-top:-2px}
ul.profile-information li:before{content:"";border:solid 2px #ffb100;width:8px;height:8px;border-radius:50px;font-size:8px;margin-left:-25px;margin-top:2px;font-weight:400;background:#fff;display:block;position:absolute;box-sizing:border-box}
ul.profile-information li span{color:#000}
ul.profile-information li:first-child{padding-bottom:10px;padding-left:30px;position:relative}
ul.profile-information li:first-child:before{margin-left:-51px;margin-top:-30px;margin-bottom:20px;position:relative;border:0;width:40px;height:40px;padding:11px 14px;box-shadow:0 2px 32px 0 rgba(4,123,248,.3);background:#ffc500;box-sizing:border-box;color:#000}
ul.profile-information li:first-child:after{background:url(https://hieunguyen.website/wp-content/uploads/2026/10/mat-images-glasses.png) no-repeat;background-size:27px 10px;content:"";width:30px;height:10px;position:absolute;top:0;left:0;margin:16px -15px}
.mat-profile .profile-btn{padding:18px 0 30px;align-items:center}

/* ---------- 3. Navigation ---------- */
.mat-nav{background:#fff;border-radius:6px;height:70px;box-shadow:0 2px 92px 0 rgba(0,0,0,.07);position:relative}
.mat-nav .home-btn{width:67.5px;height:70px;margin-right:10px;flex:0 0 auto}
.mat-nav .home-btn .elementor-icon{width:67.5px;height:70px;border-radius:6px 0 0 6px;background:#ffc500!important;color:#000!important;font-size:21px;display:flex;align-items:center;justify-content:center;transition:all ease .4s}
.mat-nav .home-btn .elementor-icon:hover{background:#ffb100;transition:all ease .3s}
.mat-nav .home-btn .elementor-icon svg{width:21px;height:21px;fill:#000!important}
.mat-nav .nav-links{flex:1 1 auto}
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item,
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item:hover,
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item:focus{font-family:'Roboto',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;color:#000;padding:0 10px;line-height:73px;height:70px;transition:all ease .3s}
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item:hover,
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#ffb100}
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item:hover{color:#ffc500}
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item.elementor-item-active:hover{color:#ffc500}
.mat-nav .nav-links .elementor-nav-menu li{margin:0}
.mat-nav .nav-links .elementor-menu-toggle{font-size:20px;color:#000;background:transparent;border:0;border-left:solid 1px #eaeaea;border-radius:0;padding:0 0 0 21px;margin-right:23px;line-height:71px;height:70px;width:auto}
.mat-nav .nav-links .elementor-menu-toggle svg{width:20px;height:20px;fill:#000}
.mat-nav .social-icons{flex:0 0 auto;margin-right:5px}
.elementor-widget-social-icons.social-icons .elementor-social-icons-wrapper{display:flex;line-height:1;gap:0}
.elementor-widget-social-icons.social-icons .elementor-grid-item{margin:0 4px 0 0}
.elementor-widget-social-icons.social-icons .elementor-grid-item:last-child{margin:0}
.elementor-widget-social-icons.social-icons .elementor-social-icon{background:transparent!important;color:#000;font-size:12px;width:24px;height:18px;display:inline-flex;align-items:center;justify-content:flex-start;transition:all ease .2s;border-radius:0}
.elementor-widget-social-icons.social-icons .elementor-social-icon svg{width:1em;height:1em;fill:currentColor}
.elementor-widget-social-icons.social-icons .elementor-social-icon:hover{font-size:14px;background:transparent!important}
.social-icons .elementor-social-icon-facebook:hover,.social-icons .elementor-social-icon-facebook-f:hover{color:#3b5998!important}
.social-icons .elementor-social-icon-twitter:hover{color:#55acee!important}
.social-icons .elementor-social-icon-instagram:hover{color:#cd486b!important}
.social-icons .elementor-social-icon-dribbble:hover{color:#ea4c89!important}
.mat-nav .hire-btn{margin:0 18px 0 0;flex:0 0 auto}
.mat-nav .hire-btn .elementor-button{margin:0}

/* ---------- Page frame: sidebar + right column ---------- */
.mat-wrap{width:1170px;max-width:100%;margin-left:auto!important;margin-right:auto!important;position:relative}
.mat-header{padding-top:60px}
.mat-header .mat-profile{position:absolute;left:15px;top:0;width:calc(25% - 30px);z-index:3}
.mat-right{margin-left:calc(25% + 15px)!important;width:calc(75% - 30px)!important}
.mat-nav.mat-right{margin-bottom:36.8px}

/* ---------- 4. Content card & sections ---------- */
.mat-card{background:#fff;border-radius:6px;box-shadow:0 2px 92px 0 rgba(0,0,0,.07);min-height:500px;padding:15px 0}
.mat-sec{padding-left:30px;padding-right:30px}
.mat-sec.line{border-bottom:solid 1px #efefef}
.mat-sec.graybg{background:#fafafa}
.mat-sec:last-child{border-bottom:0}

.service{background:#fff;border-radius:8px;padding:20px;box-shadow:0 0 48px 0 rgba(4,6,4,.08);min-height:186.8px}
.service .elementor-widget-icon{margin:11px 0 2.8px!important}
.service .elementor-icon-wrapper{text-align:left}
.service .elementor-icon{font-size:44px;color:#000!important;line-height:1}
.service .elementor-icon svg{width:44px;height:44px;fill:#000!important}
.service .service-title .elementor-heading-title{font-size:14px;font-weight:500;line-height:30px;color:#333}
.service .little-text{font-size:13px}

/* skills (Progress Bar widget) */
.elementor .elementor-element.skill{margin-bottom:20px!important}
.skill .elementor-title{font-size:12px;font-weight:500;color:#333!important;line-height:13.2px;height:13.2px;margin:0;padding:0;display:block}
.skill .elementor-progress-wrapper{height:5px!important;background:#dfdfdf;border-radius:50px;overflow:visible;margin:10px 0 0}
.skill .elementor-progress-bar{height:5px!important;min-height:0;background:#ffc500;border-radius:50px 0 0 50px;padding:0}
.skill .elementor-progress-bar .elementor-progress-text,.skill .elementor-progress-percentage{display:none}

/* danh sách kỹ năng (thay thanh tiến trình) */
.mat-bullets ul{list-style:none;margin:0;padding:0}
.mat-bullets li{position:relative;padding-left:20px;font-size:13px;line-height:24px;color:#4c4c4c;margin:0 0 8px}
.mat-bullets li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#ffc500}
/* thẻ thành tích / đơn vị (dùng lại kiểu .client) */
.clients .client.stat,.client.company{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;border-radius:8px;box-shadow:0 0 48px 0 rgba(4,6,4,.08)}
.client.stat{padding:26px 16px;min-height:97.8px}
.client .stat-num .elementor-heading-title{font-size:28px;font-weight:500;line-height:1.1;color:#000}
.client .stat-label,.client .stat-label p{font-size:12px;color:#989898;line-height:16px;margin:6px 0 0}
.client.company{padding:20px 16px;min-height:80px}
.client .company-name .elementor-heading-title{font-size:14px;font-weight:500;line-height:20px;color:#333}
.cv-buttons .elementor-widget-button{width:auto}

/* tên công ty / nền tảng trong Kinh nghiệm làm việc */
.timeline em.co{display:inline-block;font-style:normal;font-size:12px;line-height:16px;font-weight:500;color:#333;background:#fafafa;border:1px solid #efefef;border-radius:50px;padding:4px 12px;margin:0 6px 6px 0;transition:background .25s,border-color .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.timeline em.co:hover{background:#ffc500;border-color:#ffc500;transform:translateY(-2px)}
.timeline li p.little-text{margin-top:2px}
.timeline li h3.line-title{font-weight:700;color:#000}
/* mục nổi bật: IT Business Analyst Foundation – FPT Software */
.timeline li.hl .hl-badge{display:inline-block;background:#ffc500;color:#000;font-weight:700;font-size:12px;line-height:16px;padding:4px 14px;border-radius:50px;box-shadow:0 6px 16px rgba(255,177,0,.4);position:relative;overflow:hidden}
.timeline li.hl .hl-badge:after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-120%) skewX(-20deg);animation:matSweep 3.2s ease-in-out infinite}
.timeline li.hl h3.line-title{font-size:17px}
.timeline li.hl:before{background:#ffc500!important;transform:scale(1.5);animation:matPulse 2.6s ease-out infinite}
.timeline li.hl .line-title:after{content:"★";color:#ffb100;margin-left:8px;font-size:14px}

/* ---------- 5. Resume timeline ---------- */
.resume-row{margin:0 -15px!important;width:calc(100% + 30px)!important}
.resume-row>.e-con{padding:0 15px 30px!important}
ul.timeline{margin:33.1px 0 0 10px;padding:0 15px;list-style:none;width:100%;box-sizing:border-box}
.timeline li{border-left:solid 2px #ececec;list-style:none;padding:0 0 40px 30px;font-size:14px}
.timeline li:before{content:"";border:solid 2px #ffb100;width:8px;height:8px;border-radius:50px;font-size:8px;margin-left:-35px;font-weight:400;background:#fff;display:block;position:absolute;margin-top:-1px;box-sizing:border-box}
.timeline li .line-title{font-size:16px;line-height:20px;font-weight:500;color:#333;margin:-7px 0}
.timeline li:first-child{padding:0 0 60px 19px}
.timeline li:first-child:before{border:0;background:none;position:relative}
.timeline li:first-child i{float:left;margin-left:-30px;padding:18px 16px;border-radius:30px;margin:-13px -45px;background:#ffc500;color:#000;width:53px;height:52px;text-align:center;font-size:18px;box-sizing:border-box}
.timeline li span{font-size:12px;padding:9px 0;display:block}
.timeline li:last-child{border:0;margin-left:2px}
.timeline li h2.timeline-title{font-size:18px;font-weight:500;margin:0 0 0 25px;line-height:30px;color:#333}
.timeline li p{color:#989898;font-size:13px;line-height:18px;margin:0}

.clients .client{background:#fff;padding:26px 16px;border-radius:8px;box-shadow:0 0 48px 0 rgba(4,6,4,.08);width:100%}
.clients .client img{width:100%;display:block}

/* ---------- 8. Testimonials ---------- */
.testimonials{overflow:hidden}
.testimonials .elementor-main-swiper{margin:0 0 -5px!important;width:calc(100% - 30px)!important;max-width:none;overflow:visible;padding-bottom:0!important}
.testimonials .elementor-widget-testimonial-carousel{width:100%}
.testimonials .swiper-slide{padding:0!important}
.testimonials .elementor-testimonial{box-shadow:0 0 48px 0 rgba(4,6,4,.08);padding:15px;border-radius:8px;display:flex;flex-direction:column;background:#fff;margin:0;height:auto}
.testimonials .elementor-testimonial .elementor-testimonial__footer{order:1;display:flex;align-items:flex-start;justify-content:flex-start!important;margin:0 0 10px!important;border-bottom:1px solid #efefef;padding:0 0 15.7px}
.testimonials .elementor-testimonial__content{order:2;margin:0;padding:0;background:none}
.testimonials .elementor-testimonial .elementor-testimonial__content .elementor-testimonial__text{font-size:12.5px!important;line-height:20px!important;color:#989898!important;font-weight:400;font-style:normal;margin:0}
.testimonials .elementor-testimonial .elementor-testimonial__image{width:23%;height:auto!important;margin:0!important;flex:0 0 23%}
.testimonials .elementor-testimonial .elementor-testimonial__image img{width:100%!important;height:auto!important;border-radius:50px;display:block}
.testimonials .elementor-testimonial .elementor-testimonial__cite{padding:8px 12px;line-height:15px;width:68%;margin:0!important;flex:0 0 68%;display:block;box-sizing:border-box}
.testimonials .elementor-testimonial .elementor-testimonial__name{font-size:14px!important;font-weight:500!important;color:#333!important;display:block;line-height:15px}
.testimonials .elementor-testimonial .elementor-testimonial__title{font-size:12px!important;color:#d0d0d0!important;display:block;line-height:15px;font-weight:400!important}
.testimonials .elementor-testimonial__cite b,.testimonials .elementor-testimonial__cite span{font-weight:inherit}
.testimonials .swiper-pagination{position:relative;margin-top:49.1px;min-height:26.8px;bottom:auto;line-height:1;text-align:center;width:calc(100% + 30px);left:-15px;padding-bottom:0}
.testimonials .swiper-pagination-bullet{width:10px;height:10px;margin:5px 5px!important;opacity:.3;background:#ffc500!important;border-radius:20px}
.testimonials .swiper-pagination-bullet-active{opacity:1}

/* ---------- 6. Portfolio ---------- */
.mat-filters{height:20px}
#filters-container{display:flow-root;margin:0}
#filters-container .cbp-filter-item{font-size:14px;color:#787878;cursor:pointer;float:left;margin-right:15px;line-height:20px;transition:all ease .3s}
#filters-container .cbp-filter-item-active{color:#ffc500}
#filters-container .cbp-count{display:inline-block;font-style:normal;font-size:11px;font-weight:500;line-height:1;min-width:20px;text-align:center;padding:3px 6px;margin-left:6px;border-radius:50px;background:#f1f1f1;color:#8a8a8a;vertical-align:1px;transition:background .3s,color .3s,transform .3s cubic-bezier(.3,1.6,.5,1)}
#filters-container .cbp-count:empty{display:none}
#filters-container .cbp-filter-item:hover .cbp-count{transform:scale(1.12)}
#filters-container .cbp-filter-item-active .cbp-count{background:#ffc500;color:#000}
body:not(.elementor-editor-active) .is-extra{display:none!important}
.mat-portfolio-grid .cbp-item.is-filtered-out{display:none}
.cbp-item.mat-work{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 0 48px 0 rgba(4,6,4,.08);background:#fff;transition:all ease .3s;align-self:start}
.cbp-item.mat-work:hover{box-shadow:0 0 20px 0 rgba(4,6,4,.08)}
.mat-work .elementor-widget-image img{width:100%;display:block}
.mat-work .work-icon{position:absolute!important;left:0;right:0;top:50%;margin-top:-20px!important;text-align:center;opacity:0;transition:all ease .3s;pointer-events:none;z-index:2}
.mat-work:hover .work-icon{opacity:.9;transform:translate(0,-25px)}
.mat-work .work-icon .elementor-icon{display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:51px;border-radius:50px;background:rgba(255,197,1,.8)!important;color:#fff!important;font-size:18px}
.mat-work .work-icon .elementor-icon svg{width:18px;height:18px;fill:#fff!important}
.mat-work .work-caption{padding:14px}
.mat-work .work-title .elementor-heading-title{font-size:14px;color:#000;font-weight:400;line-height:22.8px;display:block}
.mat-work .work-info,.mat-work .work-info p{font-size:13px;color:#989898;line-height:18px;margin:0}
.mat-loadmore .elementor-button{cursor:pointer}

/* ---------- 7. Blog (masonry theo cột) ---------- */
.mat-blog-col{flex:1 1 0;min-width:0}
.mat-blog-box{border-radius:6px;overflow:hidden;box-shadow:0 0 48px 0 rgba(4,6,4,.08);background:#fff;transition:all ease .3s;cursor:pointer}
.mat-blog-box:hover{box-shadow:0 0 8px 0 rgba(4,6,4,.08)}
.mat-blog-box .blog-img img{width:100%;display:block}
.mat-blog-box .blog-box-info{padding:15px}
.mat-blog-box .elementor-widget.category{padding-top:4px;height:22.8px;font-size:13px;color:#afafaf;line-height:15px}
.mat-blog-box .blog-title .elementor-heading-title{font-size:15px;color:#000;line-height:20px;padding:2px 0 4px;font-weight:500}
.mat-blog-box .blog-box-info .little-text{padding:5px 0}
.mat-blog-box .blog-box-info .little-text p{font-size:13px;color:#989898;line-height:18px;margin:0}
.mat-blog-box .elementor-widget.date{padding-top:6px;height:22.9px}
.mat-blog-box .date p{color:#505050;font-size:11px;font-family:Arial,sans-serif;margin:0;line-height:12px}

/* thứ tự bài khi blog còn 1–2 cột */
@media (max-width:767px){.bi-1{order:1}.bi-2{order:2}.bi-3{order:3}.bi-4{order:4}.bi-5{order:5}.bi-6{order:6}.bi-7{order:7}.bi-8{order:8}.bi-9{order:9}}

/* ---------- 9. Contact ---------- */
.contact-info ul{margin:0;padding:0;list-style:none}
.contact-info ul li{list-style:none;font-size:14px;color:#787878;line-height:34px}
.contact-info ul li span{color:#000}
.contact-map iframe{width:100%;display:block;border:0}
.contact-map .elementor-widget-html{padding-bottom:6.8px}
.contact-info .elementor-widget.social-icons{height:34px;margin-top:15px}
.contact-info .elementor-widget.social-icons .elementor-social-icons-wrapper{padding-top:1px;justify-content:flex-start}
.mat-form .elementor-field-textual{width:100%;height:45px;border:0;border-bottom:solid 1px #dfdfdf;border-radius:0;color:#000;font-size:13px;padding:0 0 0 10px;background:transparent;outline:0;box-shadow:none;font-family:'Roboto',sans-serif}
.mat-form textarea.elementor-field-textual{height:auto;min-height:100px;padding:20px 0 0 10px}
.mat-form .elementor-field-textual:focus{border-color:rgba(0,0,0,.38)!important;box-shadow:none}
.mat-form .elementor-field-textual::placeholder{color:#757575;opacity:1}
.mat-form textarea.elementor-field-textual{resize:both;line-height:18.57px}
.mat-form .elementor-field-textual{line-height:18.57px}
.mat-form .elementor-field-type-submit{width:auto!important;flex:0 0 auto!important;margin:21.9px 0 0}
.mat-form .elementor-form-fields-wrapper{padding-bottom:30px}
.elementor .mat-form .elementor-field-type-submit .elementor-button{width:auto!important;height:37px!important;min-height:0;font-family:'Roboto',sans-serif;font-size:14px;font-weight:500;line-height:35px;border:0;border-radius:50px;padding:1px 29px;background:#ffc500;color:#000;transition:all ease .3s}
.mat-form .elementor-button:hover{background:#ffb100;color:#000}

/* ---------- 10. Footer ---------- */
.mat-footer-box{background:#1e1e1e;min-height:70px;border-radius:8px;color:#fff;line-height:72px;margin-top:30px;margin-bottom:30px;padding:0 15px;display:flex;flex-direction:row;align-items:center}
.mat-footer-box .footer-name{width:33.33333%;flex:0 0 33.33333%}
.mat-footer-box .footer-name .elementor-heading-title{color:#fff;font-size:15px;font-weight:400;line-height:72px}
.mat-footer-box .copyright{flex:1 1 auto;text-align:right}
.mat-footer-box .copyright,.mat-footer-box .copyright p{color:#9c9c9c;font-size:12px;line-height:72px;margin:0;text-align:right}
.mat-footer-box .copyright a{color:#fff}
.mat-footer-box .copyright a:hover{color:#dfdfdf;transition:all ease .3s}


/* ---------- Dự án (Posts widget) – thẻ giống .cbp-item ---------- */
.mat-projects .elementor-posts-container{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:36.8px 30px!important;align-items:start;margin:0}
.mat-projects article.elementor-post{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 0 48px 0 rgba(4,6,4,.08);background:#fff;transition:all ease .3s;margin:0;padding:0;border:0;display:block;min-width:0}
.mat-projects article.elementor-post:hover{box-shadow:0 0 20px 0 rgba(4,6,4,.08)}
.mat-projects article.is-filtered-out,.mat-projects article.is-over{display:none!important}
.mat-projects .elementor-post__thumbnail__link{display:block;margin:0!important;width:100%!important}
.mat-projects .elementor-post__thumbnail{padding-bottom:0!important;height:auto;overflow:hidden;border-radius:0}
.mat-projects .elementor-post__thumbnail img{position:static!important;transform:none!important;width:100%;height:auto;display:block}
.mat-projects .elementor-post__text{padding:14px;margin:0}
.mat-projects .elementor-post__title{margin:0;font-size:14px;font-weight:400;line-height:22.8px;color:#000}
.elementor .mat-projects .elementor-post__title a{color:#000!important;font-size:14px;font-weight:400}
.mat-projects .elementor-post__title a:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:3}
.mat-projects .elementor-post__excerpt{margin:0}
.mat-projects .elementor-post__excerpt p{font-size:13px;color:#989898;line-height:18px;margin:0}
.mat-projects article.elementor-post:after{content:"\f24d";font-family:FontAwesome;position:absolute;left:50%;margin-left:-25px;top:calc(50% - 20px - 34px);width:50px;height:51px;line-height:51px;border-radius:50px;background:rgba(255,197,1,.8);color:#fff;text-align:center;font-size:18px;opacity:0;transition:all ease .3s;pointer-events:none;z-index:2}
.mat-projects article.category-thiet-ke-website:after,.mat-projects article.category-website-design:after{content:"\f0c1"}
.mat-projects article.elementor-post:hover:after{opacity:.9;transform:translate(0,-25px)}

/* ---------- Bài viết dự án (Single) ---------- */
.mat-single{align-items:flex-start}
.mat-single-post{padding-right:30px;min-width:0}
.mat-single .blog-image img{width:100%;border-radius:6px;display:block}
.mat-single .elementor-widget.blog-title{margin:30px 0!important}
.mat-single .blog-title .elementor-heading-title{font-size:26px;font-weight:700;line-height:30px;color:#333}
.mat-single .post-content,.mat-single .post-content p{font-size:13px;color:#4c4c4c;line-height:24px}
.mat-single .post-content p{margin:0 0 10px}
.mat-single .post-content h3{font-size:16px;font-weight:500;color:#333;margin:25px 0 10px;line-height:1.3}
.mat-single .post-content ul{list-style:none;margin:0 0 10px;padding:0}
.mat-single .post-content li{position:relative;padding-left:20px;margin:0 0 6px;font-size:13px;line-height:24px}
.mat-single .post-content li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#ffc500}
.mat-single .post-content a{color:#ffb100;font-weight:500}
.mat-single .post-content a:hover{color:#ffc500}
.blog-sidebar{border-left:solid 1px #efefef;padding-left:30px;min-width:0}
.blog-sidebar .category .widgettitle,.blog-sidebar .category .widget-title,.blog-sidebar .category h5{display:none}
.blog-sidebar .category ul{list-style:none;margin:0;padding:0}
.blog-sidebar .category ul li{font-size:13px;color:#8a8a8a;border-bottom:solid 1px #efefef;line-height:35px;margin:0}
.blog-sidebar .category ul li a{color:#3d3d3d}
.blog-sidebar .category ul li a:hover{color:#ffb100}
.blog-sidebar .back-btn{margin-top:30px}
.mat-related .elementor-posts-container{display:block!important}
.mat-related article.elementor-post{border-bottom:solid 1px #efefef;padding:16px 0;margin:0;background:none;box-shadow:none}
.mat-related article.elementor-post:last-child{border:0}
.mat-related .elementor-post__text{margin:0;padding:0;display:flex;flex-direction:column-reverse}
.elementor .mat-related .elementor-post__title,.elementor .mat-related .elementor-post__title a{font-size:14px;line-height:22px;color:#000!important;font-weight:400;margin:0}
.mat-related .elementor-post__title a:hover{color:#ffb100}
.mat-related .elementor-post__meta-data{font-size:12px;color:#b4b4b4;margin:0 0 2px}
.mat-related .elementor-post__meta-data span{font-size:12px;color:#b4b4b4}

/* ---------- Select ngôn ngữ (shortcode [mat_lang]) ---------- */
.mat-lang-wrap{flex:0 0 auto;margin-right:12px;position:relative;z-index:30}
.mat-lang-wrap .elementor-shortcode{line-height:1}
.mat-langsel{position:relative;display:inline-block;font-family:'Roboto',sans-serif}
.mat-langsel__btn{display:flex;align-items:center;gap:8px;height:37px;padding:0 13px 0 11px;border:1px solid #e8e8e8;border-radius:50px;background:#fff;color:#000;font:500 13px/1 'Roboto',sans-serif;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s,background .3s}
.mat-langsel__btn:hover,.mat-langsel__btn:focus-visible,.mat-langsel.is-open .mat-langsel__btn,.mat-langsel:hover .mat-langsel__btn{border-color:#ffc500;box-shadow:0 8px 22px rgba(255,197,0,.38);transform:translateY(-2px);background:#fffdf5;color:#000;outline:0}
.mat-langsel__btn img{width:20px;height:auto;border-radius:2px;display:block;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.mat-langsel:hover .mat-langsel__btn img,.mat-langsel.is-open .mat-langsel__btn img{transform:rotate(-10deg) scale(1.18)}
.mat-langsel__chev{transition:transform .35s cubic-bezier(.3,1.4,.5,1);color:#ffb100}
.mat-langsel:hover .mat-langsel__chev,.mat-langsel.is-open .mat-langsel__chev{transform:rotate(180deg)}
.mat-langsel__menu{position:absolute;right:0;top:100%;padding-top:10px;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.94);transform-origin:top right;transition:opacity .28s,transform .35s cubic-bezier(.2,.9,.3,1.2),visibility 0s .35s}
.mat-langsel:hover .mat-langsel__menu,.mat-langsel.is-open .mat-langsel__menu,.mat-langsel:focus-within .mat-langsel__menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mat-langsel__menu ul{list-style:none;margin:0;padding:6px;background:#fff;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.04)}
.mat-langsel__menu li{margin:0;opacity:0;transform:translateX(14px);transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.3,1.2);transition-delay:0s}
.mat-langsel:hover .mat-langsel__menu li,.mat-langsel.is-open .mat-langsel__menu li,.mat-langsel:focus-within .mat-langsel__menu li{opacity:1;transform:none;transition-delay:calc(var(--i) * 70ms + 60ms)}
.mat-langsel__menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#000;font-size:13px;font-weight:500;position:relative;overflow:hidden;transition:background .25s,padding .25s,color .25s}
.mat-langsel__menu a img{width:22px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.mat-langsel__menu a:hover{background:rgba(255,197,0,.18);padding-left:16px;color:#000}
.mat-langsel__menu li.is-current a{background:rgba(255,197,0,.28)}
.mat-langsel__menu li.is-current a:after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:#ffb100;box-shadow:0 0 0 4px rgba(255,177,0,.25)}

/* ---------- Facebook + Zalo cạnh nút ngôn ngữ ---------- */
.mat-social-wrap{flex:0 0 auto;margin-right:12px}
.mat-social{display:flex;gap:8px}
.mat-social__a{width:34px;height:34px;border-radius:50%;border:1px solid #e8e8e8;background:#fff;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,border-color .3s,transform .4s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.mat-social__fb{color:#1877f2}
.mat-social__zl{color:#0068ff}
.mat-social__a svg{display:block;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.mat-social__fb:hover{background:#1877f2;border-color:#1877f2;color:#fff;box-shadow:0 8px 20px rgba(24,119,242,.4)}
.mat-social__zl:hover{background:#0068ff;border-color:#0068ff;color:#fff;box-shadow:0 8px 20px rgba(0,104,255,.4)}
.mat-social__a:hover{transform:translateY(-3px)}
.mat-social__a:hover svg{transform:rotate(-12deg) scale(1.15)}

/* ---------- Giới thiệu: lời dẫn, giá trị, kêu gọi liên hệ ---------- */
.elementor-widget-text-editor.about-lead p{font-size:16px;line-height:27px;font-weight:500;color:#222;margin:0 0 14px}
.about-body p{margin:0 0 12px}
.elementor .elementor-widget.about-sub{margin-top:18px!important;margin-bottom:16px!important}
.elementor .about-sub .elementor-heading-title{font-size:15px;font-weight:600;color:#333!important;line-height:1.3}
.about-values .value{position:relative;padding:4px 0 4px 18px;transition:translate .35s var(--ease)}
.about-values .value:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:linear-gradient(180deg,#ffc500,#ffb100);transform:scaleY(.45);transform-origin:top;transition:transform .5s var(--ease)}
.about-values .value:hover{translate:4px 0}
.about-values .value:hover:before{transform:scaleY(1)}
.about-values .value-title .elementor-heading-title{font-size:14px;font-weight:500;line-height:1.3;color:#000;margin:0 0 4px}
.about-values .value-desc,.about-values .value-desc p{font-size:13px;line-height:20px;color:#6b6b6b;margin:0}
.about-cta-text,.about-cta-text p{margin:26px 0 16px!important;font-size:14px;line-height:24px;color:#333;font-weight:500}
.about-cta .elementor-widget-button{width:auto}

/* ---------- Thẻ nhắn tin trực tiếp (Zalo / Facebook) ---------- */
.chat-intro,.chat-intro p{font-size:13px;color:#4c4c4c;line-height:24px;margin:0 0 18px}
.chat-cards{display:flex;flex-direction:column;gap:15px}
.chat-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid #efefef;border-radius:12px;background:#fff;box-shadow:0 0 48px 0 rgba(4,6,4,.08);color:#000;text-decoration:none!important;transition:translate .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.chat-card__ico{flex:0 0 48px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.chat-card--zalo .chat-card__ico{background:#0068ff}
.chat-card--fb .chat-card__ico{background:#1877f2}
.chat-card__txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.chat-card__txt strong{font-size:15px;font-weight:500;line-height:1.2;color:#000}
.chat-card__txt small{font-size:12px;color:#989898;line-height:1.2}
.chat-card__arrow{font-size:20px;color:#bdbdbd;transition:transform .35s var(--ease),color .3s}
.chat-card:after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-130%) skewX(-20deg);pointer-events:none}
.chat-card:hover{translate:0 -5px}
.chat-card:hover:after{animation:matSweep .9s ease}
.chat-card:hover .chat-card__ico{transform:rotate(-12deg) scale(1.1)}
.chat-card:hover .chat-card__arrow{transform:translateX(6px)}
.chat-card--zalo:hover{border-color:#0068ff;box-shadow:0 18px 40px rgba(0,104,255,.25)}
.chat-card--zalo:hover .chat-card__arrow{color:#0068ff}
.chat-card--fb:hover{border-color:#1877f2;box-shadow:0 18px 40px rgba(24,119,242,.25)}
.chat-card--fb:hover .chat-card__arrow{color:#1877f2}

/* ---------- Zalo ---------- */
.mat-profile ul.profile-information li a.zalo-link,.contact-info li a.zalo-link{color:#0068ff;font-weight:500;transition:color .25s}
.mat-profile ul.profile-information li a.zalo-link:hover,.contact-info li a.zalo-link:hover{color:#0050c8}
.elementor-widget-button.zalo-btn .elementor-button{background:#0068ff!important;color:#fff!important}
.elementor-widget-button.zalo-btn .elementor-button:hover{background:#0050c8!important}
.elementor-widget-button.zalo-btn .elementor-button-icon svg{fill:#fff;width:14px;height:14px;margin-right:8px}
.mat-zalo-wrap{position:fixed!important;right:22px;bottom:58px;z-index:9999;width:auto!important;padding:0!important}
.mat-zalo{position:relative;display:block;width:56px;height:56px;text-decoration:none!important}
.mat-zalo__ico{position:relative;width:56px;height:56px;border-radius:50%;display:block;box-shadow:0 8px 24px rgba(0,104,255,.45);animation:matRing 2.4s ease-out infinite;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.mat-zalo__ico svg{display:block}
.mat-zalo__txt{position:absolute;left:50%;top:calc(100% + 8px);white-space:nowrap;background:#0068ff;color:#fff;font:500 12px/1 'Roboto',sans-serif;padding:7px 13px;border-radius:20px;box-shadow:0 8px 20px rgba(0,104,255,.4);opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.9);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1),visibility 0s .35s;pointer-events:none}
.mat-zalo__txt:before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;background:#0068ff;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.mat-zalo:hover .mat-zalo__ico,.mat-zalo:focus-visible .mat-zalo__ico{transform:translateY(-3px) rotate(-10deg) scale(1.08)}
.mat-zalo:hover .mat-zalo__txt,.mat-zalo:focus-visible .mat-zalo__txt{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
@keyframes matRing{0%{box-shadow:0 8px 24px rgba(0,104,255,.45),0 0 0 0 rgba(0,104,255,.5)}70%{box-shadow:0 8px 24px rgba(0,104,255,.45),0 0 0 18px rgba(0,104,255,0)}100%{box-shadow:0 8px 24px rgba(0,104,255,.45),0 0 0 0 rgba(0,104,255,0)}}

/* ---------- Kỹ năng theo 4 lĩnh vực ---------- */
.skills-grid{counter-reset:sk}
.skill-card{counter-increment:sk;--mx:50%;--my:50%;position:relative;overflow:hidden;background:#fff;border-radius:8px;padding:24px 26px 20px!important;box-shadow:0 0 48px 0 rgba(4,6,4,.08);transition:translate .4s var(--ease),box-shadow .4s var(--ease)}
.skill-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#ffc500,#ffb100);transform:scaleY(.35);transform-origin:top;transition:transform .5s var(--ease)}
.skill-card:hover{translate:0 -6px;box-shadow:0 22px 50px rgba(255,177,0,.22),0 0 0 1px rgba(255,197,0,.35);background-image:radial-gradient(300px circle at var(--mx) var(--my),rgba(255,197,0,.14),transparent 65%)}
.skill-card:hover:before{transform:scaleY(1)}
.skill-card.skill-base{grid-column:1/-1}
.skill-card .skill-title .elementor-heading-title{display:flex;align-items:center;font-size:16px;font-weight:500;line-height:1.2;color:#333}
.skill-card .skill-title .elementor-heading-title:before{content:counter(sk,decimal-leading-zero);font-size:28px;font-weight:300;line-height:1;color:#ffc500;margin-right:14px;letter-spacing:-1px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.skill-card:hover .skill-title .elementor-heading-title:before{transform:scale(1.12) translateX(2px)}
.skill-card.skill-base .skill-title .elementor-heading-title:before{content:"+";font-size:26px}
.skill-card .skill-tags{margin-top:16px}
.skill-card .skill-tags ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.skill-card .skill-tags li{margin:0;padding:6px 13px;border:1px solid #efefef;border-radius:50px;background:#fafafa;font-size:12px;line-height:16px;color:#4c4c4c;cursor:default;transition:background .25s,border-color .25s,color .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.skill-card .skill-tags li:hover{background:#ffc500;border-color:#ffc500;color:#000;transform:translateY(-3px)}

/* =====================  HIỆU ỨNG  ===================== */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
.animated{animation-duration:.9s!important}
.animated.animated-slow{animation-duration:.9s!important}
@keyframes matUp{from{opacity:0;transform:translateY(34px) scale(.98)}to{opacity:1;transform:none}}
@keyframes matLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes matPulse{0%{box-shadow:0 2px 32px 0 rgba(4,123,248,.3),0 0 0 0 rgba(255,197,0,.55)}70%{box-shadow:0 2px 32px 0 rgba(4,123,248,.3),0 0 0 14px rgba(255,197,0,0)}100%{box-shadow:0 2px 32px 0 rgba(4,123,248,.3),0 0 0 0 rgba(255,197,0,0)}}
@keyframes matSweep{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(320%) skewX(-20deg)}}
@keyframes matGlow{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes matBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* thanh tiến trình cuộn trang */
.mat-scrollbar{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#ffb100,#ffc500 60%,#fff1b0);transform-origin:left;transform:scaleX(0);z-index:99999;pointer-events:none;box-shadow:0 0 10px rgba(255,197,0,.7)}
@supports (animation-timeline:scroll()){.mat-scrollbar{animation:matBar linear both;animation-timeline:scroll(root)}}

/* nhấc thẻ + đèn rọi theo chuột */
.service,.client.stat,.client.company,.cbp-item.mat-work,.mat-projects article.elementor-post,.mat-blog-box{--mx:50%;--my:50%;transition:translate .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.service:hover,.client.stat:hover,.client.company:hover,.cbp-item.mat-work:hover,.mat-projects article.elementor-post:hover{translate:0 -8px;box-shadow:0 22px 50px rgba(255,177,0,.22),0 0 0 1px rgba(255,197,0,.35)!important;background-image:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,197,0,.16),transparent 65%)}
.service .elementor-icon-wrapper{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.service:hover .elementor-icon-wrapper{transform:translateY(-4px) rotate(-6deg) scale(1.08)}
.mat-projects article .elementor-post__thumbnail img,.mat-work .elementor-widget-image img{transition:transform .8s var(--ease)}
.mat-projects article:hover .elementor-post__thumbnail img,.mat-work:hover .elementor-widget-image img{transform:scale(1.07)!important}

/* nút: vệt sáng quét */
.elementor-widget-button.site-btn .elementor-button,.mat-form .elementor-button{position:relative;overflow:hidden;transition:background .3s,transform .3s var(--ease),box-shadow .3s}
.elementor-widget-button.site-btn .elementor-button:after,.mat-form .elementor-button:after{content:"";position:absolute;top:0;left:0;width:34%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-120%) skewX(-20deg);pointer-events:none}
.elementor-widget-button.site-btn .elementor-button:hover,.mat-form .elementor-button:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(255,177,0,.45)}
.elementor-widget-button.site-btn .elementor-button:hover:after,.mat-form .elementor-button:hover:after{animation:matSweep .9s ease}
.elementor-widget-button.zalo-btn .elementor-button:hover{box-shadow:0 10px 24px rgba(0,104,255,.4)}
.elementor-widget-button.site-btn.icon .elementor-button:hover .elementor-button-icon{transform:rotate(-12deg) scale(1.1)}
.elementor-widget-button.site-btn.icon .elementor-button-icon{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}

/* menu: gạch chân chạy + nút Home */
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item{position:relative}
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item:before{content:"";position:absolute;left:10px;right:10px;bottom:20px;height:2px;border-radius:2px;background:currentColor!important;background-color:currentColor!important;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item:after{display:none!important}
.mat-nav .nav-links .elementor-nav-menu--main .elementor-item:hover:before,.mat-nav .nav-links .elementor-nav-menu--main .elementor-item.elementor-item-active:before{transform:scaleX(1)}
.mat-nav:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#ffc500,transparent);opacity:.7;animation:matGlow 3.6s ease-in-out infinite;pointer-events:none}
.mat-nav .home-btn .elementor-icon svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.mat-nav .home-btn .elementor-icon:hover svg{transform:scale(1.18) rotate(-8deg)}

/* hồ sơ: ảnh + huy hiệu */
.mat-profile .profile-image img{transition:transform .9s var(--ease),filter .6s}
.mat-profile:hover .profile-image img{transform:scale(1.05);filter:saturate(1.08)}
.mat-profile .elementor-widget.profile-image{overflow:hidden}
ul.profile-information li:first-child:before{animation:matPulse 2.6s ease-out infinite}
ul.profile-information li:not(:first-child){transition:transform .3s var(--ease)}
ul.profile-information li:not(:first-child):hover{transform:translateX(6px)}
ul.profile-information li:not(:first-child):before{transition:transform .3s,background .3s}
ul.profile-information li:not(:first-child):hover:before{background:#ffc500;transform:scale(1.35)}

/* tiêu đề mục: đường gạch vẽ ra */
.elementor .elementor-widget.section-title:before{transform-origin:left;animation:matLine 1s .25s var(--ease) both}
@supports (animation-timeline:view()){.elementor .elementor-widget.section-title:before{animation:matLine linear both;animation-timeline:view();animation-range:entry 20% entry 90%}}

/* mốc timeline, danh sách kỹ năng, dòng kinh nghiệm */
.timeline li:before{transition:transform .3s,background .3s}
.timeline li:not(:first-child):hover:before{background:#ffc500;transform:scale(1.4)}
.timeline li:first-child i{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.timeline li:first-child:hover i{transform:rotate(-10deg) scale(1.1)}
.mat-bullets li{transition:transform .3s var(--ease),color .3s}
.mat-bullets li:hover{transform:translateX(6px);color:#000}
.mat-bullets li:before{transition:transform .3s}
.mat-bullets li:hover:before{transform:scale(1.5)}

/* thẻ dự án: xuất hiện theo cuộn trang (rơi về hiệu ứng nối tiếp khi tải) */
.mat-projects article.elementor-post{animation:matUp .8s var(--ease) both}
.mat-projects article.elementor-post:nth-child(2){animation-delay:.08s}.mat-projects article.elementor-post:nth-child(3){animation-delay:.16s}.mat-projects article.elementor-post:nth-child(4){animation-delay:.24s}.mat-projects article.elementor-post:nth-child(5){animation-delay:.32s}.mat-projects article.elementor-post:nth-child(6){animation-delay:.40s}.mat-projects article.elementor-post:nth-child(n+7){animation-delay:.48s}
.mat-related article.elementor-post{animation:none}
@supports (animation-timeline:view()){
  .mat-projects article.elementor-post{animation:matUp linear both;animation-timeline:view();animation-range:entry 0% entry 55%;animation-delay:0s!important}
  .mat-bullets li,.timeline li:not(:first-child){animation:matUp linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
/* menu nằm trên khối nội dung để dropdown không bị che */
.mat-header{position:relative;z-index:40}
.mat-nav{z-index:41}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .elementor-invisible{visibility:visible!important;opacity:1!important}
  .mat-scrollbar{display:none}
}

/* =====================  Responsive  ===================== */
@media (max-width:1199px){
  .mat-wrap{width:970px}
  .mat-header .mat-profile{width:calc(33.33333% - 30px)}
  .mat-right{margin-left:calc(33.33333% + 15px)!important;width:calc(66.66667% - 30px)!important}
  .mat-footer-box .footer-name{display:none}
  .mat-footer-box .copyright,.mat-footer-box .copyright p{text-align:center}
}
@media (max-width:991px){
  .mat-wrap{width:750px}
  .mat-header{padding-top:30px}
  .mat-header .mat-profile{position:relative;left:auto;top:auto;width:calc(100% - 30px);margin:0 15px;padding-bottom:30px}
  .mat-profile .profile-btn{padding-top:0}
  .mat-right{margin-left:15px!important;width:calc(100% - 30px)!important}
  .mat-header .mat-nav{margin-top:30px}
  ul.profile-information{margin:0 auto 30px;display:table}
  .mat-card{padding-bottom:45px}
  .elementor .skills-col:last-child{padding-top:0!important}
  .elementor .skills-col:last-child .skill:last-child{margin-bottom:0!important}
  .mat-footer-box{padding:0 15px}
}
@media (max-width:991px) and (min-width:576px){
  .mat-profile .profile-name .elementor-heading-title{font-size:20px;line-height:20px}
  .mat-profile .elementor-widget.profile-image{margin-top:-40px}
}
@media (max-width:991px) and (min-width:768px){
  .mat-nav .social-icons{display:none}
}
@media (max-width:767px){
  .mat-wrap{width:100%}
  .mat-projects .elementor-posts-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mat-single-post{padding-right:0}
  .blog-sidebar{border-left:0;padding-left:0;margin-top:30px}
  .mat-zalo-wrap{right:14px;bottom:52px}
  .mat-nav .hire-btn{display:none}
  .elementor .mat-blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36.8px 30px;align-items:start}
  .mat-blog-col{display:contents}
  .mat-blog-box{width:auto}
  .mat-nav .mat-lang-wrap{order:2;margin-left:auto;margin-right:0}
  .mat-nav .nav-links{order:3;flex:0 0 auto;margin-left:0}
  .mat-nav .nav-links .elementor-menu-toggle{margin-left:21px}
  .mat-nav .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open{display:inline-block!important}
  .mat-nav .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close{display:none!important}
  .mat-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{background:#fff;border-radius:8px;box-shadow:0 2px 92px 0 rgba(0,0,0,.05);margin-top:25px!important;z-index:20;overflow:hidden}
  .mat-nav .elementor-nav-menu--dropdown a.elementor-item,.mat-nav .elementor-nav-menu--dropdown a.elementor-item:hover,.mat-nav .elementor-nav-menu--dropdown a.elementor-item:focus{display:block;width:100%;text-align:center;font-family:'Roboto',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;color:#000;line-height:58px;padding:0;border:0;border-bottom:solid 1px #efefef;background:transparent;height:auto}
  .mat-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{color:#ffb100}
  .mat-nav .elementor-nav-menu--dropdown li{margin:0}
  .mat-nav .nav-links,.mat-nav .nav-links>.elementor-widget-container{position:static!important}
  .mat-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{left:0!important;width:100%!important;top:100%!important;transform-origin:top}
}
@media (max-width:479px){
  .mat-social-wrap{display:none}
  .mat-projects .elementor-posts-container{grid-template-columns:minmax(0,1fr)!important}
  .mat-portfolio-grid.e-grid{--e-con-grid-template-columns:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
  .elementor .mat-blog-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:321px){
  .mat-nav .social-icons{display:none}
  .mat-nav .nav-links .elementor-menu-toggle{border:0}
}/* End custom CSS */