/*
Theme Name: Nang Anh Studio
Author: Nang Anh Studio
Description: Giao diện tiếng Việt dành cho studio ảnh và dịch vụ phát triển phần mềm ảnh, video. Tùy chỉnh trong Giao diện > Tùy biến.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nang-anh-studio
*/
:root{--paper:#f7f5ef;--ink:#22251f;--muted:#666a60;--line:#d9dbd2;--orange:#e66b36}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block;object-fit:cover}button,input,textarea{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.wrap{width:min(1240px,calc(100% - 64px));margin:auto}.site-header{border-bottom:1px solid var(--line);background:var(--paper)}.nav{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:94px}.brand{font-size:23px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center;gap:12px}.brand em{font-style:normal;color:var(--orange);font-size:36px}.custom-logo{width:auto;max-height:55px}.menu{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;font-size:14px}.menu a:hover{color:var(--orange)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 23px;background:var(--ink);color:white;border:1px solid var(--ink);font-size:14px;font-weight:600;gap:20px}.btn.orange{background:var(--orange);border-color:var(--orange)}.btn.outline{background:transparent;color:var(--ink)}.btn:hover{filter:brightness(.9)}.eyebrow{text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:2.3px;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:7px;height:7px;background:var(--orange);border-radius:50%}h1,h2,h3,p{margin-top:0}h1,h2{font-weight:500;letter-spacing:-2.8px;line-height:1.12}h1{font-size:clamp(42px,5.8vw,78px);margin:27px 0}h1 i,h2 i{font-family:"Noto Serif",Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-1.5px;line-height:1.25;color:var(--orange)}h2{font-size:clamp(34px,4vw,52px)}h3{font-size:23px;line-height:1.3;letter-spacing:-.6px}p{color:var(--muted)}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;padding:62px 0 58px;align-items:center}.hero-copy>p{max-width:460px;font-size:17px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}.hero-photo{position:relative}.hero-photo img{height:580px;width:100%;object-position:center 36%;border-radius:180px 180px 3px 3px}.photo-note{position:absolute;bottom:24px;left:24px;right:24px;color:white;display:flex;justify-content:space-between;align-items:end;text-shadow:0 1px 12px black}.photo-note small{font-size:10px;letter-spacing:2px}.photo-note b{font-family:Georgia,serif;font-weight:400;font-size:25px}.hero-foot{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;display:flex;align-items:center;gap:15px;margin-top:43px}.hero-foot span{width:44px;height:1px;background:var(--ink)}.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}.ribbon .wrap{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1.5px}.ribbon b{color:var(--orange)}section{padding:85px 0}.section-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.section-top h2{margin:16px 0 0}.section-top p{max-width:330px;margin:0;font-size:14px}.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.service{padding:30px 28px 20px 0;border-bottom:1px solid var(--line)}.service+.service{border-left:1px solid var(--line);padding-left:28px}.number{display:block;color:var(--orange);font-size:13px;margin-bottom:30px}.service p{font-size:14px;min-height:70px}.text-link{font-size:13px;font-weight:700;display:inline-flex;gap:30px;border-bottom:1px solid var(--ink);padding-bottom:4px}.gallery{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:24px}.gallery img{width:100%;height:360px}.gallery article:nth-child(2){padding-top:45px}.gallery article:nth-child(3){padding-top:90px}.caption{display:flex;justify-content:space-between;margin-top:16px;gap:10px}.caption h3{font-size:18px;margin:0}.caption small{color:var(--muted);font-size:11px}.software-section{background:#22251f;color:var(--paper)}.software-section p{color:#b9bcb1}.software-section .eyebrow{color:#c2c5ba}.software-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.software-card{border:1px solid #4b4e44;padding:30px}.software-card h3{font-size:28px;margin-top:25px}.software-card .tag{font-size:10px;letter-spacing:1.6px;color:#f9ac85}.mock{height:235px;background:#161913;border:1px solid #4b4e44;padding:16px;overflow:hidden}.mock-bar{display:flex;gap:5px;padding-bottom:12px}.mock-bar i{height:5px;width:5px;border-radius:50%;background:#666a60}.editor{display:grid;grid-template-columns:1fr 95px;gap:12px;height:170px}.editor img{width:100%;height:170px}.sliders{font-size:9px;color:#ccc}.sliders span{display:block;border-bottom:2px solid #777b6b;margin:12px 0;padding-bottom:5px}.sliders span:nth-child(2){border-color:var(--orange)}.video{height:128px;background:linear-gradient(130deg,#a5b6aa,#425f50);display:grid;place-items:center;font-size:38px}.timeline{display:flex;gap:5px;margin-top:12px}.timeline i{height:22px;flex:1;background:#e66b36}.timeline i:nth-child(even){background:#81937a}.feature-list{padding:0;list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.feature-list li{border:1px solid #4b4e44;font-size:11px;padding:5px 9px}.software-card .text-link{border-color:#c2c5ba}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.process article{border-top:1px solid var(--line);padding-top:24px}.process h3{font-size:19px}.process p{font-size:14px}.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding-top:50px;margin-top:70px}.about blockquote{font-family:Georgia,serif;font-size:30px;line-height:1.45;margin:0}.faq{max-width:900px;margin:auto}.faq details{border-bottom:1px solid var(--line);padding:22px 0}.faq summary{cursor:pointer;font-weight:600}.faq details p{margin:16px 0 0;font-size:14px}.contact{background:#e9ece2}.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:65px}.contact h2{font-size:56px}.contact-links{display:flex;gap:12px;flex-wrap:wrap}.contact-note{border-top:1px solid #bdc3b4;padding-top:24px}.site-footer{padding:42px 0 22px}.footer-top{display:flex;justify-content:space-between;gap:24px}.footer-bottom{border-top:1px solid var(--line);margin-top:35px;padding-top:20px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:white;padding:15px}.menu-toggle{display:none}.content{padding:65px 0;max-width:900px}.content h1{font-size:50px}.content a{color:#a84922;text-decoration:underline}.content img{height:auto}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.post-card{border-top:1px solid var(--line);padding-top:22px}.post-card img{width:100%;height:210px;margin-bottom:20px}.post-card h2{font-size:27px;letter-spacing:-1px}.post-card small{color:var(--muted)}.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden}.pagination{padding:35px 0}.page-numbers{margin-right:18px}.comments-area{margin-top:50px}input,textarea{max-width:100%;padding:10px;border:1px solid var(--line)}@media(max-width:950px){.menu{gap:15px}.hero{gap:30px}.hero-photo img{height:500px}.nav>.btn{display:none}.gallery img{height:280px}}@media(max-width:700px){.wrap{width:calc(100% - 36px)}.nav{min-height:76px;flex-wrap:wrap;padding:12px 0}.brand{font-size:21px}.menu-toggle{display:block;border:1px solid var(--line);background:transparent;padding:7px 12px}.main-nav{display:none;width:100%}.main-nav.open{display:block}.menu{flex-direction:column;align-items:start;gap:0}.menu li{width:100%}.menu a{display:block;padding:12px 0}.hero{grid-template-columns:1fr;padding:36px 0;gap:25px}.hero-photo img{height:450px}.hero-foot{margin-top:25px}.ribbon .wrap{flex-wrap:wrap;font-size:10px;justify-content:center}section{padding:55px 0}.section-top{align-items:start;flex-direction:column;gap:16px}.services,.gallery,.software-grid,.contact-grid,.about,.post-grid{grid-template-columns:1fr}.service+.service{border-left:0;padding-left:0}.service p{min-height:0}.gallery article:nth-child(n){padding-top:0}.gallery img{height:390px}.process{grid-template-columns:1fr 1fr}.software-card{padding:20px}.about{gap:25px}.contact h2{font-size:43px}.contact-grid{gap:25px}.footer-top,.footer-bottom{flex-direction:column}.content h1{font-size:37px}.content{padding:40px 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@font-face{font-family:"Noto Serif";src:url("assets/noto-serif-italic.ttf") format("truetype");font-style:italic;font-weight:100 900;font-display:swap}

.contact-grid{grid-template-columns:1fr 1.1fr;column-gap:64px;row-gap:32px}.contact-grid>div:first-child{grid-column:1;grid-row:1}.contact-note{grid-column:1;grid-row:2}.contact-form-panel{grid-column:2;grid-row:1 / span 2;background:var(--paper);padding:32px;border:1px solid #d2d7c9}.contact-form-panel>p{font-size:14px}.contact-form{display:grid;gap:18px}.contact-form label{display:grid;gap:7px;font-size:13px;font-weight:600}.contact-form input,.contact-form select,.contact-form textarea{width:100%;min-width:0;background:#fff;border:1px solid #cdd2c5;border-radius:0;padding:12px 14px;font:inherit;font-size:14px;font-weight:400;color:var(--ink)}.contact-form textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.optional{font-weight:400;color:var(--muted);display:contents}.contact-form .btn{justify-self:start;cursor:default;opacity:.7}.form-note{font-size:12px;margin:0;line-height:1.6}.contact-note h3{margin-bottom:20px}@media(max-width:700px){.contact-grid{grid-template-columns:1fr;gap:28px}.contact-grid>div:first-child,.contact-note,.contact-form-panel{grid-column:auto;grid-row:auto}.contact-form-panel{padding:24px}.form-row{grid-template-columns:1fr}}

.contact-form label{display:block}.contact-form input,.contact-form select,.contact-form textarea{display:block;margin-top:7px}
